From f22dacbe68498568ad4a3da4c28f563504e60acd Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Mon, 12 Aug 2024 14:43:38 -0700 Subject: [PATCH] wip: update card guidance --- src/en/components/card/base.md | 2 +- src/en/components/card/code.md | 32 ++++- src/en/components/card/design.md | 37 ++--- src/en/components/card/use-case.md | 43 +----- src/fr/composants/carte/cas-dutilisation.md | 47 +------ src/fr/composants/carte/code.md | 38 ++++- src/fr/composants/carte/design.md | 47 +++---- .../components/anatomy/gcds-card-anatomy.svg | 133 +++++++++--------- .../components/anatomy/gcds-card-anatomy.svg | 133 +++++++++--------- 9 files changed, 238 insertions(+), 274 deletions(-) diff --git a/src/en/components/card/base.md b/src/en/components/card/base.md index ee1cba3ce..3de73476e 100644 --- a/src/en/components/card/base.md +++ b/src/en/components/card/base.md @@ -9,7 +9,7 @@ tags: ['cardEN', 'header'] _Also called: tile, content card._ -The card is a box containing structured, actionable content on a single topic. +A card is a box containing structured, actionable content on a single topic. {% docLinks locale stage figma github %} {% enddocLinks %} diff --git a/src/en/components/card/code.md b/src/en/components/card/code.md index 381b97c73..0c3be7095 100644 --- a/src/en/components/card/code.md +++ b/src/en/components/card/code.md @@ -10,13 +10,37 @@ date: 'git Last Modified' Use cards to help a person discover and scan summaries or progressive, bite-sized bits of related information. +### Write a scannable card title + +Use the `card-title` attribute to add a short and descriptive title to the card. + +### Select the correct heading level + +Set the `card-title-tag` to define the correct heading level for the card title. Follow a correct and orderly heading hierarchy to make it equal for people who use assistive technologies. + +### Add a `description` to provide more information + +To provide more information on the card's topic, add a description to the card: + +- Use the `description` attribute to provide a concise text description. +- For a description with more complex formatting, like bold or italics text, use the card's default `slot`. **Avoid adding any interactive elements into the slot, as they ‌can cause accessibility issues. The card itself is already interactive and will take the person to the correct location.** + +### Use a `badge` to show the status or category of a card + +- Use the `badge` attribute to add a status or a category to the top left corner of the card. +- Common examples of statuses include: "New", "Updated", "Coming soon" and "Featured". +- Common examples of categories include: "videos", "articles", "reports". +- The badges are customizable but are limited to 20 characters maximum. + ### Group multiple cards for visual consistency -When you have more than 1 card on a page: +Organize cards within a [grid component]({{ links.grid }}): + +- For desktop screens, use either 2 or 3 cards per row. +- For mobile screens, use 1 card per row. +- Try to include the same properties for each card within a section on a page. For example, if one card has an image, then all cards get an image. -- Organize multiple cards within a grid component. -- Use the same card type within a section on a page. Choose the link card type or the action card type for all cards rather than mixing types. -- Try to include the same properties for each card within a section on a page. For example, if one card has an image then all cards get an image. +{% include "partials/valid-props.njk" %} {% include "partials/getcode.njk" %} diff --git a/src/en/components/card/design.md b/src/en/components/card/design.md index c141a06d6..0369ab46f 100644 --- a/src/en/components/card/design.md +++ b/src/en/components/card/design.md @@ -9,12 +9,11 @@ date: 'git Last Modified' ## Card anatomy
    -
  1. The container holds all of a card’s elements.
    2. -
  2. The image is a 1:1 or a 16:9 visual that can be included in the card.
    3. -
  3. The tag is a piece of supporting information that can be included to describe the content type.
    4. -
  4. The card title is a short headline on the subject of the card content and links to further information.
    5. -
  5. The description has supporting text for the card title and includes a few lines of summary on the card’s topic or a progressive list of details related to the same subject, like a list of event details.
    6. -
  6. The card footer can contain either an action, when there’s a button, or metadata. Metadata can include a date, location, author, or other relevant information.
    7. +
  7. The container holds all of a card's elements.
    8. +
  8. The badge (optional) is a visual indicator to inform users of the card's status or category. Badge text should be no more than 20 characters.
    9. +
  9. The image (optional) is a 1:1, 16:9, or 4:3 ratio visual.
    10. +
  10. The headline is a short attention-grabbing title about the card's content.
    11. +
  11. The description (optional) has text that supports the card title. It may include a few lines of summary on the card's topic or a list of details about the same subject, like a list of event details.
