Verzoek Detail

Component preview

<header>
    <div class="dso-logo-bar">
        <img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" />
        <div class="dso-tools-bar">
            <div class="dso-login">
                <a href="" class="dso-tertiary">
                    <dso-icon icon="user"></dso-icon><span>Inloggen</span>
                </a>
            </div>
        </div>
    </div>
    <nav class="dso-navbar">

        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle dso-secondary" aria-expanded="false">
                <dso-icon icon="bars"></dso-icon>
                <span class="sr-only">Menu</span>
            </button>
        </div>

        <ul class="dso-nav dso-nav-main">
            <li>
                <a href="#">
                    Home
                </a>
            </li>
            <li>
                <a href="#">
                    Vergunningcheck
                </a>
            </li>
            <li>
                <a href="#">
                    Aanvragen
                </a>
            </li>
            <li>
                <a href="#">
                    Regels op de kaart
                </a>
            </li>
            <li class="dso-active">
                <a href="#" aria-current="page">
                    Mijn Omgevingsloket
                </a>
            </li>
        </ul>
    </nav>

</header>
<main>
    <div class="row">
        <div class="col-md-12">
            <div class="dso-button-row">
                <a href="#" class="dso-tertiary">
                    <dso-icon icon="chevron-left"></dso-icon><span>Naar project overzicht</span>
                </a>

            </div>
            <div class="dso-app-heading">

                <h1>Boom kappen in de achtertuin</h1>

                <h2>
                    Boom kappen in de achtertuin 1

                </h2>

            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="dso-button-row">
                <button type="button" class="dso-secondary">
                    <dso-icon icon="pencil"></dso-icon><span>Aanvullen</span>
                </button>

                <button type="button" class="dso-secondary">
                    <dso-icon icon="undo"></dso-icon><span>Intrekken</span>
                </button>

                <button type="button" class="dso-secondary">
                    <dso-icon icon="trash"></dso-icon><span>Verwijderen</span>
                </button>

            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <dl>

                <dt>Ingediend bij:</dt>
                <dd><strong>Gemeente Den Haag</strong></dd>
                <dt>Behandeld door:</dt>
                <dd><strong>Omgevingsdienst Haaglanden</strong></dd>
                <dt>Soort:</dt>
                <dd>Aanvraag vergunning</dd>
                <dt>Locatie:</dt>
                <dd>Laan van Eik en Duinen 125, 2564GX 's-Gravenhage</dd>
                <dt>Activiteit(en):</dt>
                <dd>Milieubelastende activiteit - vergunning</dd>
                <dd>Kappen van een boom - vergunning</dd>
                <dt>Doel:</dt>
                <dd>Definitief</dd>
                <dt>Status:</dt>
                <dd>Aangevuld</dd>
                <dt>Verzoek hulpnummer(s):</dt>
                <dd>20220101 00201 002 - 02-01-2022</dd>
                <dd>20220101 00201 002 - 02-01-2022</dd>
                <dd>20220101 00201 002 - 02-01-2022</dd>
            </dl>

        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <div class="dso-button-row">
                <button type="button" class="dso-secondary">
                    <dso-icon icon="download"></dso-icon><span>Download verzoek als PDF</span>
                </button>

            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <hr>
            <h3>Bijlagen</h3>
            <div class="dso-button-row">
                <button type="button" class="dso-secondary">
                    <dso-icon icon="download"></dso-icon><span>Download alle bijlagen</span>
                </button>

            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table dso-table-responsive">
                <caption class="sr-only">Overzicht van gebruikersnamen</caption>
                <thead>
                    <tr>
                        <th scope="col" class="col-xs-7">Bestandsnaam</th>
                        <th scope="col" class="col-xs-3">Vertrouwelijk</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">
                            <a href="#" class="dso-tertiary">
                                <dso-icon icon="download"></dso-icon><span>Brief opzichter de koning.doc</span>
                            </a>

                        </th>
                        <td>
                            Ja
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">
                            <a href="#" class="dso-tertiary">
                                <dso-icon icon="download"></dso-icon><span>Boom-23.jpg</span>
                            </a>

                        </th>
                        <td>
                            Nee
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">
                            <a href="#" class="dso-tertiary">
                                <dso-icon icon="download"></dso-icon><span>Straat-overzicht-boom23.jpg</span>
                            </a>

                        </th>
                        <td>
                            Nee
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">
                            <a href="#" class="dso-tertiary">
                                <dso-icon icon="download"></dso-icon><span>Brochure-gemeente-Den-Haag.pdf</span>
                            </a>

                        </th>
                        <td>
                            Ja
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="dso-button-row">
                <a href="#" class="dso-tertiary">
                    <dso-icon icon="chevron-left"></dso-icon><span>Naar project overzicht</span>
                </a>

            </div>
        </div>
    </div>
