Foehn Design System

Example List 

<form class="mb-4">
    <legend>Recherche dans le registre des avocats</legend>

    <div class="mb-3">
        <label for="name">Nom</label>
        <input class="form-control" type="text" id="name" name="name" value="">
    </div>

    <div class="mb-3">
        <label for="category">Catégorie</label>
        <select class="form-control" id="category">
            <option value="">Toutes</option>
            <option value="Avocat Union européenne">Avocat Union européenne</option>
            <option value="Avocat stagiaire">Avocat stagiaire</option>
            <option value="Avocat vaudois">Avocat vaudois</option>
            <option value="Avocat-conseil">Avocat-conseil</option>
        </select>
    </div>
    <div class="mb-3">
        <label for="municipality" id="municipality_label">Commune</label>
        <datalist id="municipalities">
            <select id="municipality" class="form-control">
                <option value="">Toutes</option>
                <option value="Aigle">Aigle</option>
                <option value="Assens">Assens</option>
                <option value="Belmont-Lausanne">Belmont-Lausanne</option>
                <option value="Bex">Bex</option>
                <option value="Bussigny">Bussigny</option>
                <option value="Chamblon">Chamblon</option>
                <option value="Chavannes-des-Bois">Chavannes-des-Bois</option>
                <option value="Chesières">Chesières</option>
                <option value="Château-d'Oex">Château-d'Oex</option>
                <option value="Clarens">Clarens</option>
                <option value="Corcelles-le-Jorat">Corcelles-le-Jorat</option>
                <option value="Cossonay-Ville">Cossonay-Ville</option>
                <option value="Crans-près-Céligny">Crans-près-Céligny</option>
                <option value="Crissier">Crissier</option>
                <option value="Cully">Cully</option>
                <option value="Dully">Dully</option>
                <option value="Epalinges">Epalinges</option>
                <option value="Etoy">Etoy</option>
                <option value="Genève">Genève</option>
                <option value="Gland">Gland</option>
                <option value="Jongny">Jongny</option>
                <option value="Küsnacht ZH">Küsnacht ZH</option>
                <option value="La Conversion">La Conversion</option>
                <option value="La Croix (Lutry)">La Croix (Lutry)</option>
                <option value="La Tour-de-Peilz">La Tour-de-Peilz</option>
                <option value="Lausanne">Lausanne</option>
                <option value="Locarno">Locarno</option>
                <option value="Lucens">Lucens</option>
                <option value="Lutry">Lutry</option>
                <option value="Martigny">Martigny</option>
                <option value="Mies">Mies</option>
                <option value="Monthey">Monthey</option>
                <option value="Montreux">Montreux</option>
                <option value="Morges">Morges</option>
                <option value="Moudon">Moudon</option>
                <option value="Nyon">Nyon</option>
                <option value="Oron-la-Ville">Oron-la-Ville</option>
                <option value="Payerne">Payerne</option>
                <option value="Prilly">Prilly</option>
                <option value="Préverenges">Préverenges</option>
                <option value="Pully">Pully</option>
                <option value="Renens VD">Renens VD</option>
                <option value="Rolle">Rolle</option>
                <option value="Sion">Sion</option>
                <option value="St-Légier-Chiésaz">St-Légier-Chiésaz</option>
                <option value="St-Prex">St-Prex</option>
                <option value="St-Sulpice VD">St-Sulpice VD</option>
                <option value="Tannay">Tannay</option>
                <option value="Vevey">Vevey</option>
                <option value="Villars-sur-Ollon">Villars-sur-Ollon</option>
                <option value="Villeneuve VD">Villeneuve VD</option>
                <option value="Yens">Yens</option>
                <option value="Yverdon-les-Bains">Yverdon-les-Bains</option>
            </select>
        </datalist>
        <input id="municipality" name="municipality" list="municipalities" class="form-control">
    </div>

    <div class="mb-3">
        <button type="submit" class="btn btn-dark">Envoyer</button>
    </div>

</form>

<h2 class="mb-3">97 résultats trouvés</h2>

