Foehn Design System

Filter List 

<form class="mb-3">
    <legend>Rechercher une institution</legend>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="name">Nom</label>

                <input class="form-control" type="text" id="name" name="testInput" value="" required aria-required="true">
            </div>

        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="exampleSelect1">Clientèle</label>
                <select class="form-control" id="cutomer">
                    <option>Curabitur</option>
                    <option>Maecenas vel</option>
                    <option>Suspendisse maximus velit non lacus</option>
                    <option>Sed maximus gohjyt</option>
                    <option>Aliquam cupiditate, vel!</option>
                    <option>Nunc eget neque sit amet ipsum auctor laoreet</option>
                </select>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="exampleSelect1">Région</label>
                <select class="form-control" id="region">
                    <option>Curabitur</option>
                    <option>Maecenas vel</option>
                    <option>Suspendisse maximus velit non lacus</option>
                    <option>Sed maximus gohjyt</option>
                    <option>Aliquam cupiditate, vel!</option>
                    <option>Nunc eget neque sit amet ipsum auctor laoreet</option>
                </select>
            </div>

        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="exampleSelect1">Degré</label>
                <select class="form-control" id="degree">
                    <option>Curabitur</option>
                    <option>Maecenas vel</option>
                    <option>Suspendisse maximus velit non lacus</option>
                    <option>Sed maximus gohjyt</option>
                    <option>Aliquam cupiditate, vel!</option>
                    <option>Nunc eget neque sit amet ipsum auctor laoreet</option>
                </select>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="exampleSelect1">Situation</label>
                <select class="form-control" id="situation">
                    <option>Curabitur</option>
                    <option>Maecenas vel</option>
                    <option>Suspendisse maximus velit non lacus</option>
                    <option>Sed maximus gohjyt</option>
                    <option>Aliquam cupiditate, vel!</option>
                    <option>Nunc eget neque sit amet ipsum auctor laoreet</option>
                </select>
            </div>

        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="exampleSelect1">Situation</label>
                <select class="form-control" id="situation">
                    <option>Curabitur</option>
                    <option>Maecenas vel</option>
                    <option>Suspendisse maximus velit non lacus</option>
                    <option>Sed maximus gohjyt</option>
                    <option>Aliquam cupiditate, vel!</option>
                    <option>Nunc eget neque sit amet ipsum auctor laoreet</option>
                </select>
            </div>

        </div>
    </div>
    <a href="#" title="Rechercher link to somewhere" class="btn btn-dark">Rechercher</a>

    <a href="#" title="Annuler link to somewhere" class="btn btn-secondary">Annuler</a>

</form>

<h2>Ordre de tri</h2>
<ul>
    <li><a href="#">Trier par ordre alphabétique</a></li>
    <li><a href="#">Trier par ordre alphabétique inverse</a></li>
</ul>

<h2>Liste des résultats</h2>

<p>

    11

    résultats trouvés
</p>

