Filteren

Wizard Stap 2

There are no notes for this item.

<style>
    .dso-map-example {
    background-image: url("../../dummy/images/google-map-background.jpg"); 
    background-size: cover;
    height: 300px;
    margin: 32px 0; 
    width: 100%;
  }
</style>
<main>
    <h2 class="dso-steps-indicator">
        2. Locatie

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

    <div class="clearfix"></div>
    <div class="dso-search-bar">
        <div class="dso-search-bar-input">

            <label for="search-bar--default">Adres</label>
            <span class="dso-search-icon" aria-hidden="true"></span>

            <input type="text" id="search-bar--default" placeholder="Zoek een adres" />

        </div>
        <button type="button" class="btn btn-default">
            Button
        </button>
    </div>

    <div class="clearfix"></div>
    <div class="dso-map-example"></div>
    <div class="clearfix"></div>
    <div class="dso-form-buttons">
        <button type="button" class="btn btn-default"><svg class="di di-chevron-left">
                <use href="../../dso-icons.svg#chevron-left" />
            </svg><span>Vorige stap</span></button>

        <button type="button" class="btn btn-primary"><span>Volgende stap</span><svg class="di di-chevron-right">
                <use href="../../dso-icons.svg#chevron-right" />
            </svg></button>

    </div>
</main>

<style>
  .dso-map-example {
    background-image: url("{{ '/dummy/images/google-map-background.jpg' | path }}"); 
    background-size: cover;
    height: 300px;
    margin: 32px 0; 
    width: 100%;
  }
</style>
<main>
  {% render '@form-steps', steps %}
  <div class="clearfix"></div>
  {% render '@search-bar', filter %}
  <div class="clearfix"></div>
  <div class="dso-map-example"></div>
  <div class="clearfix"></div>
  <div class="dso-form-buttons">
    {% render '@button', {type: 'button', modifier: 'default', label: 'Vorige stap', icon: 'chevron-left'} %}
    {% render '@button', {type: 'button', modifier: 'primary', label: 'Volgende stap', iconAfter: 'chevron-right'} %}
  </div>  
</main>

steps:
  title: 2. Locatie
  step: Stap 1/7
filter:
  placeholder: Zoek een adres
  icon: true
  label: Adres