<div vocab="http://schema.org/" typeof="Person">
    <h3 property="name">Brendan Quigley</h3>
    <p class="h4" property="jobTitle">Principal Marketing Manager</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">948 Bernhard Parkway 1</span><br>
                Case postale <span property="postOfficeBoxNumber">801</span><br>
                <span property="postalCode">1001</span> <span property="addressLocality">South Aiyanaborough</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="visually-hidden" title="Téléphone">Téléphone</span>
                    <a href="tel:+41211234567" property="telephone">+41 21 123 45 67</a>
                </li>
                <li>
                    <span class="fas fa-fax" aria-hidden="true"></span>
                    <span class="visually-hidden">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="visually-hidden">Courriel</span>
                    <a href="mailto:" property="email">Maryse.Purdy34@yahoo.com</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <dl class="row">
                <dt class="col-md-6">Titre</dt>
                <dd class="col-md-6">Product Marketing Analyst</dd>

                <dt class="col-md-6">Inscription au registre</dt>
                <dd class="col-md-6">29.12.2016</dd>

                <dt class="col-md-6">Assermentation</dt>
                <dd class="col-md-6">29.12.2016</dd>
            </dl>
        </div>
    </div>

</div>

<div vocab="http://schema.org/" typeof="Person">
    <h3 property="name">Latoya Schmitt</h3>
    <p class="h4" property="jobTitle">Corporate Markets Executive</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">93159 The Ridgeway 2</span><br>
                Case postale <span property="postOfficeBoxNumber">802</span><br>
                <span property="postalCode">1002</span> <span property="addressLocality">Odessafort</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="visually-hidden" title="Téléphone">Téléphone</span>
                    <a href="tel:+41211234567" property="telephone">+41 21 123 45 67</a>
                </li>
                <li>
                    <span class="fas fa-fax" aria-hidden="true"></span>
                    <span class="visually-hidden">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="visually-hidden">Courriel</span>
                    <a href="mailto:" property="email">Jena80@hotmail.com</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <dl class="row">
                <dt class="col-md-6">Titre</dt>
                <dd class="col-md-6">International Configuration Analyst</dd>

                <dt class="col-md-6">Inscription au registre</dt>
                <dd class="col-md-6">29.12.2016</dd>

                <dt class="col-md-6">Assermentation</dt>
                <dd class="col-md-6">29.12.2016</dd>
            </dl>
        </div>
    </div>

</div>

<div vocab="http://schema.org/" typeof="Person">
    <h3 property="name">Mark Deckow DVM</h3>
    <p class="h4" property="jobTitle">Dynamic Functionality Architect</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">291 Airport Road 3</span><br>
                Case postale <span property="postOfficeBoxNumber">803</span><br>
                <span property="postalCode">1003</span> <span property="addressLocality">Fort Michele</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="visually-hidden" title="Téléphone">Téléphone</span>
                    <a href="tel:+41211234567" property="telephone">+41 21 123 45 67</a>
                </li>
                <li>
                    <span class="fas fa-fax" aria-hidden="true"></span>
                    <span class="visually-hidden">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="visually-hidden">Courriel</span>
                    <a href="mailto:" property="email">Anya_Hane95@yahoo.com</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <dl class="row">
                <dt class="col-md-6">Titre</dt>
                <dd class="col-md-6">Product Creative Orchestrator</dd>

                <dt class="col-md-6">Inscription au registre</dt>
                <dd class="col-md-6">29.12.2016</dd>

                <dt class="col-md-6">Assermentation</dt>
                <dd class="col-md-6">29.12.2016</dd>
            </dl>
        </div>
    </div>

</div>

<div vocab="http://schema.org/" typeof="Person">
    <h3 property="name">Ms. Elena Bailey</h3>
    <p class="h4" property="jobTitle">Central Response Technician</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">813 S Jefferson Street 4</span><br>
                Case postale <span property="postOfficeBoxNumber">804</span><br>
                <span property="postalCode">1004</span> <span property="addressLocality">Port Beverlytown</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="visually-hidden" title="Téléphone">Téléphone</span>
                    <a href="tel:+41211234567" property="telephone">+41 21 123 45 67</a>
                </li>
                <li>
                    <span class="fas fa-fax" aria-hidden="true"></span>
                    <span class="visually-hidden">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="visually-hidden">Courriel</span>
                    <a href="mailto:" property="email">Destinee_Marvin31@gmail.com</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <dl class="row">
                <dt class="col-md-6">Titre</dt>
                <dd class="col-md-6">Future Directives Developer</dd>

                <dt class="col-md-6">Inscription au registre</dt>
                <dd class="col-md-6">29.12.2016</dd>

                <dt class="col-md-6">Assermentation</dt>
                <dd class="col-md-6">29.12.2016</dd>
            </dl>
        </div>
    </div>

