Foehn Design System

Search: No Search 

<header class="header">
    <nav class="container fixed-top access-nav d-print-none" aria-label="menu accessibilité">
        <ul class="list-unstyled mt-3">
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="0" href="#" title="[Alt+0] Page d'accueil du site">Accueil</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="1" href="#nav-primary" title="[Alt+1] Menu de navigation de la page">Menu de navigation de la page</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="2" href="#main" title="[Alt+2] Debut du contenu de la page">Début du contenu de la page</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="3" href="#" title="[Alt+3] Page de contact">Page de contact</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="4" href="#" title="[Alt+4] Plan du site du Canton de Vaud">Plan du site</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="5" href="#search-form" title="[Alt+5] Accès au champ de recherche">Accès au champ de recherche</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="6" href="#" title="[Alt+6] Accès à l'index thématique">Thèmes</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="7" href="#" title="[Alt+7] Accès à la navigation par autorités">Autorités</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="8" href="#" title="[Alt+8] Page d'aide pour les personnes en situation de handicap">Page d'aide pour les personnes en situation de handicap</a>
            </li>
        </ul>
    </nav>

    <div class="container">
        <div class="d-flex flex-wrap justify-content-between justify-content-md-end d-print-none">
            <nav class="align-items-center d-flex d-print-none">
                <h2 class="sr-only">
                    Sous-navigation
                </h2>
                <ul class="list-inline text-md-end small">
                    <li class="list-inline-item me-2">
                        <a href="#">Autorités</a>
                    </li>
                    <li class="list-inline-item me-2">
                        <a href="#">Annuaire</a>
                    </li>
                </ul>
            </nav>

            <button id="login-button" type="button" class="btn btn-primary fs-6" data-bs-toggle="collapse" data-bs-target="#login-form-collapse" aria-expanded="false" aria-controls="login-form-collapse">
                Se connecter <span class="fas fa-chevron-down text-white ms-1" id="login-button-icon"></span>
            </button>

            <div id="login-form-collapse" class="collapse shadow border p-3">
                <div class="d-flex flex-column mb-5">
                    <div class="d-flex flex-row justify-content-between mb-2">
                        <div class="p-2">
                            <span class="h4">Particuliers et professionnels</span>
                        </div>
                        <div class="p-2">
                            <a href="#">
                                <span class="fas fa-question-circle"></span>
                            </a>
                        </div>
                    </div>
                    <div class="p-2 mb-3">
                        <a class="btn btn-primary text-center w-100 py-2" href="#">
                            <span class="fas fa-external-link-alt me-1 text-white"></span>
                            Portail prestations
                        </a>
                    </div>
                    <div class="p-2">
                        <a href="#" class="text-decoration-none">
                            Vous n'avez pas encore assez au portail ?
                        </a>
                    </div>
                    <div class="px-2">
                        <a href="#" class="btn btn-outline-primary text-center w-100 py-2">
                            Demander l'accès
                        </a>
                    </div>
                </div>
                <div class="px-2 mb-5">
                    <hr class="opacity-25">
                </div>
                <div class="d-flex flex-column">
                    <div class="d-flex flex-row justify-content-between mb-2">
                        <div class="p-2">
                            <span class="h4">Collaborateurs-trices et partenaires</span>
                        </div>
                        <div class="p-2">
                            <a href="#">
                                <span class="fas fa-question-circle"></span>
                            </a>
                        </div>
                    </div>
                    <div class="p-2">
                        <a class="btn btn-secondary text-center w-100 py-2" href="#">
                            <span class="fas fa-external-link-alt me-1 text-white"></span>
                            Portail IAM
                        </a>
                    </div>
                </div>
            </div>

        </div>
        <a href="../accueil" class="vd-logo" title="Aller à la page d'accueil du Site du Canton de Vaud">
            <img src="../../foehn/svg/ETATVAUD.svg" class="vd-logo__image" alt="État de Vaud" aria-hidden="true" />
        </a>

    </div>
    <div class="vd-nav-primary d-print-none">

        <!-- button -->
        <div class="container">
            <div class="row">
                <div class="col-md-12 d-flex justify-content-md-end">
                    <button type="button" class="btn btn-primary btn-sm vd-nav-primary__button align-self-end collapsed" data-bs-toggle="collapse" data-bs-target="#nav-primary-container" aria-controls="nav-primary-container" aria-expanded="false">
                        <div class="d-flex justify-content-between">
                            <div>
                                <span class="vd-nav-primary__button--close">Cacher les thèmes</span>
                                <span class="vd-nav-primary__button--open">Afficher les thèmes</span>
                            </div>
                            <div>
                                <span class="vd-nav-primary__button--open fas fa-plus"></span>
                                <span class="vd-nav-primary__button--close fas fa-minus"></span>
                            </div>
                        </div>
                    </button>
                </div>
            </div>
        </div>

        <!-- menu -->
        <div class="vd-nav-primary__menu-container">
            <div class="collapse clearfix" id="nav-primary-container">
                <div class="pb-3">
                    <div class="container vd-nav-primary__menu-bg-md">
                        <div class="vd-nav-primary__menu-bg-sm">
                            <div class="row">
                                <nav class="col-md-8 order-md-1 mt-3" id="nav-primary">
                                    <h2 class="sr-only">Navigation par thèmes</h2>
                                    <ul class="list-unstyled mb-0 row">

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#culture" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Culture</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Aides et subventions, passculture, Musées, Bibliothèques, Patrimoine vaudois, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#economie" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Economie</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Registre du commerce, poursuites et faillites, Entreprise, Chômage, Agriculture, développement économique, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#environnement" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Environnement</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Subventions pour l’énergie, faune et nature, eaux, forêts, air, développement durable, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#etat%2C%20droit%2C%20finance" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Etat, Droit, Finance</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Justice, votations, Egalité, protection des données, Impôts, finances publiques, Etat employeur, statistiques, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#formation" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Formation</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Vacances scolaires, scolarité obligatoire, orientation, apprentissage, gymnase, Bourses, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#mobilit%C3%A9" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Mobilité</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Automobiles, Routes, navigation, transports publics, mobilités durables, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#sant%C3%A9" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Santé</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Prévention, système de santé, dépendances, santé en milieu scolaire, droit des patients, les professionnels de la santé, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#social" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Social</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Subside à l’assurance maladie, revenu d’insertion, violence, le RDU, les prestations familles, PC familles, Rente-pont, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#vie%20priv%C3%A9e" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Vie privée</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Vacances scolaires, scolarité obligatoire, orientation, apprentissage, gymnase, Bourses, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#s%C3%A9curit%C3%A9" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Sécurité</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Police, pénitentiaire, armée, catastrophe, protection de la population, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#territoire" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Territoire</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Aménagement, permis de construire, registre foncier, communes, préfectures, dangers naturels, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</header>

