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">Prof Lothaire Dupuis</h3>
    <p class="h4" property="jobTitle">Technicien des directives interne</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">5815 Quai des Lombards 1</span><br>
                Case postale <span property="postOfficeBoxNumber">801</span><br>
                <span property="postalCode">1001</span> <span property="addressLocality">Courbevoie</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">Gerbert0@hotmail.fr</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <dl class="row">
                <dt class="col-md-6">Titre</dt>
                <dd class="col-md-6">Specialiste des fonctionnalités mondial</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">Archibald Barbier</h3>
    <p class="h4" property="jobTitle">Specialiste de division direct</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">19 Place Saint-Denis 2</span><br>
                Case postale <span property="postOfficeBoxNumber">802</span><br>
                <span property="postalCode">1002</span> <span property="addressLocality">Béziers</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">Gertrude61@hotmail.fr</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <dl class="row">
                <dt class="col-md-6">Titre</dt>
                <dd class="col-md-6">Analyste de la mobilité interne</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">Coraline Boyer</h3>
    <p class="h4" property="jobTitle">Developpeur des comptes futur</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">6575 Place des Grands Augustins 3</span><br>
                Case postale <span property="postOfficeBoxNumber">803</span><br>
                <span property="postalCode">1003</span> <span property="addressLocality">Drancy</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">Aymon_Charles@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">Superviseur des données central</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">Robert Da silva</h3>
    <p class="h4" property="jobTitle">Coordinateur du web central</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">52 Voie Vaneau 4</span><br>
                Case postale <span property="postOfficeBoxNumber">804</span><br>
                <span property="postalCode">1004</span> <span property="addressLocality">Cergy</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">Colin94@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">Administrateur des marchés international</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">Ameline Petit</h3>
    <p class="h4" property="jobTitle">Developpeur des facteurs principal</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">2919 Passage des Francs-Bourgeois 5</span><br>
                Case postale <span property="postOfficeBoxNumber">805</span><br>
                <span property="postalCode">1005</span> <span property="addressLocality">Brest</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">Merlin_Fontaine@yahoo.fr</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <dl class="row">
                <dt class="col-md-6">Titre</dt>
                <dd class="col-md-6">Ingenieur des fonctionnalités international</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">Conception Le roux</h3>
    <p class="h4" property="jobTitle">Assistant du web futur</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">59 Avenue Joubert 6</span><br>
                Case postale <span property="postOfficeBoxNumber">806</span><br>
                <span property="postalCode">1006</span> <span property="addressLocality">Versailles</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">Gatien_Schmitt@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">Agent du marketing humain</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">Angélina Le gall</h3>
    <p class="h4" property="jobTitle">Producteur des données humain</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">9 Voie d&#39;Argenteuil 7</span><br>
                Case postale <span property="postOfficeBoxNumber">807</span><br>
                <span property="postalCode">1007</span> <span property="addressLocality">Amiens</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">Guillemette63@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">Ingenieur des directives direct</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">Sigebert Giraud</h3>
    <p class="h4" property="jobTitle">Ingenieur de la marque mondial</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">7 Voie Du Sommerard 8</span><br>
                Case postale <span property="postOfficeBoxNumber">808</span><br>
                <span property="postalCode">1008</span> <span property="addressLocality">Tours</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">Violette56@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">Consultant des interactions futur</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">Ulysse Noel</h3>
    <p class="h4" property="jobTitle">Developpeur de la communication principal</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">104 Allée Mouffetard 9</span><br>
                Case postale <span property="postOfficeBoxNumber">809</span><br>
                <span property="postalCode">1009</span> <span property="addressLocality">Toulouse</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">Azelie_Pierre@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">Designer des métriques humain</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">Aquiline Martin</h3>
    <p class="h4" property="jobTitle">Manager des applications interne</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">5 Quai des Lombards 10</span><br>
                Case postale <span property="postOfficeBoxNumber">8010</span><br>
                <span property="postalCode">10010</span> <span property="addressLocality">Strasbourg</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">Hincmar.Perez@hotmail.fr</a>
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <dl class="row">
                <dt class="col-md-6">Titre</dt>
                <dd class="col-md-6">Coordinateur des infrastructures principal</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": "Prof Lothaire Dupuis",
      "email": "Gerbert0@hotmail.fr",
      "jobTitle": "Specialiste des fonctionnalités mondial",
      "jobType": "Technicien des directives interne",
      "streetPrefix": "5815 Quai des Lombards",
      "street": "Quai de la Huchette",
      "city": "Courbevoie"
    },
    {
      "name": "Archibald Barbier",
      "email": "Gertrude61@hotmail.fr",
      "jobTitle": "Analyste de la mobilité interne",
      "jobType": "Specialiste de division direct",
      "streetPrefix": "19 Place Saint-Denis",
      "street": "Boulevard Saint-Jacques",
      "city": "Béziers"
    },
    {
      "name": "Coraline Boyer",
      "email": "Aymon_Charles@gmail.com",
      "jobTitle": "Superviseur des données central",
      "jobType": "Developpeur des comptes futur",
      "streetPrefix": "6575 Place des Grands Augustins",
      "street": "Quai de Paris",
      "city": "Drancy"
    },
    {
      "name": "Robert Da silva",
      "email": "Colin94@gmail.com",
      "jobTitle": "Administrateur des marchés international",
      "jobType": "Coordinateur du web central",
      "streetPrefix": "52 Voie Vaneau",
      "street": "Place de Solférino",
      "city": "Cergy"
    },
    {
      "name": "Ameline Petit",
      "email": "Merlin_Fontaine@yahoo.fr",
      "jobTitle": "Ingenieur des fonctionnalités international",
      "jobType": "Developpeur des facteurs principal",
      "streetPrefix": "2919 Passage des Francs-Bourgeois",
      "street": "Avenue Du Sommerard",
      "city": "Brest"
    },
    {
      "name": "Conception Le roux",
      "email": "Gatien_Schmitt@gmail.com",
      "jobTitle": "Agent du marketing humain",
      "jobType": "Assistant du web futur",
      "streetPrefix": "59 Avenue Joubert",
      "street": "Passage Mouffetard",
      "city": "Versailles"
    },
    {
      "name": "Angélina Le gall",
      "email": "Guillemette63@gmail.com",
      "jobTitle": "Ingenieur des directives direct",
      "jobType": "Producteur des données humain",
      "streetPrefix": "9 Voie d'Argenteuil",
      "street": "Rue de Richelieu",
      "city": "Amiens"
    },
    {
      "name": "Sigebert Giraud",
      "email": "Violette56@gmail.com",
      "jobTitle": "Consultant des interactions futur",
      "jobType": "Ingenieur de la marque mondial",
      "streetPrefix": "7 Voie Du Sommerard",
      "street": "Place Saint-Séverin",
      "city": "Tours"
    },
    {
      "name": "Ulysse Noel",
      "email": "Azelie_Pierre@gmail.com",
      "jobTitle": "Designer des métriques humain",
      "jobType": "Developpeur de la communication principal",
      "streetPrefix": "104 Allée Mouffetard",
      "street": "Boulevard de l'Abbaye",
      "city": "Toulouse"
    },
    {
      "name": "Aquiline Martin",
      "email": "Hincmar.Perez@hotmail.fr",
      "jobTitle": "Coordinateur des infrastructures principal",
      "jobType": "Manager des applications interne",
      "streetPrefix": "5 Quai des Lombards",
      "street": "Place de Rivoli",
      "city": "Strasbourg"
    }
  ]
}

No notes defined.