Les éléments présentés ici on été produits à partir des zonings des 3 sites.
Cependant les éléments du menu de navigation principale et du header du site doivent être adaptés en fonction des besoins.
Les éléments présentés ici on été produits à partir des zonings des 3 sites.
Cependant les éléments du menu de navigation principale et du header du site doivent être adaptés en fonction des besoins.
Avant de présenter la navigation principale et le footer, voici le composant menu qui en est une pièce importante.
Tous les menus des barre de navigation et du footer sont basés dessus et ont si besoin une classe spéciale supplémentaire : menu-connexion, menu-site...
<ul class="menu"> <li> <a class="menu__link">
See the Pen menu - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
See the Pen Navigation principale - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
See the Pen Navigation principale - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
See the Pen lanceur d'appli - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
Le header est basé sur la structure d'hero.
Au scroll (sauf sur la page d'accueil), ce header passe de l'état is-expanded à l'état is-shrinked
fw-section hero header-site is-expanded / is-shrinked
See the Pen header site - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
See the Pen header site - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
See the Pen footer site - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
<ul class="pagination list"> <li> <span class="pagination__link pagination__keyword"> <li> <span class="pagination__link is-active">
See the Pen pagination - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
<ul class="breadcrumb list"> <li> <a class="breadcrumb__link">
See the Pen breadcrumb - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
breadcrumb list breadcrumb__link
Ce panneau peut assez facilement se combiner avec un composant form small et une popin small-screens comme sur la maquette de la page liste ressources.
<div class="panel"> <section class="panel__header panel__title">* <h4>, <input class="button">... <section class="panel__section is-visible"> <div class="panel__header"> <h6> <button class="button button_icon x-small secundary button_expand"><i class="fas fa-chevron-up"> <div class="panel__content"> * facultatif
See the Pen panel - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
panel panel__title panel__section panel__header panel__content