<div class="vd-bg-pattern-gray">
    <div class="container">
        <nav class="pb-1" aria-label="Fil d'Ariane">
            <h2 class="sr-only">File d'Ariane</h2>
            <ol class="breadcrumb">

                <li class="breadcrumb-item"><a href="#">level 1</a></li>

                <li class="breadcrumb-item"><a href="#">level 2</a></li>

                <li class="sr-only" aria-current="page">level 3</li>

            </ol>
        </nav>

    </div>
</div>

<main id="main">
    <div class="vd-bg-pattern-gray">
        <h1 class="container mt-0">Rechercher</h1>

    </div>

    <div class="container mt-5 vd-content">

        <form class="input-group vd-search-form-regular" action="#" role="search">
            <label class="sr-only" for="search-form" id="search-form-label">Champ de recherche</label>
            <input id="search-form" type="text" class="form-control" aria-describedby="search-form-label">
            <span class="input-group-btn">
                <button class="btn btn-dark" type="submit" aria-label="Rechercher"><i class="fas fa-search" aria-hidden="true"></i></button>
            </span>
        </form>

    </div>
</main>

<div class="container mt-5">

    <h2 class="vd-heading-light h4 mb-3 sr-only">Partager la page</h2>
    <ul class="list-inline vd-social-icons mt-4 mb-3">
        <li class="list-inline-item">
            <a class="vd-social-icon" href="#"><span class="fas fa-envelope" aria-hidden="true"></span><span class="sr-only">Envoyer par courriel</span></a>
        </li>
        <li class="list-inline-item">
            <a class="vd-social-icon" href="#"><span class="fab fa-twitter" aria-hidden="true"></span><span class="sr-only">Partager sur Twitter</span></a>
        </li>
        <li class="list-inline-item">
            <a class="vd-social-icon" href="#"><span class="fab fa-facebook-f" aria-hidden="true"></span><span class="sr-only">Partager sur Facebook</span></a>
        </li>
        <li class="list-inline-item">
            <a class="vd-social-icon" href="#"><span class="fab fa-linkedin-in" aria-hidden="true"></span><span class="sr-only">Partager sur Linkedin</span></a>
        </li>
        <li class="list-inline-item d-lg-none">
            <a class="vd-social-icon" href="#"><span class="fab fa-whatsapp" aria-hidden="true"></span><span class="sr-only">Partager sur WhatsApp</span></a>
        </li>
        <li class="list-inline-item d-none d-lg-inline-block">
            <a class="vd-social-icon" href="#"><span class="fas fa-print" aria-hidden="true"></span><span class="sr-only">Imprimer la page</span></a>
        </li>
    </ul>

