DSO Toolkit homepage

Project

Component preview opent in nieuw tabblad

There are no notes for this item.

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

        <h1>Aanvragen</h1>

        <h2 class="dso-steps-indicator">
            1. Project

            <span class="dso-step">
                Stap 1/7
            </span>

        </h2>

    </div>

    <dso-alert status="info">
        Hulp nodig bij kiezen? Doe dan eerst de <a href="#">Vergunningscheck</a>.
    </dso-alert>

    <form class="form-horizontal">

        <fieldset>
            <legend>Project</legend>

            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="form-horizontal-naam project" class="control-label">
                        Wat is de naam van uw project?
                    </label>

                </div>
                <div class="dso-field-container">

                    <input type="text" id="form-horizontal-naam project" class="form-control">

                </div>

            </div>

            <div class="form-group dso-textarea">
                <div class="dso-label-container">
                    <label for="form-horizontal-beschrijving project" class="control-label">
                        Korte omschrijving van uw project
                    </label>

                </div>
                <div class="dso-field-container">
                    <textarea class="form-control" id="form-horizontal-beschrijving project"></textarea>

                </div>

            </div>

            <div class="form-group dso-textarea">
                <div class="dso-label-container">
                    <label for="form-horizontal-kosten project" class="control-label">
                        Wat zijn de kosten van uw project?
                    </label>

                </div>
                <div class="dso-field-container">
                    <textarea class="form-control" id="form-horizontal-kosten project"></textarea>

                </div>

            </div>

        </fieldset>

        <div class="dso-form-buttons">

            <button type="submit" class="btn btn-primary"><span>Volgende stap</span>
                <dso-icon icon="chevron-right"></dso-icon>
            </button>

        </div>

    </form>

</main>
<main>
  {% render '@application-heading', appheading %}
  <dso-alert status="{{ alert.status }}">
    {{ alert.message | safe }}
  </dso-alert>
  {% render '@form', form %}
</main>
menu:
  modifier: main
  items:
    - label: Home
    - label: Vergunningcheck
    - label: Aanvragen
      active: true
    - label: Regels op de kaart
    - label: Mijn Omgevingsloket
appheading:
  title: Aanvragen
  subtitle: 1. Project
  step: Stap 1/7
alert:
  status: info
  message: Hulp nodig bij kiezen? Doe dan eerst de <a href="#">Vergunningscheck</a>.
form:
  formModifier: form-horizontal
  fieldsets:
    - legend: Project
      groups:
        - id: naam project
          inputType: input
          type: text
          label: Wat is de naam van uw project?
        - id: beschrijving project
          inputType: textarea
          type: text
          label: Korte omschrijving van uw project
        - id: kosten project
          inputType: textarea
          type: text
          label: Wat zijn de kosten van uw project?
  buttons:
    - type: submit
      modifier: primary
      label: Volgende stap
      iconAfter: chevron-right