Foehn Design System

Filter List: Table 

<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>Liste des résultats</h2>

<p>

    11

    résultats trouvés
</p>

<table class="table table-striped table-responsive">
    <caption>tableau des institutions selon les critères de recherches.</caption>
    <thead>
        <tr>
            <th>
                Organisme
                <a href="#" title="Trier par ordre croissant">
                    <span class="fas fa-sort" aria-hidden="true"></span><span class="sr-only"> Trier par ordre croissant</span>
                </a>
            </th>
            <th>Région</th>
            <th>Situation</th>
            <th>Clientèle</th>
            <th>Degré</th>
            <th>Offre</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td>La Marmotte <p><a href="#">Plus de détail</a></p>
            </td>
            <td>Lausanne</td>
            <td>Violence conjugale, Traite des êtres humains, Situation de précarité</td>
            <td>Adultes uniquement</td>
            <td>Avec rendez-vous</td>
            <td>Hébergement, Intervention d'urgence, Information - Prévention - Orientation</td>
        </tr>

        <tr>
            <td>Armée du Salut - Bureau Social <p><a href="#">Plus de détail</a></p>
            </td>
            <td>Lausanne</td>
            <td>Violence conjugale, Traite des êtres humains, Situation de précarité</td>
            <td>Adultes uniquement</td>
            <td>Avec rendez-vous</td>
            <td>Hébergement, Intervention d'urgence, Information - Prévention - Orientation</td>
        </tr>

        <tr>
            <td>CSR Lausanne <p><a href="#">Plus de détail</a></p>
            </td>
            <td>Lausanne</td>
            <td>Violence conjugale, Traite des êtres humains, Situation de précarité</td>
            <td>Adultes uniquement</td>
            <td>Avec rendez-vous</td>
            <td>Hébergement, Intervention d'urgence, Information - Prévention - Orientation</td>
        </tr>

        <tr>
            <td>(anciennement Centre Saint-Martin) <p><a href="#">Plus de détail</a></p>
            </td>
            <td>Lausanne</td>
            <td>Violence conjugale, Traite des êtres humains, Situation de précarité</td>
            <td>Adultes uniquement</td>
            <td>Avec rendez-vous</td>
            <td>Hébergement, Intervention d'urgence, Information - Prévention - Orientation</td>
        </tr>

        <tr>
            <td>Fondation Mère Sofia - Echelle <p><a href="#">Plus de détail</a></p>
            </td>
            <td>Lausanne</td>
            <td>Violence conjugale, Traite des êtres humains, Situation de précarité</td>
            <td>Adultes uniquement</td>
            <td>Avec rendez-vous</td>
            <td>Hébergement, Intervention d'urgence, Information - Prévention - Orientation</td>
        </tr>

        <tr>
            <td>Fondation Point d&#39;Eau Lausanne <p><a href="#">Plus de détail</a></p>
            </td>
            <td>Lausanne</td>
            <td>Violence conjugale, Traite des êtres humains, Situation de précarité</td>
            <td>Adultes uniquement</td>
            <td>Avec rendez-vous</td>
            <td>Hébergement, Intervention d'urgence, Information - Prévention - Orientation</td>
        </tr>

        <tr>
            <td>Bureau de l&#39;égalité entre les femmes et les hommes (BEFH) <p><a href="#">Plus de détail</a></p>
            </td>
            <td>Lausanne</td>
            <td>Violence conjugale, Traite des êtres humains, Situation de précarité</td>
            <td>Adultes uniquement</td>
            <td>Avec rendez-vous</td>
            <td>Hébergement, Intervention d'urgence, Information - Prévention - Orientation</td>
        </tr>

        <tr>
            <td>Etat civil <p><a href="#">Plus de détail</a></p>
            </td>
            <td>Lausanne</td>
            <td>Violence conjugale, Traite des êtres humains, Situation de précarité</td>
            <td>Adultes uniquement</td>
            <td>Avec rendez-vous</td>
            <td>Hébergement, Intervention d'urgence, Information - Prévention - Orientation</td>
        </tr>

        <tr>
            <td>Fondation vaudoise de probation <p><a href="#">Plus de détail</a></p>
            </td>
            <td>Lausanne</td>
            <td>Violence conjugale, Traite des êtres humains, Situation de précarité</td>
            <td>Adultes uniquement</td>
            <td>Avec rendez-vous</td>
            <td>Hébergement, Intervention d'urgence, Information - Prévention - Orientation</td>
        </tr>

        <tr>
            <td>Institut universitaire de médecine légale <p><a href="#">Plus de détail</a></p>
            </td>
            <td>Lausanne</td>
            <td>Violence conjugale, Traite des êtres humains, Situation de précarité</td>
            <td>Adultes uniquement</td>
            <td>Avec rendez-vous</td>
            <td>Hébergement, Intervention d'urgence, Information - Prévention - Orientation</td>
        </tr>

        <tr>
            <td>Ministère public d&#39;arrondissement de La Côte <p><a href="#">Plus de détail</a></p>
            </td>
            <td>Lausanne</td>
            <td>Violence conjugale, Traite des êtres humains, Situation de précarité</td>
            <td>Adultes uniquement</td>
            <td>Avec rendez-vous</td>
            <td>Hébergement, Intervention d'urgence, Information - Prévention - Orientation</td>
        </tr>

    </tbody>
</table>

<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": "table"
}

No notes defined.