Librairie de composants

switch de saison

Normal

Spécificités

2 saisons maximum

Par défaut

Exemple 1

Fil d’ariane

Normal

Large

Spécificités

Mettre suffisamment d’espace entre chaque lien
Toujours indiquer l’accueil en 1er élément
Ne pas charger le design (doit rester secondaire)
Toujours s’aligner sur la gauche du container (pas centré, ni aligné à droite)
Toujours afficher la page courante, sans lien, et dans un style plus léger que les éléments cliquables (couleur plus discrète, pas de gras, …)
En mobile, toujours conserver un seul lien (celui vers la page parente), sous forme de lien retour :
chevron retourné, avant le texte du lien, pointant vers la gauche
Il peut être affichée dans le container Normal ou le container Large, décidé au moment du design, et non modifiable à la saisie

Par défaut

Titre

Normal

Large

Pleine largeur

Spécificités

Inexistant sur Drupal (= est saisi dans un Texte avec Éditeur riche)
Niveaux de titres autorisés : H2, H3, H4 (H1 interdit, il est le titre de la page) studio dev inté
La saisie d’un titre en 2 partie se fait avec un saut de ligne (shift + Entrée) saisie
La partie mise en avant visuellement sera gérée avec le Gras saisie
L’application d’un style impact tous les niveaux de titre, prévoir d’adapter proportionnellement le style du titre selon la taille de sa police studio inté
Le choix de la largeur est essentiel sur ce bloc car il nous permet de l’aligner avec le composant d’après (ex : un Titre et une FAQ, un Titre et une Galerie photo)

Un titre de niveau 2

Un titre de niveau 3

Un titre de niveau 4

Un titre de niveau 2
avec style 1 en 2 parties

Un titre de niveau 3
avec style 1 en 2 parties

Un titre de niveau 4
avec style 1 en 2 parties

Par défaut

Exemple 1

Texte

Normal

Spécificités

Éditeur riche studio dev inté
- Gras, Italique, Lien, Aligner à gauche, Aligner au centre
- Titre, Styles, Liste à puce / numérotée, Ancre (Drupal)
- Barrer, Exposant, Indice

Phasellus rutrum efficitur eros ac tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In quis felis² viverra, pharetra _magnaat, elementum nisi. Proin suscipit, enim nec pharetra dictum, purus ligula vulputate orci, ut dictum metus dolor in nibh. Praesent efficitur commodo nulla non placerat.

Proin sodales suscipit massa non finibus. Sed non iaculis nisi. Convallis sit amet nec nisi. Fusce hendrerit risus a enim pretium, euismod sodales orci facilisis.

Par défaut

Contenu mis en avant

Normal

Spécificités

Composants autorisés : Texte, Titre, Liste, Bouton
Au cas par cas, on pourra autoriser l’insertion d’autres composants, à estimer et à maquetter

Un titre pour le contenu mis en avant

Phasellus rutrum efficitur eros ac tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In quis felis viverra, pharetra magna at, elementum nisi. Proin suscipit, enim nec pharetra dictum, purus ligula vulputate orci, ut dictum metus dolor in nibh. Praesent efficitur commodo nulla non placerat.

Un call to action

Par défaut

Exemple 1

Liste

Normal

Spécificités

Inexistant sur Drupal (= est saisi dans un Texte)
Les enfants ne rappellent pas le numérotage du parent, ils affichent 1. 2. 3. peu importe leur niveau) studio inté
Toujours aligner la puce avec la 1ère ligne de texte, pas de centrage vertical studio inté
Réutiliser le même élément de décoration entre le niveau 1 et les suivants (en faisant varier éventuellement Taille, Couleur, ou Opacité) studio inté

Liste à puces

nunc ac nibh ac diam
euismod sodales
- quis felis viverra pharetra magna at
- pharetra magna at
ac nibh ac diam

Liste numérotée

nunc ac nibh ac diam
euismod sodales
1. quis felis viverra pharetra magna at
  1. sodales
  2. magna at felis
  3. quis felis
2. pharetra magna at
ac nibh ac diam

Par défaut

Exemple 1

Bouton

Normal

Large

Pleine largeur

Spécificités