</div>

<footer>

    <div class="container">
        <div class="text-end">
            <a href="#" class="btn btn-sm btn-dark" title="Retour vers le haut de la page">Haut <span class="fas fa-chevron-up"></span></a>
        </div>
    </div>

    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-10">
                    <nav class="row" aria-label="pied de page">

                        <div class="col-sm">
                            <h2 class="vd-heading-light h4 sr-only">Accès directs</h2>
                            <ul class="list-unstyled vd-list-columns">
                                <li><a href="">Offre d&#39;emploi</a></li>
                                <li><a href="">Statistiques</a></li>
                                <li><a href="">Portail sécurisé</a></li>
                                <li><a href="">Flux RSS</a></li>
                                <li><a href="">Espace sécurisé</a></li>
                                <li><a href="">Mentions légales</a></li>
                                <li><a href="">Contact</a></li>
                                <li><a href="">Permaliens</a></li>
                                <li><a href="">Guides TYPO3</a></li>
                            </ul>
                        </div>

                        <div class="col-sm">
                            <h2 class="vd-heading-light h4 ">Sites partenaires</h2>
                            <ul class="list-unstyled ">
                                <li><a href="">Promotion Vaud.ch</a></li>
                                <li><a href="">Tourisme</a></li>
                                <li><a href="">Musées</a></li>
                                <li><a href="">Patrimoine</a></li>
                                <li><a href="">CH.ch</a></li>
                            </ul>
                        </div>

                    </nav>
                </div>
                <div class="col-xs-2">
                    <div class="d-flex align-items-end flex-column h-100">
                        <div class="mt-auto w-100 end">
                            <a href="#" class="d-inline-block">
                                <span class="sr-only">Retour à la page d'accueil</span>
                                <img aria-hidden="true" class="img-fluid footer-logo" src="../../foehn/svg/logo/logo--white.svg" alt="Canton de Vaud">

                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</footer>
 
{% extends '@template' %}
{% block main %}
  {% render '@search-form--regular', searchForm, true %}
  {% if results %}
    <h2 class="h5">Filtrer les résultats</h2>
    <ul class="nav nav-pills">
      {% for filter in filters -%}
        <li class="nav-item">
          <a href="{{ filter.url }}"
            {% if filter.active %}
              class="nav-link active">
            {% else %}
              class="nav-link">
            {% endif %}
          {{ filter.title }}
          </a>
        </li>
        {%- endfor %}
    </ul>
    {% render '@results-list' %}
    {% render '@pagination' %}
  {% elif error %}
    <h2>Aucun résultat</h2>
    <p>Vous pouvez essayer avec des termes différents</p>
  {% endif %}
{% endblock %}
 
{
  "pageTitle": {
    "text": "Rechercher",
    "styleModifier": "container mt-0"
  },
  "breadcrumb": {
    "styleModifier": "pb-1"
  },
  "searchForm": {
    "heading": false,
    "placeholder": false
  },
  "filters": [
    {
      "title": "<span class=\"sr-only\">Afficher </span>Tout",
      "url": "#",
      "active": true
    },
    {
      "title": "<span class=\"sr-only\">Afficher uniquement les </span>Actualités",
      "url": "#"
    },
    {
      "title": "<span class=\"sr-only\">Afficher uniquement les </span>Prestations",
      "url": "#"
    },
    {
      "title": "<span class=\"sr-only\">Afficher uniquement les résultats concernant le </span>Grand Conseil",
      "url": "#"
    }
  ],
  "results": false,
  "header": {
    "searchForm": false
  }
}

Titre de la page après une recherche

Après une recherche, le titre de la page (<title>) doit reprendre le(s) termes recherchés.

Exemple:

<title>[termes] - Rechercher - VD.CH</title>
<title>payer mes impôts - Rechercher - VD.CH</title>