diff --git a/_sass/components.sass b/_sass/components.sass index 76ecb6c0..bdf17489 100644 --- a/_sass/components.sass +++ b/_sass/components.sass @@ -1,3 +1,5 @@ +// Sass Document + .beta-top, .alpha-top padding-top: 2px !important padding-bottom: 2px !important @@ -1152,4 +1154,3 @@ h1 @media screen and (max-width: 991px) .provisional.contributors ul margin-inline-start: 1.5em - diff --git a/configurations-conception-communes/block-introduction.md b/configurations-conception-communes/block-introduction.md new file mode 100644 index 00000000..e2e4877f --- /dev/null +++ b/configurations-conception-communes/block-introduction.md @@ -0,0 +1,185 @@ +--- +altLangPage: "https://design.canada.ca/common-design-patterns/intro-block.html" +date: 2023-08-20 +dateModified: 2023-08-20 +description: Orientation sur l’utilisation de la configuration de conception du bloc d’introduction sur Canada.ca. +title: Bloc d’introduction +--- +

Dernière mise à jour : {{ page.dateModified }}

+

La configuration de conception du bloc d’introduction introduit le contenu d’une page de renvoi.

+
+
+

Sur cette page

+ +
+
+

Quand l’utiliser

+

La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages de renvoi.

+
+
+

Quoi éviter

+

Ne l’utilisez pas sur les pages de destination lorsque les gens tentent d’accomplir une tâche.

+
+
+

Contenu et conception

+

Trouvez des spécifications de contenu et de conception et des exemples visuels.

+

Spécifications de contenu

+

La configuration de conception du bloc d’introduction consiste en ce qui suit :

+ +

Elle peut également inclure ces éléments :

+ +

Titre

+

Le titre de la page doit être descriptif et unique, mais bref.

+

N’utilisez pas d’acronymes ou d’abréviations dans le titre.

+

Description courte

+

Le texte doit être court et concis, idéalement sur une ou deux lignes.

+ +

Rédigez dans un langage clair et simple.

+

Image

+

N’utilisez que des images décoratives, car l’image est cachée sur les petits écrans.

+

N’appliquez pas de lien à l’image; utilisez plutôt la configuration de conception d’un lien en vedette.

+ +

Limitez l’usage du texte dans les images.

+ +

Bouton de super-tâche

+

N’incluez un bouton de super-tâche que s’il y a une tâche précise qui représente au moins le tiers du taux de clics provenant de la page.

+

Découvrez comment utiliser un bouton de super-tâche :

+ +

Spécifications de conception

+ +

Accessibilité

+ +

Exemples visuels

+
+
+
Bloc d’introduction – grand écran
+ Introduction block pattern for large screens. Text version below: +
+ Description de l’image : bloc d’introduction - grand écran +

Le bloc d’introduction apparaît sous l’en-tête général et le fil d’Ariane de Canada.ca. Il se compose d’un titre h1 pour le nom de l’institution et d’une description courte du mandat de l’institution.

+
+
+
+
+
+
Bloc d’introduction – petit écran
+ Introduction block pattern for small screens. Text version below: +
+ Description de l’image : bloc d’introduction - petit écran +

Le bloc d’introduction apparaît sous l’en-tête général et le fil d’Ariane de Canada.ca. Il se compose d’un titre h1 pour le nom de l’institution et d’une description courte du mandat de l’institution.

+
+
+
+
+
+

Comment procéder à la mise en œuvre

+

Trouvez des exemples pratiques et du code pour mettre en œuvre la configuration de conception du bloc d’introduction.

+

Référence pour la mise en œuvre du thème GCWeb (BOEW)

+

La référence à l’implémentation comprend la façon de configurer les éléments du système de conception.

+ +

Mises en œuvre

+

Déterminez ce qui convient le mieux au type de page que vous créez.

+
+
+
+
+
+ GC-AEM +

Pour Adobe Experience Manager (AEM) du gouvernement du Canada (GC) :

+ +
+
+ SGDC +

Pour la Solution de gabarits à déploiement centralisé (SGDC) :

+ +
+
+ Drupal WxT +

Pour Drupal WxT :

+ +
+
+
+
+
+
+
+

Recherche et justification

+

Consultez les conclusions de la recherche et la justification de la politique.

+

Constatations découlant de la recherche

+

Résumé de recherche : Communiquer avec l’ARC

+

L’Agence du revenu du Canada (ARC) et le Bureau de la transformation numérique ont élaboré le bloc d’introduction dans le cadre du projet d’optimisation des contacts avec l’ARC.

+

+ Nous avons constaté que la configuration de conception du bloc d’introduction était utile sur les pages d’accueil institutionnelles, en particulier dans les situations où un bouton de super-tâche est nécessaire. Consultez le résumé de recherche pour en savoir plus sur d’autres aspects du projet. +

+

Justification stratégique

+

La configuration de conception du bloc d’introduction est requise dans les modèles obligatoires suivants :

+ +
+
+

Derniers changements

+
+
+ +
+
Mise à jour de l’orientation pour y inclure les spécifications de contenu et de conception, des exemples visuels et une orientation sur la mise en œuvre.
+
+