</div>

<div vocab="http://schema.org/" typeof="Person">
    <h3 property="name">Lena Schumm</h3>
    <p class="h4" property="jobTitle">Direct Usability Designer</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">4049 Old Road 5</span><br>
                Case postale <span property="postOfficeBoxNumber">805</span><br>
                <span property="postalCode">1005</span> <span property="addressLocality">East Markusstad</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="visually-hidden" title="Téléphone">Téléphone</span>
                    <a href="tel:+41211234567" property="telephone">+41 21 123 45 67</a>
                </li>
                <li>
                    <span class="fas fa-fax" aria-hidden="true"></span>
                    <span class="visually-hidden">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="visually-hidden">Courriel</span>
                    <a href="mailto:" property="email">Floyd_Bergnaum@yahoo.com</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <dl class="row">
                <dt class="col-md-6">Titre</dt>
                <dd class="col-md-6">Product Quality Assistant</dd>

                <dt class="col-md-6">Inscription au registre</dt>
                <dd class="col-md-6">29.12.2016</dd>

                <dt class="col-md-6">Assermentation</dt>
                <dd class="col-md-6">29.12.2016</dd>
            </dl>
        </div>
    </div>

</div>

<div vocab="http://schema.org/" typeof="Person">
    <h3 property="name">Gregory Hudson</h3>
    <p class="h4" property="jobTitle">Corporate Functionality Consultant</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">510 Avenue Road 6</span><br>
                Case postale <span property="postOfficeBoxNumber">806</span><br>
                <span property="postalCode">1006</span> <span property="addressLocality">Pfannerstillport</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="visually-hidden" title="Téléphone">Téléphone</span>
                    <a href="tel:+41211234567" property="telephone">+41 21 123 45 67</a>
                </li>
                <li>
                    <span class="fas fa-fax" aria-hidden="true"></span>
                    <span class="visually-hidden">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="visually-hidden">Courriel</span>
                    <a href="mailto:" property="email">Frederick.Jacobi90@gmail.com</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <dl class="row">
                <dt class="col-md-6">Titre</dt>
                <dd class="col-md-6">Principal Configuration Agent</dd>

                <dt class="col-md-6">Inscription au registre</dt>
                <dd class="col-md-6">29.12.2016</dd>

                <dt class="col-md-6">Assermentation</dt>
                <dd class="col-md-6">29.12.2016</dd>
            </dl>
        </div>
    </div>

</div>

<div vocab="http://schema.org/" typeof="Person">
    <h3 property="name">Wilma Willms</h3>
    <p class="h4" property="jobTitle">Regional Intranet Administrator</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">9240 Russel Centers 7</span><br>
                Case postale <span property="postOfficeBoxNumber">807</span><br>
                <span property="postalCode">1007</span> <span property="addressLocality">Schambergerbury</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="visually-hidden" title="Téléphone">Téléphone</span>
                    <a href="tel:+41211234567" property="telephone">+41 21 123 45 67</a>
                </li>
                <li>
                    <span class="fas fa-fax" aria-hidden="true"></span>
                    <span class="visually-hidden">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="visually-hidden">Courriel</span>
                    <a href="mailto:" property="email">Audreanne_Gutmann@yahoo.com</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <dl class="row">
                <dt class="col-md-6">Titre</dt>
                <dd class="col-md-6">Chief Web Engineer</dd>

                <dt class="col-md-6">Inscription au registre</dt>
                <dd class="col-md-6">29.12.2016</dd>

                <dt class="col-md-6">Assermentation</dt>
                <dd class="col-md-6">29.12.2016</dd>
            </dl>
        </div>
    </div>

</div>

<div vocab="http://schema.org/" typeof="Person">
    <h3 property="name">Alberto Hammes</h3>
    <p class="h4" property="jobTitle">Lead Branding Director</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">9111 Hessel Islands 8</span><br>
                Case postale <span property="postOfficeBoxNumber">808</span><br>
                <span property="postalCode">1008</span> <span property="addressLocality">Cleveland Heights</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="visually-hidden" title="Téléphone">Téléphone</span>
                    <a href="tel:+41211234567" property="telephone">+41 21 123 45 67</a>
                </li>
                <li>
                    <span class="fas fa-fax" aria-hidden="true"></span>
                    <span class="visually-hidden">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="visually-hidden">Courriel</span>
                    <a href="mailto:" property="email">Myriam.Christiansen@gmail.com</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <dl class="row">
                <dt class="col-md-6">Titre</dt>
                <dd class="col-md-6">National Brand Developer</dd>

                <dt class="col-md-6">Inscription au registre</dt>
                <dd class="col-md-6">29.12.2016</dd>

                <dt class="col-md-6">Assermentation</dt>
                <dd class="col-md-6">29.12.2016</dd>
            </dl>
        </div>
    </div>

