Foehn Design System

Prestations 

<header class="header" role="banner">
    <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="vd-header-application container">
        <a href="../accueil" class="vd-logo" title="Aller à la page d'accueil du Site du Canton de Vaud">
            <img src="../../foehn/svg/ETATVAUD-alt.svg" class="vd-logo__image" alt="État de Vaud" aria-hidden="true" />
        </a>

    </div>
</header>

<section class="small container text-end mb-3">
    <h2 class="sr-only">Votre identité</h2>
    <p class="mb-0">
        <span class="fas fa-lock" aria-hidden="true"></span>

        <a href="#">Jean Villard Gilles</a>

    </p>

    <p class="mb-0">
        <a href="#">Se déconnecter</a>
    </p>

</section>

<main id="main">
    <div class="vd-bg-pattern-gray">
        <div class="container">
            <nav 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="breadcrumb-item"><a href="#">level 3</a></li>

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

                </ol>
            </nav>

            <h1 class="mt-0">Page title</h1>
        </div>
    </div>

    <div class="container mb-4">
        <nav class="navbar navbar-expand-md navbar-light bg-light">
            <span class="navbar-brand d-md-none">Menu</span>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav">
                    <li class="nav-item mb-lg-0 ">
                        <a class="nav-link" href="tableau-de-bord">Tableau de bord</a>
                    </li>
                    <li class="nav-item mb-lg-0 ">
                        <a class="nav-link" href="historique">Historique</a>
                    </li>
                    <li class="nav-item mb-lg-0  active">
                        <a class="nav-link" href="prestations"><span class="sr-only">(current)</span> Prestations</a>
                    </li>
                    <li class="nav-item mb-lg-0 ">
                        <a class="nav-link" href="documents">Documents</a>
                    </li>
                    <li class="nav-item mb-lg-0 ">
                        <a class="nav-link" href="parametres">Paramètres</a>
                    </li>
                </ul>
            </div>
        </nav>

    </div>

    <div class="container">

        <form action="formulaire-prestation-confirmation">
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group">
                        <label for="fastFilter">Filtre rapide</label>

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

                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="exampleSelect1">Filtrer par thème</label>
                        <select class="form-control" id="themFilter">
                            <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>

        </form>

        <article class="mb-3 p-1 bg-light">
            <div class="row">
                <div class="col-md-12">
                    <header>
                        <h3 class="mb-3">

                            <a href="">Demande de permis de peche</a>

                        </h3>
                        <dl class="small row">
                            <dt class="col-4">Thème</dt>
                            <dd class="col-8">Agriculture</dd>
                            <dt class="col-4">Type d'accès</dt>
                            <dd class="col-8">

                                libre d&#39;accès

                            </dd>
                        </dl>
                    </header>

                    <p>Une demande de permis de peche doit etre effectuée auprès d&#39;une autorité habilitée: kiosque, office de la gendarmerie. L&#39;obtention d&#39;un permis est nécessaire pour la peche au lac, en rivière sur tout le territoire Suisse à partir de 16 ans révolus.</p>

                    <footer>
                        <div>
                            <a href="#">Fiche descriptive</a>
                        </div>
                        <div>
                            <a href="#">Ajouter au favoris</a>
                        </div>
                    </footer>
                </div>
            </div>
        </article>
        <article class="mb-3 p-1 bg-light">
            <div class="row">
                <div class="col-md-12">
                    <header>
                        <h3 class="mb-3">

                            Demande de permis de construire <span class="fas fa-lock" aria-hidden="true"></span>

                        </h3>
                        <dl class="small row">
                            <dt class="col-4">Thème</dt>
                            <dd class="col-8">Immobilier</dd>
                            <dt class="col-4">Type d'accès</dt>
                            <dd class="col-8">

                                <a href="#">Demander l&#39;accès à la prestation</a>

                            </dd>
                        </dl>
                    </header>

                    <p>La demande de permis de construire doit etre accompagné des documents légaux nécessaire au lancement du processus administratif. Celle-ci est disponible pour toute personne majeur. Il est nécessaire que chaque demandeur soit munit d&#39;une pièce d&#39;identité.</p>

                    <footer>
                        <div>
                            <a href="#">Fiche descriptive</a>
                        </div>
                    </footer>
                </div>
            </div>
        </article>
        <article class="mb-3 p-1 bg-light">
            <div class="row">
                <div class="col-md-12">
                    <header>
                        <h3 class="mb-3">

                            <a href="">Repas subventionné &quot;Cafetservice&quot;</a>

                            <span class="fas fa-unlock" aria-hidden="true"></span>

                        </h3>
                        <dl class="small row">
                            <dt class="col-4">Thème</dt>
                            <dd class="col-8">Santé</dd>
                            <dt class="col-4">Type d'accès</dt>
                            <dd class="col-8">

                                Connexion nécessaire

                            </dd>
                        </dl>
                    </header>

                    <p>L&#39;Etat de Vaud met à disposition de ces collaborateurs une prestation &quot;Cafetservice&quot; pour les repas de midi. Le collaborateur choisis parmis une liste d&#39;aliments et de menus à des prix préférentiels.</p>

                    <footer>
                        <div>
                            <a href="#">Fiche descriptive</a>
                        </div>
                        <div>
                            <a href="#">Retirer des favoris</a>
                        </div>
                    </footer>
                </div>
            </div>
        </article>
        <article class="mb-3 p-1 bg-light">
            <div class="row">
                <div class="col-md-12">
                    <header>
                        <h3 class="mb-3">

                            <a href="">Zoo de Servion - Demande de visite scolaire</a>

                            <span class="fas fa-unlock" aria-hidden="true"></span>

                        </h3>
                        <dl class="small row">
                            <dt class="col-4">Thème</dt>
                            <dd class="col-8">Education</dd>
                            <dt class="col-4">Type d'accès</dt>
                            <dd class="col-8">

                                Accès sécurisé

                            </dd>
                        </dl>
                    </header>

                    <p>Le Zoo de Servion met à disposition son établissement dans le cadre de visites scolaires. Il est ainsi possible de réserver l&#39;ensemble du parc pour des visites dont le nombre de participants atteind au minimum 40. La cafétéria est à disposition du groupe pour le repas de midi.</p>

                    <footer>
                        <div>
                            <a href="#">Fiche descriptive</a>
                        </div>
                        <div>
                            <a href="#">Retirer des favoris</a>
                        </div>
                    </footer>
                </div>
            </div>
        </article>

    </div>