Inexistant sur Drupal (= est saisi dans un Texte)
Peut contenir une icône éditable (selon une liste d’icône définie en amont) studio dev inté
- WordPress : un champ Icône (aucune, email, téléphone, …)
- Drupal : plusieurs Styles définis dans le CKEditor pour l’élément <a>
Peut être de différent style (couleur, forme, …) studio dev inté
- WordPress : ajout de Styles au composant (pas de choix de Couleur de Fond / Texte natif)
- Drupal : plusieurs Styles définis dans le CKEditor pour l’élément <a>
Le choix de la largeur est essentiel sur ce bloc car il nous permet de l’aligner avec le composant d’avant (ex : une FAQ et un Bouton, une Galerie photo et un Bouton)

Un bouton simple

Un bouton avec icone

Un bouton avec une autre icone

Par défaut

Exemple 1

Documents

Normal

Spécificités

PDF (formats supplémentaires à activer au cas par cas) dev
Pas de différenciation de l’icône selon le format de fichier studio
Forcer l’ouverture dans un nouvel onglet dev
Ne pas forcer le téléchargement : certains navigateur ne le prennent pas en charge, et le téléchargement reste disponible lors de la consultation du document dans le navigateur dev
Préférer un lien simple à un affichage identique au composant Bouton studio dev
Avoir le format et le poids du fichier affiché studio dev inté

Mon document d’exemple

Le titre de mon document PDF

Dernier document

Par défaut

Exemple 1

Photo

Normal

Spécificités

2 formats d’image possible :
- Format 3:2 (960×640 dans un contexte par défaut) studio dev inté
- Format d’origine (sur une hauteur maximale de 640px) studio dev inté
On n’adapte pas le style du composant selon son contexte
- On peut retirer des formes / styles graphiques dans un contexte en Colonnes studio
- On ne peut pas faire varier les formes dans un contexte Colonnes studio
Préférer l’inclusion de formes à l’intérieur du composant dans le cas ou celles-ci ne doivent pas être rognée sur petit écran, ou qu’elles doivent rester présentes dans un contexte en Colonnes studio
La légende doit être limitée à 180 caractères studio dev
La légende est cachée uniquement dans un contexte en Colonnes dev studio inté
Prévoir systématiquement l’ouverture en lightbox (librairie GLightbox)

Philippe DUPONT

Cette photo est affichée dans son ratio d’origine, la longueur de sa légende ne doit pas dépasser 180 caractères.

Par défaut

Exemple 1

Vidéo

Normal

Spécificités

Format 16:9 (960×540 dans un contexte par défaut) studio dev inté
On n’adapte pas le style du composant selon son contexte
- On peut retirer des formes / styles graphiques dans un contexte en Colonnes studio
- On ne peut pas faire varier les formes dans un contexte Colonnes studio
Préférer l’inclusion de formes à l’intérieur du composant dans le cas ou celles-ci ne doivent pas être rognée sur petit écran, ou qu’elles doivent rester présentes dans un contexte en Colonnes studio
Pas de légende studio dev inté
Pas de crédits studio dev inté

Par défaut

Exemple 1

Bandeau panoramique

Normal

Large

Pleine largeur

Spécificités

Présence ou non d’une zone de contenu (960px de largeur) studio dev inté
- WordPress : Composants enfants (Titre, Texte, Bouton, Liste)
- Drupal : Champ Contenu (CKEditor)
Hauteur de 480px (Ratio 4:1) studio dev inté
Pas de légende studio dev inté
Affichage des crédits studio dev inté
Les composants autorisés dans la zone de contenu sont : Texte (sur WordPress on ajoute à ça Titre, Liste, Bouton)
WordPress : prévoir l’insertion de contenu (avec Texte, Titre, Liste, Bouton)

Par défaut

FAQ

Fixe (720px)

Spécificités

Permet l’insertion de Questions/réponses sur base d’une sélection manuelle ou d’une sélection par Catégorie (inexistant sur Drupal) studio dev inté
Balisage ld+json dev
- Drupal : module WS
- WordPress : inexistant
WordPress : prévoir l’ajout du balisage ld+json
Drupal : prévoir la possibilité d’afficher une FAQ sur base d’une ou de plusieurs catégories, si plusieurs catégories sont sélectionnées, on affiche des filtres qui affichent/cachent les éléments

Été
Hiver

L’information

test L’information

Les remontées mécaniques fonctionnent-elles en été pour les piétons et VTT ?