</div>

<div vocab="http://schema.org/" typeof="Person">
    <h3 property="name">Brandon Klein</h3>
    <p class="h4" property="jobTitle">Global Optimization Facilitator</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">25279 Christiansen Parkways 9</span><br>
                Case postale <span property="postOfficeBoxNumber">809</span><br>
                <span property="postalCode">1009</span> <span property="addressLocality">Noeboro</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="visually-hidden" title="Téléphone">Téléphone</span>
                    <a href="tel:+41211234567" property="telephone">+41 21 123 45 67</a>
                </li>
                <li>
                    <span class="fas fa-fax" aria-hidden="true"></span>
                    <span class="visually-hidden">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="visually-hidden">Courriel</span>
                    <a href="mailto:" property="email">Dangelo_Raynor62@yahoo.com</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <dl class="row">
                <dt class="col-md-6">Titre</dt>
                <dd class="col-md-6">Investor Configuration Producer</dd>

                <dt class="col-md-6">Inscription au registre</dt>
                <dd class="col-md-6">29.12.2016</dd>

                <dt class="col-md-6">Assermentation</dt>
                <dd class="col-md-6">29.12.2016</dd>
            </dl>
        </div>
    </div>

</div>

<div vocab="http://schema.org/" typeof="Person">
    <h3 property="name">Jennifer Walker</h3>
    <p class="h4" property="jobTitle">Dynamic Metrics Developer</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">9128 Christophe Centers 10</span><br>
                Case postale <span property="postOfficeBoxNumber">8010</span><br>
                <span property="postalCode">10010</span> <span property="addressLocality">Murlburgh</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="visually-hidden" title="Téléphone">Téléphone</span>
                    <a href="tel:+41211234567" property="telephone">+41 21 123 45 67</a>
                </li>
                <li>
                    <span class="fas fa-fax" aria-hidden="true"></span>
                    <span class="visually-hidden">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="visually-hidden">Courriel</span>
                    <a href="mailto:" property="email">Jermain.Kuhic@hotmail.com</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <dl class="row">
                <dt class="col-md-6">Titre</dt>
                <dd class="col-md-6">Dynamic Markets Officer</dd>

                <dt class="col-md-6">Inscription au registre</dt>
                <dd class="col-md-6">29.12.2016</dd>

                <dt class="col-md-6">Assermentation</dt>
                <dd class="col-md-6">29.12.2016</dd>
            </dl>
        </div>
    </div>

</div>

<nav class="vd-pagination" aria-label="Pagination">
    <ul class="vd-pagination__list">
        <li class="vd-pagination__item vd-pagination__item--previous">
            <a href="#" class="vd-pagination__link">
                <span class="vd-pagination__title">
                    <span class="fas fa-chevron-left" aria-hidden="true"></span>
                    Page précédente
                </span><span class="visually-hidden">:</span>
                <span class="vd-pagination__label">11 sur 244</span></a>
        </li>
        <li class="vd-pagination__item vd-pagination__item--next">
            <a href="#" class="vd-pagination__link">
                <span class="vd-pagination__title">
                    Page suivante
                    <span class="fas fa-chevron-right" aria-hidden="true"></span>
                </span><span class="visually-hidden">:</span>
                <span class="vd-pagination__label">13 sur 244</span></a>
        </li>
    </ul>
</nav>
 
