Carrousels - Configuration de conception de Canada.ca: 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.
Quand utiliser cette configuration
Utilisez cette composante pour des situations telles que des galeries d'images ou de vidéos.
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)
Exemple
Détails de la page
- Date de modification :