Carrousels - Configuration de conception de Canada.ca

Les carrousels adaptifs sont des composantes d’intérieur de page servant à afficher de multiples objets différents dans le même espace de contenu.

Quoi éviter

N'utilisez pas cette composante :

• pour promouvoir des activités et des initiatives pertinentes et d’actualité;
• lorsque la tâche à accomplir par une personne ne doit pas être interrompue (par exemple pendant une transaction);
• quand cela reproduirait le contenu d’autres composantes de la page.

Comment utiliser cette configuration

• Les carrousels adaptifs regroupent entre deux et quatre diapositives défilantes qui se réinitialisent lorsque la page est chargée. Ils comportent des contrôles permettant à l’utilisateur de faire défiler les diapositives manuellement ou de façon automatique.
• Les contrôles par défaut pour faire défiler les diapositives sont des onglets pour les grands écrans et des boutons « suivante/précédente » avec un message « article X de Y » pour les petits écrans.
• En mode automatique, le défilement commence par la diapositive 1.
• En mode automatique, les diapositives défilent à 9 secondes d’intervalle.
• Par défaut, le passage d’une diapositive à l’autre se fait par défilement horizontal à partir de la bordure de droite.
• La taille des carrousels peut varier, allant d’une seule colonne à la pleine largeur de l’écran.
• Chaque diapositive combine du texte et des images, auquel on peut ajouter un bouton de lien.
• Le texte et les images doivent comporter des liens, mais tous les liens de la diapositive du carrousel doivent pointer vers la même destination.
• Tout appel à l’action doit être décrit dans le texte de l’hyperlien ou le bouton de lien.
• Le nombre de caractères pour l’ensemble du texte d’une diapositive de carrousel (étiquettes de liens comprises) est limité à 65.
• Les éléments textuels doivent être codés en HTML. Il ne faut pas imbriquer le texte dans l’image.
• Utiliser les catégories de présentation définies sous le thème de la BOEW de Canada.ca.
• Veuillez consulter la page GitHub sur Canada.ca pour obtenir des détails sur la taille des images.

Derniers changements

2020-10-30: clarifié quand utiliser les carrousels et quand les éviter

Exemple concret

• BOEW : Carrousels (utilisez le style 2)