<form class="mb-4">
  <legend>Recherche dans le registre des avocats</legend>

  <div class="mb-3">
    <label for="name">Nom</label>
    <input class="form-control" type="text" id="name" name="name" value="">
  </div>

  <div class="mb-3">
    <label for="category">Catégorie</label>
    <select class="form-control" id="category">
      <option value="">Toutes</option>
      <option value="Avocat Union européenne">Avocat Union européenne</option>
      <option value="Avocat stagiaire">Avocat stagiaire</option>
      <option value="Avocat vaudois">Avocat vaudois</option>
      <option value="Avocat-conseil">Avocat-conseil</option>
    </select>
  </div>
    <div class="mb-3">
    <label for="municipality" id="municipality_label">Commune</label>
    <datalist id="municipalities">
      <select id="municipality" class="form-control">
        <option value="">Toutes</option>
        <option value="Aigle">Aigle</option>
        <option value="Assens">Assens</option>
        <option value="Belmont-Lausanne">Belmont-Lausanne</option>
        <option value="Bex">Bex</option>
        <option value="Bussigny">Bussigny</option>
        <option value="Chamblon">Chamblon</option>
        <option value="Chavannes-des-Bois">Chavannes-des-Bois</option>
        <option value="Chesières">Chesières</option>
        <option value="Château-d'Oex">Château-d'Oex</option>
        <option value="Clarens">Clarens</option>
        <option value="Corcelles-le-Jorat">Corcelles-le-Jorat</option>
        <option value="Cossonay-Ville">Cossonay-Ville</option>
        <option value="Crans-près-Céligny">Crans-près-Céligny</option>
        <option value="Crissier">Crissier</option>
        <option value="Cully">Cully</option>
        <option value="Dully">Dully</option>
        <option value="Epalinges">Epalinges</option>
        <option value="Etoy">Etoy</option>
        <option value="Genève">Genève</option>
        <option value="Gland">Gland</option>
        <option value="Jongny">Jongny</option>
        <option value="Küsnacht ZH">Küsnacht ZH</option>
        <option value="La Conversion">La Conversion</option>
        <option value="La Croix (Lutry)">La Croix (Lutry)</option>
        <option value="La Tour-de-Peilz">La Tour-de-Peilz</option>
        <option value="Lausanne">Lausanne</option>
        <option value="Locarno">Locarno</option>
        <option value="Lucens">Lucens</option>
        <option value="Lutry">Lutry</option>
        <option value="Martigny">Martigny</option>
        <option value="Mies">Mies</option>
        <option value="Monthey">Monthey</option>
        <option value="Montreux">Montreux</option>
        <option value="Morges">Morges</option>
        <option value="Moudon">Moudon</option>
        <option value="Nyon">Nyon</option>
        <option value="Oron-la-Ville">Oron-la-Ville</option>
        <option value="Payerne">Payerne</option>
        <option value="Prilly">Prilly</option>
        <option value="Préverenges">Préverenges</option>
        <option value="Pully">Pully</option>
        <option value="Renens VD">Renens VD</option>
        <option value="Rolle">Rolle</option>
        <option value="Sion">Sion</option>
        <option value="St-Légier-Chiésaz">St-Légier-Chiésaz</option>
        <option value="St-Prex">St-Prex</option>
        <option value="St-Sulpice VD">St-Sulpice VD</option>
        <option value="Tannay">Tannay</option>
        <option value="Vevey">Vevey</option>
        <option value="Villars-sur-Ollon">Villars-sur-Ollon</option>
        <option value="Villeneuve VD">Villeneuve VD</option>
        <option value="Yens">Yens</option>
        <option value="Yverdon-les-Bains">Yverdon-les-Bains</option>
      </select>
    </datalist>
    <input id="municipality" name="municipality" list="municipalities" class="form-control">
  </div>

  <div class="mb-3">
    <button type="submit" class="btn btn-dark">Envoyer</button>
  </div>

</form>

<h2 class="mb-3">97 résultats trouvés</h2>

{% for people in peoples %}
<div vocab="http://schema.org/" typeof="Person">
  <h3 property="name">{{ people.name }}</h3>
  <p class="h4" property="jobTitle">{{ people.jobType }}</p>

  <div class="row">
    <div class="col-md-4">
      <p property="address" typeof="PostalAddress"><span property="streetAddress">{{ people.streetPrefix }} {{ street }} {{ loop.index }}</span><br>
    Case postale <span property="postOfficeBoxNumber">80{{ loop.index }}</span><br>
    <span property="postalCode">100{{ loop.index }}</span> <span property="addressLocality">{{ people.city }}</span></p>
      <ul class="vd-list-icons">
        <li>
          <span class="fas fa-phone" aria-hidden="true"></span>
          <span class="visually-hidden" title="Téléphone">Téléphone</span>
          <a href="tel:+41211234567" property="telephone">+41 21 123 45 67</a>
        </li>
        <li>
          <span class="fas fa-fax" aria-hidden="true"></span>
            <span class="visually-hidden">Fax</span>
            <span>+41 21 123 45 67</span>
        </li>
        <li>
          <span class="fas fa-envelope" aria-hidden="true"></span>
          <span class="visually-hidden">Courriel</span>
          <a href="mailto:{{ people.mail }}" property="email">{{ people.email }}</a>
        </li>
      </ul>
    </div>
    <div class="col-md-8">
      <dl class="row">
        <dt class="col-md-6">Titre</dt>
        <dd class="col-md-6">{{ people.jobTitle }}</dd>

        <dt class="col-md-6">Inscription au registre</dt>
        <dd class="col-md-6">29.12.2016</dd>

        <dt class="col-md-6">Assermentation</dt>
        <dd class="col-md-6">29.12.2016</dd>
      </dl>
    </div>
  </div>

