Communications numériques gouvernementales Beta

Système de design gouvernemental

À consulter aussi

Le bloc À consulter aussi propose des éléments d’information qui complètent le contenu principal. Ce bloc est facultatif.

Dans le format bureau, le bloc se trouve à droite. Par contre, selon le gabarit de page utilisé et la disposition des composantes, le bloc peut se retrouver au bas de la page, sous le contenu principal.

Dans le format mobile, le bloc se trouve toujours en bas. On peut y placer des liens internes, des liens externes et des documents.

Exemple


Quand l'utiliser

Il faut d’abord se demander si le citoyen doit absolument avoir accès aux informations que l’on souhaite ajouter dans ce bloc.

Si oui, contextualisez plutôt ces éléments dans le contenu principal de la page.

Sinon, ajoutez dans cette zone des informations complémentaires utiles, mais non essentielles à la compréhension du contenu principal.

Comment l'utiliser

Le libellé À consulter aussi est placé au-dessus du bloc et c’est le seul libellé possible.

Les sections des liens et des documents se terminent par un filet secondaire. Le dégagement entre les filets et le contenu reste le même pour chacune des sections.

Exemple


Informations techniques

L’espace entre le filet principal et le titre de section est de 40 px. L’espace entre le titre de section et son contenu est de 16 px.

Un filet secondaire est automatiquement placé sous une section de contenu. L’espace entre le contenu et ce filet est de 40 px.

Présentation à la droite (format bureau)

CSS du titre de section
Color : #223654
Font-family : Roboto
Font-size : 1.75rem

CSS du contenu
Color : #223654
Font-family : Open Sans
Font-size : 0.875rem

CSS du filet principal
Border : 1px solid #223654

CSS du filet secondaire
Border : 1px solid #c5cad2

Présentation en bas de page

CSS du titre de section
Color : #223654
Font-family : Roboto
Font-size :1.75 rem

CSS du contenu
Color : #223654
Font-family : Open Sans
Font-size :1 rem

CSS du filet principal
Border : 2px solid #223654

CSS du filet secondaire
Border : 1px solid #c5cad2

Dernière mise à jour : 17 juillet 2020