DSO Toolkit | Component Library

Aanvragen 

<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="btn btn-link"><svg class="di di-user">
                        <use href="../../dso-icons.svg#user" />
                    </svg><span>Inloggen</span></a>
            </div>
        </div>
    </div>
    <nav class="dso-navbar">
        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle">
                <svg class="di di-bars">
                    <use href="../../dso-icons.svg#bars" />
                </svg> <span class="sr-only">Ga naar menu</span>
            </button>
        </div>
        <ul class="dso-nav dso-nav-main">
            <li>
                <a href="#">
                    Home
                </a>
            </li>
            <li>
                <a href="#">
                    Vergunningcheck
                </a>
            </li>
            <li class="dso-active">
                <a href="#">
                    Aanvragen
                </a>
            </li>
            <li>
                <a href="#">
                    Regels op de kaart
                </a>
            </li>
            <li>
                <a href="#">
                    Mijn Omgevingsloket
                </a>
            </li>
        </ul>
    </nav>
    <ol class="breadcrumb">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Aanvragen</a>
        </li>
        <li>
            <a href="#">Mijn project</a>
        </li>
        <li class="active">Aanvraag voorbereiden</li>
    </ol>
</header>
<main>
    <div class="row">
        <div class="col-md-12">
            <h1>Aanvragen</h1>
            <h2 class="dso-steps-indicator">
                3. Activiteiten

                <span class="dso-step">
                    Stap 3/6
                </span>
            </h2>

        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="dso-accordion">
                <div class="dso-accordion-section">
                    <div class="dso-section-handle">
                        <a href="#">Woning</a>
                    </div>
                </div>
                <div class="dso-accordion-section">
                    <div class="dso-section-handle">
                        <a href="#">Bouwwerkzaamheden</a>
                    </div>
                </div>
                <div class="dso-accordion-section dso-open">
                    <div class="dso-section-handle">
                        <a href="#">Plaats van het bouwwerk</a>
                    </div>
                    <div class="dso-section-body">
                        <form>
                            <fieldset class="dso-form-fields">
                                <legend class="sr-only">Aanvraagformulier</legend>
                                <fieldset>
                                    <legend>Plaats van het bouwwerk</legend>
                                    <div class="form-group dso-input dso-input-text">
                                        <div class="dso-label-container">
                                            <label for="omgevingsvergunningPostcode" class="control-label">
                                                Postcode
                                            </label>
                                        </div>
                                        <div class="dso-field-container">
                                            <input type="text" id="omgevingsvergunningPostcode" class="form-control" size="8" />
                                        </div>
                                    </div>
                                    <div class="form-group dso-input dso-input-text">
                                        <div class="dso-label-container">
                                            <label for="omgevingsvergunningHuisnummer" class="control-label">
                                                Huisnummer
                                            </label>
                                        </div>
                                        <div class="dso-field-container">
                                            <input type="text" id="omgevingsvergunningHuisnummer" class="form-control" size="8" />
                                        </div>
                                    </div>
                                    <div class="form-group dso-input dso-input-text">
                                        <div class="dso-label-container">
                                            <label for="omgevingsvergunningToevoeging" class="control-label">
                                                Huisnummer toevoeging
                                            </label>
                                        </div>
                                        <div class="dso-field-container">
                                            <input type="text" id="omgevingsvergunningToevoeging" class="form-control" size="8" />
                                        </div>
                                    </div>
                                    <div class="form-group dso-input dso-input-text">
                                        <div class="dso-label-container">
                                            <label for="omgevingsvergunningStraatnaam" class="control-label">
                                                Straatnaam
                                            </label>
                                        </div>
                                        <div class="dso-field-container">
                                            <input type="text" id="omgevingsvergunningStraatnaam" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="form-group dso-input dso-input-text">
                                        <div class="dso-label-container">
                                            <label for="omgevingsvergunningWoonplaats" class="control-label">
                                                Woonplaats
                                            </label>
                                        </div>
                                        <div class="dso-field-container">
                                            <input type="text" id="omgevingsvergunningWoonplaats" class="form-control" />
                                        </div>
                                    </div>
                                </fieldset>
                            </fieldset>
                            <div class="dso-form-buttons">
                                <button type="submit" class="btn btn-primary">
                                    <span>Volgende stap</span>
                                </button>
                            </div>
                        </form>

                    </div>
                </div>
                <div class="dso-accordion-section">
                    <div class="dso-section-handle">
                        <a href="#">Afmetingen van het bouwwerk</a>
                    </div>
                </div>
                <div class="dso-accordion-section">
                    <div class="dso-section-handle">
                        <a href="#">Extra werkzaamheden</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-push-3 col-md-offset-6">
            <button type="button" class="btn btn-primary pull-right">
                <span>Volgende stap</span>
            </button>
        </div>
        <div class="col-md-3 col-md-pull-9">
            <button type="button" class="btn btn-default">
                <span>Vorige stap</span>
            </button>
        </div>
    </div>
</main>
<footer>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <h2>Service</h2>
            <ul>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Sitemap</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Over deze site</h2>
            <ul>
                <li><a href="#">Copyright</a></li>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Cookies</a></li>
                <li><a href="#">Toegankelijkheid</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Volg ons ook op</h2>
            <ul>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">LinkedIn</a></li>
            </ul>
        </div>
    </div>
</footer>
 
{{> '@header' }}
<main>
  <div class="row">
    <div class="col-md-12">
      <h1>Aanvragen</h1>
      {{render '@steps'}}
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      {{#accordion}}
        {{#each sections }}
          {{#accordionSection title }}
            {{> '@form' }}
          {{/accordionSection}}
        {{/each}}
      {{/accordion}}
    </div>     
  </div>
  <div class="row">
    <div class="col-md-3 col-md-push-3 col-md-offset-6">
      {{> '@button' label='Volgende stap' type='button' modifier='primary pull-right'}}
    </div>
    <div class="col-md-3 col-md-pull-9">
      {{> '@button' label='Vorige stap' type='button' modifier='default'}}
    </div>
  </div>
</main>
{{render '@footer' }}
 
menu:
  modifier: main
  items:
    - label: Home
    - label: Vergunningcheck
    - label: Aanvragen
      active: true
    - label: Regels op de kaart
    - label: Mijn Omgevingsloket
breadcrumbs:
  crumbs:
    - label: Home
      url: '#'
    - label: Aanvragen
      url: '#'
    - label: Mijn project
      url: '#'
    - label: Aanvraag voorbereiden
      url: '#'
sections:
  - title: Woning
    id: panel1
  - title: Bouwwerkzaamheden
    id: panel2
  - title: Plaats van het bouwwerk
    id: panel3
    open: true
    formLegend: Aanvraagformulier
    fieldsets:
      - legend: Plaats van het bouwwerk
        groups:
          - id: omgevingsvergunningPostcode
            inputType: input
            type: text
            label: Postcode
            size: 8
          - id: omgevingsvergunningHuisnummer
            inputType: input
            type: text
            label: Huisnummer
            size: 8
          - id: omgevingsvergunningToevoeging
            inputType: input
            type: text
            label: Huisnummer toevoeging
            size: 8
          - id: omgevingsvergunningStraatnaam
            inputType: input
            type: text
            label: Straatnaam
          - id: omgevingsvergunningWoonplaats
            inputType: input
            type: text
            label: Woonplaats
    submitButton:
      type: submit
      modifier: primary
      label: Volgende stap
  - title: Afmetingen van het bouwwerk
    id: panel4
  - title: Extra werkzaamheden
    id: panel5

There are no notes for this item.