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