Foehn Design System

Example List 

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

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

    <div class="form-group">
        <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="form-group">
        <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="form-group">
        <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">Falba Roger</h3>
    <p class="h4" property="jobTitle">b a Producteur</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">Allée 1</span><br>
                Case postale <span property="postOfficeBoxNumber">801</span><br>
                <span property="postalCode">1001</span> <span property="addressLocality">Cholet</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="sr-only" 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="sr-only">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="sr-only">Courriel</span>
                    <a href="mailto:" property="email">Lucas_Benoit@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">a a Manager</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">Arsènie Brunet</h3>
    <p class="h4" property="jobTitle">b b Ingenieur</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">Passage 2</span><br>
                Case postale <span property="postOfficeBoxNumber">802</span><br>
                <span property="postalCode">1002</span> <span property="addressLocality">Anicéeborough</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="sr-only" 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="sr-only">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="sr-only">Courriel</span>
                    <a href="mailto:" property="email">Adraste_Roux70@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">a b Developpeur</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">Lauriane Aubry</h3>
    <p class="h4" property="jobTitle">a a Agent</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">Boulevard 3</span><br>
                Case postale <span property="postOfficeBoxNumber">803</span><br>
                <span property="postalCode">1003</span> <span property="addressLocality">Nantes</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="sr-only" 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="sr-only">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="sr-only">Courriel</span>
                    <a href="mailto:" property="email">Auxence.Prevost38@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">b a Developpeur</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">M Marc Benoit</h3>
    <p class="h4" property="jobTitle">b a Assistant</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">Voie 4</span><br>
                Case postale <span property="postOfficeBoxNumber">804</span><br>
                <span property="postalCode">1004</span> <span property="addressLocality">Blandineberg</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="sr-only" 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="sr-only">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="sr-only">Courriel</span>
                    <a href="mailto:" property="email">Eubert_Brunet@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">c b Ingenieur</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">Aloïse Chevalier</h3>
    <p class="h4" property="jobTitle">b c Technicien</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">Impasse 5</span><br>
                Case postale <span property="postOfficeBoxNumber">805</span><br>
                <span property="postalCode">1005</span> <span property="addressLocality">Levallois-Perret</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="sr-only" 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="sr-only">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="sr-only">Courriel</span>
                    <a href="mailto:" property="email">Coline34@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">c a Stagiaire</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">Dr Clémence Lemaire</h3>
    <p class="h4" property="jobTitle">c a Architecte</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">Impasse 6</span><br>
                Case postale <span property="postOfficeBoxNumber">806</span><br>
                <span property="postalCode">1006</span> <span property="addressLocality">Aulnay-sous-Bois</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="sr-only" 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="sr-only">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="sr-only">Courriel</span>
                    <a href="mailto:" property="email">Ins71@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">c a Directeur</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">Arian Arnaud</h3>
    <p class="h4" property="jobTitle">b b Superviseur</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">Avenue 7</span><br>
                Case postale <span property="postOfficeBoxNumber">807</span><br>
                <span property="postalCode">1007</span> <span property="addressLocality">East Paterneborough</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="sr-only" 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="sr-only">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="sr-only">Courriel</span>
                    <a href="mailto:" property="email">Vivien_Andre75@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">a c Coordinateur</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">Ascension Garnier</h3>
    <p class="h4" property="jobTitle">b c Architecte</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">Avenue 8</span><br>
                Case postale <span property="postOfficeBoxNumber">808</span><br>
                <span property="postalCode">1008</span> <span property="addressLocality">West Xavierside</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="sr-only" 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="sr-only">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="sr-only">Courriel</span>
                    <a href="mailto:" property="email">Raymonde.Thomas@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">b c Developpeur</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">Albert Fontaine</h3>
    <p class="h4" property="jobTitle">c a Architecte</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">Avenue 9</span><br>
                Case postale <span property="postOfficeBoxNumber">809</span><br>
                <span property="postalCode">1009</span> <span property="addressLocality">Lucaston</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="sr-only" 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="sr-only">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="sr-only">Courriel</span>
                    <a href="mailto:" property="email">Camille7@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">b a Architecte</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">Clémence Bernard</h3>
    <p class="h4" property="jobTitle">b b Analyste</p>

    <div class="row">
        <div class="col-md-4">
            <p property="address" typeof="PostalAddress"><span property="streetAddress">Rue 10</span><br>
                Case postale <span property="postOfficeBoxNumber">8010</span><br>
                <span property="postalCode">10010</span> <span property="addressLocality">Lake Irisland</span>
            </p>
            <ul class="vd-list-icons">
                <li>
                    <span class="fas fa-phone" aria-hidden="true"></span>
                    <span class="sr-only" 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="sr-only">Fax</span>
                    <span>+41 21 123 45 67</span>
                </li>
                <li>
                    <span class="fas fa-envelope" aria-hidden="true"></span>
                    <span class="sr-only">Courriel</span>
                    <a href="mailto:" property="email">Xnophon.Fontaine90@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">b c Developpeur</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="sr-only">:</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="sr-only">:</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="form-group">
    <label for="name">Nom</label>
    <input class="form-control" type="text" id="name" name="name" value="">
  </div>

  <div class="form-group">
    <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="form-group">
    <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="form-group">
    <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="sr-only" 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="sr-only">Fax</span>
            <span>+41 21 123 45 67</span>
        </li>
        <li>
          <span class="fas fa-envelope" aria-hidden="true"></span>
          <span class="sr-only">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": "Falba Roger",
      "email": "Lucas_Benoit@gmail.com",
      "jobTitle": "a a Manager",
      "jobType": "b a Producteur",
      "streetPrefix": "Allée",
      "street": "Isabeau d'Argenteuil",
      "city": "Cholet"
    },
    {
      "name": "Arsènie Brunet",
      "email": "Adraste_Roux70@gmail.com",
      "jobTitle": "a b Developpeur",
      "jobType": "b b Ingenieur",
      "streetPrefix": "Passage",
      "street": "Maillard d'Assas",
      "city": "Anicéeborough"
    },
    {
      "name": "Lauriane Aubry",
      "email": "Auxence.Prevost38@hotmail.fr",
      "jobTitle": "b a Developpeur",
      "jobType": "a a Agent",
      "streetPrefix": "Boulevard",
      "street": "Honoré Montorgueil",
      "city": "Nantes"
    },
    {
      "name": "M Marc Benoit",
      "email": "Eubert_Brunet@yahoo.fr",
      "jobTitle": "c b Ingenieur",
      "jobType": "b a Assistant",
      "streetPrefix": "Voie",
      "street": "Bernard de Vaugirard",
      "city": "Blandineberg"
    },
    {
      "name": "Aloïse Chevalier",
      "email": "Coline34@gmail.com",
      "jobTitle": "c a Stagiaire",
      "jobType": "b c Technicien",
      "streetPrefix": "Impasse",
      "street": "Carre Du Sommerard",
      "city": "Levallois-Perret"
    },
    {
      "name": "Dr Clémence Lemaire",
      "email": "Ins71@hotmail.fr",
      "jobTitle": "c a Directeur",
      "jobType": "c a Architecte",
      "streetPrefix": "Impasse",
      "street": "Emmanuel Saint-Jacques",
      "city": "Aulnay-sous-Bois"
    },
    {
      "name": "Arian Arnaud",
      "email": "Vivien_Andre75@hotmail.fr",
      "jobTitle": "a c Coordinateur",
      "jobType": "b b Superviseur",
      "streetPrefix": "Avenue",
      "street": "Berger Adolphe Mille",
      "city": "East Paterneborough"
    },
    {
      "name": "Ascension Garnier",
      "email": "Raymonde.Thomas@hotmail.fr",
      "jobTitle": "b c Developpeur",
      "jobType": "b c Architecte",
      "streetPrefix": "Avenue",
      "street": "Baron de la Chaussée-d'Antin",
      "city": "West Xavierside"
    },
    {
      "name": "Albert Fontaine",
      "email": "Camille7@yahoo.fr",
      "jobTitle": "b a Architecte",
      "jobType": "c a Architecte",
      "streetPrefix": "Avenue",
      "street": "Da silva La Boétie",
      "city": "Lucaston"
    },
    {
      "name": "Clémence Bernard",
      "email": "Xnophon.Fontaine90@hotmail.fr",
      "jobTitle": "b c Developpeur",
      "jobType": "b b Analyste",
      "streetPrefix": "Rue",
      "street": "Baron du Chat-qui-Pêche",
      "city": "Lake Irisland"
    }
  ]
}

No notes defined.