<ol class="list-unstyled">

    <li>
        <h3>La Marmotte</h3>
        <dl class="row">
            <dt class="col-md-4">Région</dt>
            <dd class="col-md-8">Lausanne</dd>
            <dt class="col-md-4">Situation</dt>
            <dd class="col-md-8">Violence conjugale, Traite des êtres humains, Situation de précarité</dd>
            <dt class="col-md-4">Clientèle</dt>
            <dd class="col-md-8">Adultes uniquement</dd>
            <dt class="col-md-4">Degré</dt>
            <dd class="col-md-8">Avec rendez-vous</dd>
            <dt class="col-md-4">Offre</dt>
            <dd class="col-md-8">Hébergement, Intervention d'urgence, Information - Prévention - Orientation</dd>
        </dl>
        <p>
            <a href="#">
                Plus de détail<span class="sr-only"> sur La Marmotte</span>
            </a>
        </p>
    </li>

    <li>
        <h3>Armée du Salut - Bureau Social</h3>
        <dl class="row">
            <dt class="col-md-4">Région</dt>
            <dd class="col-md-8">Lausanne</dd>
            <dt class="col-md-4">Situation</dt>
            <dd class="col-md-8">Violence conjugale, Traite des êtres humains, Situation de précarité</dd>
            <dt class="col-md-4">Clientèle</dt>
            <dd class="col-md-8">Adultes uniquement</dd>
            <dt class="col-md-4">Degré</dt>
            <dd class="col-md-8">Avec rendez-vous</dd>
            <dt class="col-md-4">Offre</dt>
            <dd class="col-md-8">Hébergement, Intervention d'urgence, Information - Prévention - Orientation</dd>
        </dl>
        <p>
            <a href="#">
                Plus de détail<span class="sr-only"> sur Armée du Salut - Bureau Social</span>
            </a>
        </p>
    </li>

    <li>
        <h3>CSR Lausanne</h3>
        <dl class="row">
            <dt class="col-md-4">Région</dt>
            <dd class="col-md-8">Lausanne</dd>
            <dt class="col-md-4">Situation</dt>
            <dd class="col-md-8">Violence conjugale, Traite des êtres humains, Situation de précarité</dd>
            <dt class="col-md-4">Clientèle</dt>
            <dd class="col-md-8">Adultes uniquement</dd>
            <dt class="col-md-4">Degré</dt>
            <dd class="col-md-8">Avec rendez-vous</dd>
            <dt class="col-md-4">Offre</dt>
            <dd class="col-md-8">Hébergement, Intervention d'urgence, Information - Prévention - Orientation</dd>
        </dl>
        <p>
            <a href="#">
                Plus de détail<span class="sr-only"> sur CSR Lausanne</span>
            </a>
        </p>
    </li>

    <li>
        <h3>(anciennement Centre Saint-Martin)</h3>
        <dl class="row">
            <dt class="col-md-4">Région</dt>
            <dd class="col-md-8">Lausanne</dd>
            <dt class="col-md-4">Situation</dt>
            <dd class="col-md-8">Violence conjugale, Traite des êtres humains, Situation de précarité</dd>
            <dt class="col-md-4">Clientèle</dt>
            <dd class="col-md-8">Adultes uniquement</dd>
            <dt class="col-md-4">Degré</dt>
            <dd class="col-md-8">Avec rendez-vous</dd>
            <dt class="col-md-4">Offre</dt>
            <dd class="col-md-8">Hébergement, Intervention d'urgence, Information - Prévention - Orientation</dd>
        </dl>
        <p>
            <a href="#">
                Plus de détail<span class="sr-only"> sur (anciennement Centre Saint-Martin)</span>
            </a>
        </p>
    </li>

    <li>
        <h3>Fondation Mère Sofia - Echelle</h3>
        <dl class="row">
            <dt class="col-md-4">Région</dt>
            <dd class="col-md-8">Lausanne</dd>
            <dt class="col-md-4">Situation</dt>
            <dd class="col-md-8">Violence conjugale, Traite des êtres humains, Situation de précarité</dd>
            <dt class="col-md-4">Clientèle</dt>
            <dd class="col-md-8">Adultes uniquement</dd>
            <dt class="col-md-4">Degré</dt>
            <dd class="col-md-8">Avec rendez-vous</dd>
            <dt class="col-md-4">Offre</dt>
            <dd class="col-md-8">Hébergement, Intervention d'urgence, Information - Prévention - Orientation</dd>
        </dl>
        <p>
            <a href="#">
                Plus de détail<span class="sr-only"> sur Fondation Mère Sofia - Echelle</span>
            </a>
        </p>
    </li>

    <li>
        <h3>Fondation Point d&#39;Eau Lausanne</h3>
        <dl class="row">
            <dt class="col-md-4">Région</dt>
            <dd class="col-md-8">Lausanne</dd>
            <dt class="col-md-4">Situation</dt>
            <dd class="col-md-8">Violence conjugale, Traite des êtres humains, Situation de précarité</dd>
            <dt class="col-md-4">Clientèle</dt>
            <dd class="col-md-8">Adultes uniquement</dd>
            <dt class="col-md-4">Degré</dt>
            <dd class="col-md-8">Avec rendez-vous</dd>
            <dt class="col-md-4">Offre</dt>
            <dd class="col-md-8">Hébergement, Intervention d'urgence, Information - Prévention - Orientation</dd>
        </dl>
        <p>
            <a href="#">
                Plus de détail<span class="sr-only"> sur Fondation Point d&#39;Eau Lausanne</span>
            </a>
        </p>
    </li>

    <li>
        <h3>Bureau de l&#39;égalité entre les femmes et les hommes (BEFH)</h3>
        <dl class="row">
            <dt class="col-md-4">Région</dt>
            <dd class="col-md-8">Lausanne</dd>
            <dt class="col-md-4">Situation</dt>
            <dd class="col-md-8">Violence conjugale, Traite des êtres humains, Situation de précarité</dd>
            <dt class="col-md-4">Clientèle</dt>
            <dd class="col-md-8">Adultes uniquement</dd>
            <dt class="col-md-4">Degré</dt>
            <dd class="col-md-8">Avec rendez-vous</dd>
            <dt class="col-md-4">Offre</dt>
            <dd class="col-md-8">Hébergement, Intervention d'urgence, Information - Prévention - Orientation</dd>
        </dl>
        <p>
            <a href="#">
                Plus de détail<span class="sr-only"> sur Bureau de l&#39;égalité entre les femmes et les hommes (BEFH)</span>
            </a>
        </p>
    </li>

    <li>
        <h3>Etat civil</h3>
        <dl class="row">
            <dt class="col-md-4">Région</dt>
            <dd class="col-md-8">Lausanne</dd>
            <dt class="col-md-4">Situation</dt>
            <dd class="col-md-8">Violence conjugale, Traite des êtres humains, Situation de précarité</dd>
            <dt class="col-md-4">Clientèle</dt>
            <dd class="col-md-8">Adultes uniquement</dd>
            <dt class="col-md-4">Degré</dt>
            <dd class="col-md-8">Avec rendez-vous</dd>
            <dt class="col-md-4">Offre</dt>
            <dd class="col-md-8">Hébergement, Intervention d'urgence, Information - Prévention - Orientation</dd>
        </dl>
        <p>
            <a href="#">
                Plus de détail<span class="sr-only"> sur Etat civil</span>
            </a>
        </p>
    </li>

    <li>
        <h3>Fondation vaudoise de probation</h3>
        <dl class="row">
            <dt class="col-md-4">Région</dt>
            <dd class="col-md-8">Lausanne</dd>
            <dt class="col-md-4">Situation</dt>
            <dd class="col-md-8">Violence conjugale, Traite des êtres humains, Situation de précarité</dd>
            <dt class="col-md-4">Clientèle</dt>
            <dd class="col-md-8">Adultes uniquement</dd>
            <dt class="col-md-4">Degré</dt>
            <dd class="col-md-8">Avec rendez-vous</dd>
            <dt class="col-md-4">Offre</dt>
            <dd class="col-md-8">Hébergement, Intervention d'urgence, Information - Prévention - Orientation</dd>
        </dl>
        <p>
            <a href="#">
                Plus de détail<span class="sr-only"> sur Fondation vaudoise de probation</span>
            </a>
        </p>
    </li>

    <li>
        <h3>Institut universitaire de médecine légale</h3>
        <dl class="row">
            <dt class="col-md-4">Région</dt>
            <dd class="col-md-8">Lausanne</dd>
            <dt class="col-md-4">Situation</dt>
            <dd class="col-md-8">Violence conjugale, Traite des êtres humains, Situation de précarité</dd>
            <dt class="col-md-4">Clientèle</dt>
            <dd class="col-md-8">Adultes uniquement</dd>
            <dt class="col-md-4">Degré</dt>
            <dd class="col-md-8">Avec rendez-vous</dd>
            <dt class="col-md-4">Offre</dt>
            <dd class="col-md-8">Hébergement, Intervention d'urgence, Information - Prévention - Orientation</dd>
        </dl>
        <p>
            <a href="#">
                Plus de détail<span class="sr-only"> sur Institut universitaire de médecine légale</span>
            </a>
        </p>
    </li>

    <li>
        <h3>Ministère public d&#39;arrondissement de La Côte</h3>
        <dl class="row">
            <dt class="col-md-4">Région</dt>
            <dd class="col-md-8">Lausanne</dd>
            <dt class="col-md-4">Situation</dt>
            <dd class="col-md-8">Violence conjugale, Traite des êtres humains, Situation de précarité</dd>
            <dt class="col-md-4">Clientèle</dt>
            <dd class="col-md-8">Adultes uniquement</dd>
            <dt class="col-md-4">Degré</dt>
            <dd class="col-md-8">Avec rendez-vous</dd>
            <dt class="col-md-4">Offre</dt>
            <dd class="col-md-8">Hébergement, Intervention d'urgence, Information - Prévention - Orientation</dd>
        </dl>
        <p>
            <a href="#">
                Plus de détail<span class="sr-only"> sur Ministère public d&#39;arrondissement de La Côte</span>
            </a>
        </p>
    </li>

</ol>

<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>
 
{% render '@filter-list-form' %}
{% if format == "list" %}
  {% render '@filter-list-result-list' %}
{% elif format == "table" %}
  {% render '@filter-list-result-table' %}
{% endif %}
{% render '@pagination' %}
 
{
  "format": "list"
}

No notes defined.