</main>

<footer class="mt-5">

    <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">

                            <ul class="list-unstyled ">
                                <li><a href="">Contact</a></li>
                                <li><a href="">Pourquoi créer un compte</a></li>
                                <li><a href="">Mentions légales</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 '@espace-securise' %}
{% block main %}

<form action="formulaire-prestation-confirmation">
    <div class="row">
        <div class="col-md-8">
            {% render '@input--default', {label: "Filtre rapide", id: "fastFilter"}, true %}
        </div>
        <div class="col-md-4">
            {% render '@select--default', {label: "Filtrer par thème", id: "themFilter"}, true %}
        </div>
    </div>

</form>


{% for item in prestation -%}
{% render '@prestation', item %}
{%- endfor %}


{% endblock %}
 
{
  "pageTitle": {
    "text": "Prestations"
  },
  "navigation": {
    "title": "Menu",
    "items": [
      {
        "text": "Tableau de bord",
        "title": null,
        "url": "tableau-de-bord",
        "active": null
      },
      {
        "text": "Historique",
        "title": null,
        "url": "historique",
        "active": null
      },
      {
        "text": "Prestations",
        "title": null,
        "url": "prestations",
        "active": true
      },
      {
        "text": "Documents",
        "title": null,
        "url": "documents",
        "active": null
      },
      {
        "text": "Paramètres",
        "title": null,
        "url": "parametres",
        "active": null
      }
    ]
  },
  "search": {
    "title": "Filtrer par thème",
    "titleModifier": "sr-only",
    "options": {
      "legend": "Filtrer par thème",
      "legendModifier": "sr-only",
      "items": [
        {
          "label": "Agriculture",
          "name": "filterSearch",
          "checked": false
        },
        {
          "label": "Economie",
          "name": "filterSearch",
          "checked": false
        },
        {
          "label": "Santé",
          "name": "filterSearch",
          "checked": false
        }
      ]
    }
  },
  "prestation": [
    {
      "title": "Demande de permis de peche",
      "href": "#",
      "available": true,
      "meta": {
        "theme": "Agriculture",
        "typeAcces": "libre d'accès"
      },
      "actions": [
        {
          "title": "Fiche descriptive",
          "url": "#"
        },
        {
          "title": "Ajouter au favoris",
          "url": "#"
        }
      ],
      "text": "Une demande de permis de peche doit etre effectuée auprès d'une autorité habilitée: kiosque, office de la gendarmerie. L'obtention d'un permis est nécessaire pour la peche au lac, en rivière sur tout le territoire Suisse à partir de 16 ans révolus."
    },
    {
      "title": "Demande de permis de construire",
      "href": "#",
      "available": false,
      "meta": {
        "theme": "Immobilier",
        "typeAcces": "Demander l'accès à la prestation"
      },
      "actions": [
        {
          "title": "Fiche descriptive",
          "url": "#"
        }
      ],
      "text": "La demande de permis de construire doit etre accompagné des documents légaux nécessaire au lancement du processus administratif. Celle-ci est disponible pour toute personne majeur. Il est nécessaire que chaque demandeur soit munit d'une pièce d'identité."
    },
    {
      "title": "Repas subventionné \"Cafetservice\"",
      "href": "#",
      "available": true,
      "meta": {
        "theme": "Santé",
        "typeAcces": "Connexion nécessaire"
      },
      "actions": [
        {
          "title": "Fiche descriptive",
          "url": "#"
        },
        {
          "title": "Retirer des favoris",
          "url": "#"
        }
      ],
      "text": "L'Etat de Vaud met à disposition de ces collaborateurs une prestation \"Cafetservice\" pour les repas de midi. Le collaborateur choisis parmis une liste d'aliments et de menus à des prix préférentiels."
    },
    {
      "title": "Zoo de Servion - Demande de visite scolaire",
      "href": "#",
      "available": true,
      "meta": {
        "theme": "Education",
        "typeAcces": "Accès sécurisé"
      },
      "actions": [
        {
          "title": "Fiche descriptive",
          "url": "#"
        },
        {
          "title": "Retirer des favoris",
          "url": "#"
        }
      ],
      "text": "Le Zoo de Servion met à disposition son établissement dans le cadre de visites scolaires. Il est ainsi possible de réserver l'ensemble du parc pour des visites dont le nombre de participants atteind au minimum 40. La cafétéria est à disposition du groupe pour le repas de midi."
    }
  ]
}

No notes defined.