Foehn Design System

Header Application: Fluid 

<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="visually-hidden visually-hidden-focusable btn btn-dark pt-0" accesskey="0" href="#" title="[Alt+0] Page d'accueil du site">Accueil</a>
            </li>
            <li>
                <a class="visually-hidden visually-hidden-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="visually-hidden visually-hidden-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="visually-hidden visually-hidden-focusable btn btn-dark pt-0" accesskey="3" href="#" title="[Alt+3] Page de contact">Page de contact</a>
            </li>
            <li>
                <a class="visually-hidden visually-hidden-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="visually-hidden visually-hidden-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="visually-hidden visually-hidden-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="visually-hidden visually-hidden-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="visually-hidden visually-hidden-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-fluid">
        <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>
 
<header class="header" role="banner">
  {% include '@access-nav' %}
  <div class="vd-header-application{%- if styleModifier %} {{ styleModifier }}{%- endif %}">
    {% render '@logo-etat--alternate-2', logo, true %}
    {%- if applicationTitle -%}
    <span class="vd-header-application__title">{{ applicationTitle }}</span>
    {%- endif %}
  </div>
</header>
 
{
  "styleModifier": "container-fluid"
}
  • Content: 
    @charset 'UTF-8';
@use "sass:math";

/**
 * header for application
 *
 * 1. Show a double slash between logo and title when not on mobile
 * 2. Do not show the double slash when on mobile. Since we can not detect when
 *    items are wrappes we use media queries
 */

.vd-header-application {
  display: flex;
  flex-flow: column wrap; /* [2] */

  @include media-breakpoint-up(md) {
    flex-direction: row; /* [2] */
  }
}

.vd-header-application__title {
  margin-bottom: math.div($spacer, 2);
  font-size: $h4-font-size;
  text-transform: uppercase;

  @include media-breakpoint-up(md) {
    margin-top: math.div($spacer, 4);

    &:before {
      content: "//"; /* [1] */
      margin-left: math.div($spacer, 4); /* [1] */
      margin-right: math.div($spacer, 4); /* [1] */
    }
  }
}
  • URL: /components/raw/header-application/_header-application.scss
  • Filesystem Path: src/components/03-organisms/global/header-application/_header-application.scss
  • Size: 792 Bytes

No notes defined.