</main>
<footer>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <h2>Basic link</h2>
            <ul class="dso-link-list">
                <li><a href="#">Normale link</a></li>
                <li><a href="#">Test link</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Externe links</h2>
            <ul class="dso-link-list">
                <li><a href="#" class="extern">Externe link</a></li>
                <li><a href="#" class="extern">Extra externe link</a></li>
                <li><a href="#" class="extern">Laatste externe link</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Tekst paragraaf</h2>
            <p>
                Loop goed na welke inhoud essentieel is voor de footer. Creeër met ros en cols de gewenste indeling van uw footer.
            </p>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Combinatie links en tekst</h2>
            <p>
                Tekst kan worden gevolgd door verscheidene <a href="#">links</a>.
            </p>
            <ul class="dso-link-list">
                <li><a href="#">Combinatie link</a></li>
                <li><a href="#">Combinatie link 2</a></li>
            </ul>
        </div>
    </div>
</footer>

{% render '@header', {menu: menu, breadcrumbs: []} -%}
<main>
  <div class="row">
    <div class="col-md-12">
      <div class="dso-button-row">
        {% render '@anchor', {modifier: 'dso-tertiary', label: 'Naar project overzicht', url: '#', icon: 'chevron-left'} %}
      </div>
      {% render '@application-heading', appheading -%}
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="dso-button-row">
        {% render '@button', {label:'Aanvullen', type:'button', modifier:'dso-secondary', icon:'pencil'} %}
        {% render '@button', {label:'Intrekken', type:'button', modifier:'dso-secondary', icon:'undo'} %}
        {% render '@button', {label:'Verwijderen', type:'button', modifier:'dso-secondary', icon:'trash'} %}
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-sm-12">
      {% render '@definition-list', {definitions: definitions} %}
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-sm-12">
      <div class="dso-button-row">
        {% render '@button', {label:'Download verzoek als PDF', type:'button', modifier:'dso-secondary', icon:'download'} %}
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <hr>
      <h3>Bijlagen</h3>
      <div class="dso-button-row">
        {% render '@button', {label:'Download alle bijlagen', type:'button', modifier:'dso-secondary', icon:'download'} %}
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <table class="table dso-table-responsive">
        <caption class="sr-only">Overzicht van gebruikersnamen</caption>
        <thead>
          <tr>
            <th scope="col" class="col-xs-7">Bestandsnaam</th>
            <th scope="col" class="col-xs-3">Vertrouwelijk</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">
              {% render '@anchor', {modifier: 'dso-tertiary', label: 'Brief opzichter de koning.doc', url: '#', icon: 'download'} %}
            </th>
            <td>
              Ja
            </td>
          </tr>
          <tr>
            <th scope="row">
              {% render '@anchor', {modifier: 'dso-tertiary', label: 'Boom-23.jpg', url: '#', icon: 'download'} %}
            </th>
            <td>
              Nee
            </td>
          </tr>
          <tr>
            <th scope="row">
              {% render '@anchor', {modifier: 'dso-tertiary', label: 'Straat-overzicht-boom23.jpg', url: '#', icon: 'download'} %}
            </th>
            <td>
              Nee
            </td>
          </tr>
          <tr>
            <th scope="row">
              {% render '@anchor', {modifier: 'dso-tertiary', label: 'Brochure-gemeente-Den-Haag.pdf', url: '#', icon: 'download'} %}
            </th>
            <td>
              Ja
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="dso-button-row">
        {% render '@anchor', {modifier: 'dso-tertiary', label: 'Naar project overzicht', url: '#', icon: 'chevron-left'} %}
      </div>
    </div>
  </div>
</main>
{% render '@footer' %}

menu:
  modifier: main
  items:
    - label: Home
    - label: Vergunningcheck
    - label: Aanvragen
    - label: Regels op de kaart
    - label: Mijn Omgevingsloket
      active: true
appheading:
  title: Boom kappen in de achtertuin
  subtitle: Boom kappen in de achtertuin 1
definitions:
  - term: Ingediend bij
    descriptions:
      - description: <strong>Gemeente Den Haag</strong>
  - term: Behandeld door
    descriptions:
      - description: <strong>Omgevingsdienst Haaglanden</strong>
  - term: Soort
    descriptions:
      - description: Aanvraag vergunning
  - term: Locatie
    descriptions:
      - description: Laan van Eik en Duinen 125, 2564GX 's-Gravenhage
  - term: Activiteit(en)
    descriptions:
      - description: Milieubelastende activiteit - vergunning
      - description: Kappen van een boom - vergunning
  - term: Doel
    descriptions:
      - description: Definitief
  - term: Status
    descriptions:
      - description: Aangevuld
  - term: Verzoek hulpnummer(s)
    descriptions:
      - description: 20220101 00201 002 - 02-01-2022
      - description: 20220101 00201 002 - 02-01-2022
      - description: 20220101 00201 002 - 02-01-2022