</div>

{% endfor %}

{% render '@pagination' %}
 
{
  "peoples": [
    {
      "name": "Brendan Quigley",
      "email": "Maryse.Purdy34@yahoo.com",
      "jobTitle": "Product Marketing Analyst",
      "jobType": "Principal Marketing Manager",
      "streetPrefix": "948 Bernhard Parkway",
      "street": "Haley Garden",
      "city": "South Aiyanaborough"
    },
    {
      "name": "Latoya Schmitt",
      "email": "Jena80@hotmail.com",
      "jobTitle": "International Configuration Analyst",
      "jobType": "Corporate Markets Executive",
      "streetPrefix": "93159 The Ridgeway",
      "street": "Noemi Flat",
      "city": "Odessafort"
    },
    {
      "name": "Mark Deckow DVM",
      "email": "Anya_Hane95@yahoo.com",
      "jobTitle": "Product Creative Orchestrator",
      "jobType": "Dynamic Functionality Architect",
      "streetPrefix": "291 Airport Road",
      "street": "Forest Road",
      "city": "Fort Michele"
    },
    {
      "name": "Ms. Elena Bailey",
      "email": "Destinee_Marvin31@gmail.com",
      "jobTitle": "Future Directives Developer",
      "jobType": "Central Response Technician",
      "streetPrefix": "813 S Jefferson Street",
      "street": "Greenholt Camp",
      "city": "Port Beverlytown"
    },
    {
      "name": "Lena Schumm",
      "email": "Floyd_Bergnaum@yahoo.com",
      "jobTitle": "Product Quality Assistant",
      "jobType": "Direct Usability Designer",
      "streetPrefix": "4049 Old Road",
      "street": "E Central Avenue",
      "city": "East Markusstad"
    },
    {
      "name": "Gregory Hudson",
      "email": "Frederick.Jacobi90@gmail.com",
      "jobTitle": "Principal Configuration Agent",
      "jobType": "Corporate Functionality Consultant",
      "streetPrefix": "510 Avenue Road",
      "street": "Dora Ferry",
      "city": "Pfannerstillport"
    },
    {
      "name": "Wilma Willms",
      "email": "Audreanne_Gutmann@yahoo.com",
      "jobTitle": "Chief Web Engineer",
      "jobType": "Regional Intranet Administrator",
      "streetPrefix": "9240 Russel Centers",
      "street": "Nader Heights",
      "city": "Schambergerbury"
    },
    {
      "name": "Alberto Hammes",
      "email": "Myriam.Christiansen@gmail.com",
      "jobTitle": "National Brand Developer",
      "jobType": "Lead Branding Director",
      "streetPrefix": "9111 Hessel Islands",
      "street": "Nicholas Crossroad",
      "city": "Cleveland Heights"
    },
    {
      "name": "Brandon Klein",
      "email": "Dangelo_Raynor62@yahoo.com",
      "jobTitle": "Investor Configuration Producer",
      "jobType": "Global Optimization Facilitator",
      "streetPrefix": "25279 Christiansen Parkways",
      "street": "W 5th Street",
      "city": "Noeboro"
    },
    {
      "name": "Jennifer Walker",
      "email": "Jermain.Kuhic@hotmail.com",
      "jobTitle": "Dynamic Markets Officer",
      "jobType": "Dynamic Metrics Developer",
      "streetPrefix": "9128 Christophe Centers",
      "street": "Bartoletti Streets",
      "city": "Murlburgh"
    }
  ]
}

No notes defined.