An image showing a card's anatomy @@ -23,30 +22,22 @@ date: 'git Last Modified' ### Write a scannable card title -- Use a title as a signpost to let a person know what they’ll find in the card. -- Make the title scannable by keeping it concise. +- Use a meaningful title to inform users of what they'll find on the card. - Choose a brief description or call-to-action statement for the title. -- Write a meaningful title to help a person choose what to read. ### Choose what information to add to the card - Consider adding an image related to the title to make individual cards more identifiable. -- Include a tag to identify the subject and support the scannability of the card. -- Opt to display relevant metadata about the card, as additional context to the primary information in the title and description. +- Consider adding a description to provide more information about the card's topic. +- Consider adding a badge to inform users of the status or the category of the card's content. Common examples of statuses include: "New", "Updated", "Coming soon" and "Featured". Common examples of categories include: "videos", "articles", "reports". The badges are customizable but are limited to 20 characters maximum. -### Select which metadata to include +### Group cards for visual consistency -If you include metadata, choose the 1 piece of information most important to your readers. For example: +Organize cards within a [grid component]({{ links.grid }}): -- Estimated length or reading time. -- Source, reference, or author. -- Rating or number of likes or saves. -- Date or location. +- For desktop screens, use either 2 or 3 cards per row. +- For mobile screens, use 1 card per row. -### Group multiple cards for visual consistency +TO DO: ADD IMAGE -When you have more than 1 card on a page: - -- Organize multiple cards within a grid component. -- Use the same card type within a section on a page. Choose the link card type or the action card type for all cards rather than mixing types. -- Try to include the same properties for each card within a section on a page. For example, if one card has an image then all cards get an image. +- Try to include the same properties for each card within a section on a page. For example, if one card has an image, then all cards get an image. diff --git a/src/en/components/card/use-case.md b/src/en/components/card/use-case.md index a0d4eaef4..afba4b6c1 100644 --- a/src/en/components/card/use-case.md +++ b/src/en/components/card/use-case.md @@ -17,7 +17,7 @@ permalink: /en/components/card/ date: 'git Last Modified' --- -Review these common uses for cards to see if they match the problem you’re solving for. +Review these common uses for cards to see if they match the problem you're solving for. ## Problems cards solve @@ -25,11 +25,11 @@ Cards organize information on the same subject in a static box shaped like a pla Use a card to: -- Group small pieces of related information as a single unit. +- Group small pieces of related information as a unit. - Present bite-sized previews and summaries of information with a means to obtain more details elsewhere. - Support content discovery by creating more visual interest. -Note: For Canada.ca, avoid using cards in place of the doormats specified in the templates for landing page and theme and topic page. +Note: For Canada.ca, avoid using cards in place of the doormats with the templates for landing page and theme and topic page.

Related components

@@ -39,40 +39,3 @@ Note: For Canada.ca, avoid using cards in place of the doormats specified in the Container for basic layouts with a set width.
- -## Component types - -### Link card - -{% componentPreview "Link card preview" "px-300 py-400" "my-400" %} - - -
Context info • metadata
- -{% endcomponentPreview %} - -

Use the link card to:

- - -### Action card - -{% componentPreview "Action card preview" "px-300 py-400" "my-400" %} - - -
- Button label -
- -{% endcomponentPreview %} - -

Use the action card to:

- -

Note: In the action card, only the card title headline link and the button are interactive. The button is for a specific action

diff --git a/src/fr/composants/carte/cas-dutilisation.md b/src/fr/composants/carte/cas-dutilisation.md index be2ff743f..7674a3955 100644 --- a/src/fr/composants/carte/cas-dutilisation.md +++ b/src/fr/composants/carte/cas-dutilisation.md @@ -23,13 +23,13 @@ Examinez les cas d'utilisation des cartes pour déterminer si elles répondent Les cartes permettent d'organiser des renseignements relatifs à un même sujet dans une boîte fixe ayant la forme d'une carte à jouer. -Utilisez une carte aux fins suivantes : +Utilisez une carte pour : -- Regrouper de petits éléments informatifs en un seul élément. -- Présenter des aperçus et résumés permettant d'obtenir davantage de renseignements ailleurs. -- Encourager la découverte de contenu en créant des éléments visuellement intéressants pour le lectorat. +- Combiner de brèves informations apparentées. +- Présenter de brefs aperçus et résumés informatifs, avec la possibilité d'en savoir plus ailleurs. +- Encourager la découverte de contenu en créant des éléments visuellement intéressants. -Remarque : Pour Canada.ca, évitez d'utiliser des cartes au lieu des éléments de navigation thématique indiqués dans les gabarits pour la page d'accueil et les pages consacrées au thème et au sujet. +Remarque : Pour Canada.ca, évitez d'utiliser des cartes au lieu du menu d'accueil thématique inclu dans les modèles de page d'accueil et de page de thème et de sujet.

Composants connexes

@@ -39,40 +39,3 @@ Remarque : Pour Canada.ca, évitez d'utiliser des cartes au lieu des éléments Boîte pour des affichages simples à largeur définie.
- -## Types de composants - -### Carte « Lien » - -{% componentPreview "Aperçu de carte « Lien »" "px-300 py-400" "my-400" %} - - -
Infos contextuelles • metadonnées
- -{% endcomponentPreview %} - -

Utilisez la carte « Lien » aux fins suivantes :

- - -### Carte « Action » - -{% componentPreview "Aperçu de carte « Action »" "px-300 py-400" "my-400" %} - - -
- Libellé du bouton -
- -{% endcomponentPreview %} - -

Utilisez la carte « Action » aux fins suivantes :

- -

Remarque : Dans la carte « Action », seuls le lien du titre et le bouton sont interactifs. Le bouton est consacré à une action spécifique.

