Skip to content

Commit

Permalink
wip: update card guidance
Browse files Browse the repository at this point in the history
  • Loading branch information
@melaniebmn
melaniebmn committed Aug 12, 2024
1 parent 0e8eeb6 commit f22dacb
Show file tree
Hide file tree
Showing 9 changed files with 238 additions and 274 deletions.
2 changes: 1 addition & 1 deletion src/en/components/card/base.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
32 changes: 28 additions & 4 deletions src/en/components/card/code.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" %}

Expand Down
37 changes: 14 additions & 23 deletions src/en/components/card/design.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,11 @@ date: 'git Last Modified'
## Card anatomy

<ol class="anatomy-list">
<li>The <strong>container</strong> holds all of a card’s elements.</li>
<li>The <strong>image</strong> is a 1:1 or a 16:9 visual that can be included in the card.</li>
<li>The <strong>tag</strong> is a piece of supporting information that can be included to describe the content type.</li>
<li>The <strong>card title</strong> is a short headline on the subject of the card content and links to further information.</li>
<li>The <strong>description</strong> 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.</li>
<li>The <strong>card footer</strong> can contain either an action, when there’s a button, or metadata. Metadata can include a date, location, author, or other relevant information.</li>
<li>The <strong>container</strong> holds all of a card's elements.</li>
<li>The <strong>badge</strong> (optional) is a visual indicator to inform users of the card's status or category. Badge text should be no more than 20 characters.</li>
<li>The <strong>image</strong> (optional) is a 1:1, 16:9, or 4:3 ratio visual.</li>
<li>The <strong>headline</strong> is a short attention-grabbing title about the card's content.</li>
<li>The <strong>description</strong> (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.</li>
</ol>

<img class="b-sm b-default p-400" src="/images/en/components/anatomy/gcds-card-anatomy.svg" alt="An image showing a card's anatomy"/>
Expand All @@ -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.
43 changes: 3 additions & 40 deletions src/en/components/card/use-case.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,19 @@ 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

Cards organize information on the same subject in a static box shaped like a playing card.

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.

<article class="bg-full-width bg-primary text-light pt-500 pb-400 my-500">
<h2 class="mt-0 mb-400">Related components</h2>
Expand All @@ -39,40 +39,3 @@ Note: For Canada.ca, avoid using cards in place of the doormats specified in the
<a href="{{ links.container }}" class="link-light">Container</a> for basic layouts with a set width.

</article>

## Component types

### Link card

{% componentPreview "Link card preview" "px-300 py-400" "my-400" %}
<gcds-card card-title="Card title link" tag="Tag" href="#" description="Description or supporting text relating to the headline. Longer text will be truncated with ...">

<div slot="footer">Context info • metadata</div>
</gcds-card>
{% endcomponentPreview %}

<p class="mb-400">Use the link card to:</p>
<ul class="list-disc mb-400">
<li>Structure information on the same topic to progressively offer the reader more details</li>
<li>Include a link when there’s further information. Adding a link makes the entire card interactive as a large clickable target.</li>
<li>Provide a large, clickable target leading to more information.</li>
</ul>

### Action card

{% componentPreview "Action card preview" "px-300 py-400" "my-400" %}
<gcds-card card-title="Card title link" href="#" type="action" tag="Tag" description="Description or supporting text relating to the headline. Longer text will be truncated with ..." img-alt="#">

<div slot="footer">
<gcds-button>Button label</gcds-button>
</div>
</gcds-card>
{% endcomponentPreview %}

<p class="mb-400">Use the action card to:</p>
<ul class="list-disc mb-400">
<li>Group information that supports a task. The main action features on a button in the card footer.</li>
<li>Highlight an immediate action a person can take using the button.</li>
<li>Give a person the choice to learn more by selecting the card title headline link before moving to action.</li>
</ul>
<p>Note: In the action card, only the card title headline link and the button are interactive. The button is for a specific action</p>
47 changes: 5 additions & 42 deletions src/fr/composants/carte/cas-dutilisation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<article class="bg-full-width bg-primary text-light pt-500 pb-400 my-500">
<h2 class="mt-0 mb-400">Composants connexes</h2>
Expand All @@ -39,40 +39,3 @@ Remarque : Pour Canada.ca, évitez d'utiliser des cartes au lieu des éléments
<a href="{{ links.container }}" class="link-light">Boîte</a> pour des affichages simples à largeur définie.

</article>

## Types de composants

### Carte « Lien »

{% componentPreview "Aperçu de carte « Lien »" "px-300 py-400" "my-400" %}
<gcds-card card-title="Titre de la carte" tag="Balise" href="#" description="Description destinée à accompagner le titre. Les textes plus longs seront tronqués avec ...">

<div slot="footer">Infos contextuelles • metadonnées</div>
</gcds-card>
{% endcomponentPreview %}

<p class="mb-400">Utilisez la carte « Lien » aux fins suivantes :</p>
<ul class="list-disc mb-400">
<li>Structurer des renseignements relatifs à un même thème pour offrir au lectorat davantage de détails de manière progressive.</li>
<li>Inclure un lien permettant d'accéder à davantage d'informations. Ajouter un lien rendant l'ensemble de la carte interactive et cliquable.</li>
<li>Offrir une large cible cliquable permettant d'accéder à d'autres renseignements.</li>
</ul>

### Carte « Action »

{% componentPreview "Aperçu de carte « Action »" "px-300 py-400" "my-400" %}
<gcds-card card-title="Titre de la carte" href="#" type="action" tag="Balise" description="Description destinée à accompagner le titre. Les textes plus longs seront tronqués avec ..." img-alt="#">

<div slot="footer">
<gcds-button>Libellé du bouton</gcds-button>
</div>
</gcds-card>
{% endcomponentPreview %}

<p class="mb-400">Utilisez la carte « Action » aux fins suivantes :</p>
<ul class="list-disc mb-400">
<li>Regrouper des renseignements permettant d'accomplir une tâche. La carte action compte un bouton dans le pied de page. </li>
<li>Souligner une action immédiate que peut entreprendre la personne à l'aide du bouton.</li>
<li>Offrir à une personne la possibilité d'en savoir plus en sélectionnant le titre avant de passer à l'action.</li>
</ul>
<p>Remarque : Dans la carte « Action », seuls le lien du titre et le bouton sont interactifs. Le bouton est consacré à une action spécifique.</p>
38 changes: 32 additions & 6 deletions src/fr/composants/carte/code.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" %}

Expand Down
Loading

0 comments on commit f22dacb

Please sign in to comment.