diff --git a/src/fr/composants/carte/code.md b/src/fr/composants/carte/code.md index 29146ab60..20b1fa21c 100644 --- a/src/fr/composants/carte/code.md +++ b/src/fr/composants/carte/code.md @@ -8,15 +8,41 @@ date: 'git Last Modified' ## Créer une carte -Utilisez des cartes pour aider une personne à découvrir et à lire en un coup d’œil des résumés ou des éléments progressifs de renseignements sur un même thème. +Utilisez des cartes pour aider une personne à découvrir et à lire en un coup d'œil des résumés ou des éléments progressifs de renseignements sur un même thème. -### Regroupez plusieurs cartes pour une meilleure cohérence visuelle +## Codage et accessibilité des cartes -Lorsque votre page comprend plusieurs cartes : +### Écrivez un titre facile à parcourir -- Organisez plusieurs cartes à l’aide d’un composant Grille. -- Sur une même section, veillez à utiliser le même type de carte. Choisissez des cartes de types liens ou des cartes de type actions pour toutes les cartes au lieu d’utiliser un mélange des deux. -- Essayez d’inclure les mêmes propriétés pour chaque carte appartenant à la même section d’une page. Exemple : si une carte comporte une image, toutes les cartes comportent une image. +Utilisez l'attribut `card-title` pour ajouter un titre court et descriptif à la carte. + +### Sélectionnez le bon niveau de titre + +Utilisez `card-title-tag` pour définir le bon niveau de titre pour la carte. Suivez une hiérarchie correcte et ordonnée pour fournir une expérience équitable aux personnes utilisant des technologies d'assistance. + +### Ajoutez une `description` pour fournir plus d'informations + +Ajoutez une description pour fournir plus d'informations sur le sujet de la carte: + +- Utilisez l'attribut `description` pour fournir une description textuelle concise. +- Pour une description avec une mise en forme plus complexe, comme du texte en gras ou en italique, utilisez l'élément `slot` par défaut de la carte. **Évitez d'ajouter des éléments interactifs dans cet emplacement (slot), car ils peuvent entraîner des problèmes d'accessibilité. La carte elle-même est déjà interactive et dirigera la personne au bon endroit.** + +### Utilisez un `badge` pour afficher l'état ou la catégorie d'une carte + +- Utilisez l'attribut `badge` pour ajouter un état ou une catégorie dans le coin supérieur gauche de la carte. +- Voici des exemples courants d'états : Nouveau, Mis à jour, Bientôt disponible, En vedette. +- Voici des exemples courants de catégories : Vidéos, Articles, Rapports. +- Les badges sont personnalisables mais sont limités à 20 caractères maximum. + +### Regroupez les cartes pour assurer une cohérence visuelle + +Organisez les cartes à l'aide du [composant de la grille]({{ links.grid }}). + +- Pour les écrans d'ordinateurs, utilisez 2 ou 3 cartes par rangée. +- Pour les écrans d'appareils mobiles, utilisez 1 carte par rangée. +- Essayez d'inclure les mêmes propriétés pour chaque carte d'une même section dans une page. Par exemple : si une carte comporte une image, toutes les cartes comportent une image. + +{% include "partials/valid-props.njk" %} {% include "partials/getcode.njk" %} diff --git a/src/fr/composants/carte/design.md b/src/fr/composants/carte/design.md index b080506f9..1588ee2c7 100644 --- a/src/fr/composants/carte/design.md +++ b/src/fr/composants/carte/design.md @@ -6,47 +6,38 @@ tags: ['cardFR', 'design'] date: 'git Last Modified' --- -## Structure d’une carte +## Structure de la carte
    -
  1. La boîte contient tous les éléments d’une carte.
    2. -
  2. L'image est un visuel 1:1 ou 16:9 qui peut être inclus dans la carte.
    3. -
  3. La balise est un élément supplémentaire pouvant être ajouté pour décrire le type de contenu concerné.
    4. -
  4. Le titre de la carte est une brève déclaration sur le thème du contenu de la carte. Il inclut un lien permettant d’accéder à davantage de renseignements.
    5. -
  5. La description contient du texte destiné à accompagner le lien du titre. Elle offre un résumé du thème de la carte en quelques lignes ou une liste progressive de renseignements sur un même thème, comme une liste d’informations relatives à un évènement.
    6. -
  6. Le pied de page de la carte peut appeler à l’action si un bouton y est inclus, ou contenir des métadonnées. Les métadonnées peuvent inclure une date, un lieu, un auteur ou une autrice ou tout autre renseignement pertinent.
    7. +
  7. La boîte contient tous les éléments d'une carte.
    8. +
  8. Le badge (facultatif) est un indicateur visuel renseignant sur l'état ou la catégorie de la carte. Le texte du badge ne devrait pas dépasser 20 caractères.
    9. +
  9. L'image (facultative) a un format de 1:1, 16:9 ou 4:3.
    10. +
  10. Le titre est court et attire l'attention sur le sujet du contenu de la carte.
    11. +
  11. La description (facultative) contient du texte destiné à accompagner le titre. Elle résume en quelques lignes le sujet de la carte ou affiche une liste de renseignements sur un même sujet, comme les informations sur un évènement.
-Une image détaillant la structure d’une carte. +Une image détaillant la structure d'une carte. ## Design et accessibilité des cartes -### Écrivez un titre facile à lire en un coup d’œil +### Écrivez un titre facile à parcourir -- Utilisez un titre comme indicateur pour préciser à une personne ce qu’elle va trouver dans la carte. -- Assurez-vous que le titre soit court pour que les gens puissent le lire en un coup d’œil. -- Choisissez une brève description ou un appel à l’action pour le titre. -- Écrivez un titre clair pour aider une personne à choisir quoi lire. +- Utilisez un titre qui informe les personnes sur le contenu de la carte. +- Choisissez une brève description ou un appel à l'action pour le titre. ### Choisissez les renseignements à ajouter à la carte -- Envisagez d’ajouter une image correspondant au titre pour rendre les cartes plus reconnaissables. -- Incluez une balise pour indiquer le thème et rendre la carte plus reconnaissable au premier coup d’œil. -- Choisissez d’ajouter à la carte les métadonnées pertinentes. Celles-ci offriront davantage de contexte aux renseignements de base présentés dans le titre et la description. +- Envisagez d'ajouter une image reflétant le titre pour rendre les cartes plus reconnaissables. +- Envisagez d'ajouter une description pour fournir plus d'informations sur le sujet de la carte. +- Envisagez d'ajouter un badge pour renseigner les personnes sur l'état ou la catégorie du contenu de la carte. Voici des exemples courants d'états : Nouveau, Mis à jour, Bientôt disponible, En vedette. Voici des exemples courants de catégories : Vidéos, Articles, Rapports. Les badges sont personnalisables mais sont limités à 20 caractères maximum. -### Sélectionnez les métadonnées à inclure +### Regroupez les cartes pour assurer une cohérence visuelle -Si vous incluez des métadonnées, choisissez le renseignement le plus important pour votre lectorat. Par exemple : +Organisez les cartes à l'aide du [composant de la grille]({{ links.grid }}). -- Estimation de la longueur ou de la durée de lecture -- Source, référence ou auteur ou autrice. -- Évaluation ou nombre de « J’aime » ou d’enregistrements. -- Date ou lieu. +- Pour les écrans d'ordinateur, utilisez 2 ou 3 cartes par rangée. +- Pour les écrans d'appareils mobiles, utilisez 1 carte par rangée. -### Regroupez plusieurs cartes pour une meilleure cohérence visuelle +TO DO: ADD IMAGE -Lorsque votre page comprend plusieurs cartes : - -- Organisez plusieurs cartes à l’aide d’un composant Grille. -- Sur une même section, veillez à utiliser le même type de carte. Choisissez des cartes de types liens ou des cartes de type actions pour toutes les cartes au lieu d’utiliser un mélange des deux. -- Essayez d’inclure les mêmes propriétés pour chaque carte appartenant à la même section d’une page. Exemple : si une carte comporte une image, toutes les cartes comportent une image. +- Essayez d'inclure les mêmes propriétés pour chaque carte d'une même section dans une page. Par exemple : si une carte comporte une image, toutes les cartes comportent une image. diff --git a/src/images/en/components/anatomy/gcds-card-anatomy.svg b/src/images/en/components/anatomy/gcds-card-anatomy.svg index d8c21a0c2..65b6e8a1a 100644 --- a/src/images/en/components/anatomy/gcds-card-anatomy.svg +++ b/src/images/en/components/anatomy/gcds-card-anatomy.svg @@ -1,91 +1,94 @@ - - - - - - - - - - - - - - - + + + + + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - + + + + + + + + + + + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - - - - + + diff --git a/src/images/fr/components/anatomy/gcds-card-anatomy.svg b/src/images/fr/components/anatomy/gcds-card-anatomy.svg index d45299f09..e370b07d4 100644 --- a/src/images/fr/components/anatomy/gcds-card-anatomy.svg +++ b/src/images/fr/components/anatomy/gcds-card-anatomy.svg @@ -1,91 +1,94 @@ - - - - - - - - - - - - - - - + + + + + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - + + + + + + + + + + + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - - - - + +