Skip to content

Commit

Permalink
docs(card): allow non-flush rows (#2079)
Browse files Browse the repository at this point in the history 
* docs(card): whitespace, pipe tables, alt before src

* docs(card): allow non-flush card rows
  • Loading branch information
@bennypowers
bennypowers authored Dec 10, 2024
1 parent 33535ef commit bf76c04
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 111 deletions.
57 changes: 21 additions & 36 deletions docs/patterns/card/guidelines.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,56 +9,41 @@ tags:
subnav:
collection: cardPatterns
order: 2
importElements:
- rh-card
- rh-cta
- rh-surface
- rh-avatar
- rh-accordion
---

<script type="module" data-helmet>
import '@rhds/elements/rh-accordion/rh-accordion.js';
import '@rhds/elements/rh-avatar/rh-avatar.js';
import '@rhds/elements/rh-card/rh-card.js';
import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-surface/rh-surface.js';
import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
</script>

<link rel="stylesheet" data-helmet href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
<link rel="stylesheet" data-helmet href="/styles/samp.css">
<link rel="stylesheet"
data-helmet
href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">

<link rel="stylesheet"
data-helmet
href="/styles/samp.css">

## Usage

### Character count
The recommended maximum character count for the elements of a card are listed below and include spaces.

The recommended maximum character count for the elements of a card are listed
below and include spaces.

<rh-table>
<table>
<thead>
<tr>
<th scope="col" data-label="Element">Element</th>
<th scope="col" data-label="Character count">Character count</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Element">Title</td>
<td data-label="Character count">20</td>
</tr>
<tr>
<td data-label="Element">Headline</td>
<td data-label="Character count">50</td>
</tr>
<tr>
<td data-label="Element">Body text</td>
<td data-label="Character count">165</td>
</tr>
<tr>
<td data-label="Element">Footer</td>
<td data-label="Character count">55</td>
</tr>
</tbody>
</table>
</rh-table>

Element Character count
----------- -----------------
Title 20
Headline 50
Body text 165
Footer 55

</rh-table>

{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}
135 changes: 60 additions & 75 deletions elements/rh-card/docs/20-guidelines.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,32 +128,14 @@ present until a user dismisses it.
The recommended maximum character count for the elements of a card are listed below and include spaces.

<rh-table>
<table>
<thead>
<tr>
<th scope="col" data-label="Element" style="width: 50%">Element</th>
<th scope="col" data-label="Character count">Character count</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Element">Title</td>
<td data-label="Character count">20</td>
</tr>
<tr>
<td data-label="Element">Headline</td>
<td data-label="Character count">50</td>
</tr>
<tr>
<td data-label="Element">Body text</td>
<td data-label="Character count">165</td>
</tr>
<tr>
<td data-label="Element">Footer</td>
<td data-label="Character count">55</td>
</tr>
</tbody>
</table>

Element Character count
----------- -----------------
Title 20
Headline 50
Body text 165
Footer 55

</rh-table>

### Grouping
Expand All @@ -165,10 +147,10 @@ content. For example, grouping a basic card with a pricing card will look bad
because they’re not very similar.

<uxdot-example width-adjustment="784px">
<img src="../card-usage-grouping.svg"
alt="Grouping of a card"
width="784"
height="513">
<img alt="Grouping of a card"
src="../card-usage-grouping.svg"
width="784"
height="513">
</uxdot-example>

These cards can be grouped together because they have similar styles and
Expand All @@ -188,10 +170,10 @@ Cards can include complex components if necessary. For example, the
place any other complex components in card layouts.

<uxdot-example width-adjustment="664px">
<img src="../card-usage-other.svg"
alt="Alternative card usage"
width="664"
height="513">
<img alt="Alternative card usage"
src="../card-usage-other.svg"
width="664"
height="513">
</uxdot-example>

## Variants
Expand Down Expand Up @@ -222,20 +204,20 @@ A narrow promo can be used if the promo content needs to fit in a small area, li

<uxdot-best-practice variant="do">
<uxdot-example width-adjustment="1012px" slot="image">
<img src="../card-best-practices-width-do.svg"
alt="Three cards in a row"
width="1012"
height="187">
<img alt="Three cards in a row"
src="../card-best-practices-width-do.svg"
width="1012"
height="187">
</uxdot-example>
<p>In a 12-column layout, use a minimum width of four columns for a card. The maximum number of cards that should be used in a row is three.</p>
</uxdot-best-practice>

<uxdot-best-practice variant="dont">
<uxdot-example width-adjustment="1012px" slot="image">
<img src="../card-best-practices-width-dont.svg"
alt="Four cards in a row"
width="1012"
height="187">
<img alt="Four cards in a row"
src="../card-best-practices-width-dont.svg"
width="1012"
height="187">
</uxdot-example>
<p>Do not make cards narrower than 4 columns. This may not give enough space for content within the card.</p>
</uxdot-best-practice>
Expand All @@ -245,20 +227,20 @@ A narrow promo can be used if the promo content needs to fit in a small area, li
<div class="grid sm-two-columns">
<uxdot-best-practice variant="do">
<uxdot-example width-adjustment="360px" slot="image">
<img src="../card-best-practices-cta-variants-do.svg"
alt="Card with a default call to action"
width="360"
height="223">
<img alt="Card with a default call to action"
src="../card-best-practices-cta-variants-do.svg"
width="360"
height="223">
</uxdot-example>
<p>Use secondary or default calls to action in most cards.</p>
</uxdot-best-practice>

<uxdot-best-practice variant="dont">
<uxdot-example width-adjustment="360px" slot="image">
<img src="../card-best-practices-cta-variants-dont.svg"
alt="Card with a primary call to action"
width="360"
height="252">
<img alt="Card with a primary call to action"
src="../card-best-practices-cta-variants-dont.svg"
width="360"
height="252">
</uxdot-example>
<p>Do not use a primary call to action in any card unless the primary action for the whole page is positioned inside of that card.</p>
</uxdot-best-practice>
Expand All @@ -269,20 +251,20 @@ A narrow promo can be used if the promo content needs to fit in a small area, li
<div class="grid sm-two-columns">
<uxdot-best-practice variant="do">
<uxdot-example width-adjustment="360px" slot="image">
<img src="../card-best-practices-cta-number-do.svg"
alt="Card with a secondary call to action and a default call to action"
width="360"
height="303">
<img alt="Card with a secondary call to action and a default call to action"
src="../card-best-practices-cta-number-do.svg"
width="360"
height="303">
</uxdot-example>
<p>Use up to two calls to action in a card. They can be two different variants.</p>
</uxdot-best-practice>

<uxdot-best-practice variant="dont">
<uxdot-example width-adjustment="360px" slot="image">
<img src="../card-best-practices-cta-number-dont.svg"
alt="Card with three call to actions"
width="360"
height="354">
<img alt="Card with three call to actions"
src="../card-best-practices-cta-number-dont.svg"
width="360"
height="354">
</uxdot-example>
<p>Do not use more than two calls to action in a card. This could make it harder for the user to understand what action to take next.</p>
</uxdot-best-practice>
Expand All @@ -293,20 +275,20 @@ A narrow promo can be used if the promo content needs to fit in a small area, li
<div class="grid sm-two-columns">
<uxdot-best-practice variant="do">
<uxdot-example width-adjustment="546px" slot="image">
<img src="../card-best-practices-promo-do.svg"
alt="One featured promo below lorem ipsum text"
width="546"
height="312">
<img alt="One featured promo below lorem ipsum text"
src="../card-best-practices-promo-do.svg"
width="546"
height="312">
</uxdot-example>
<p>Because promo is used for special promotional content only, promos should typically appear individually.</p>
</uxdot-best-practice>

<uxdot-best-practice variant="dont">
<uxdot-example width-adjustment="546px" slot="image">
<img src="../card-best-practices-promo-dont.svg"
alt="Three narrow promos in a group"
width="546"
height="312">
<img alt="Three narrow promos in a group"
src="../card-best-practices-promo-dont.svg"
width="546"
height="312">
</uxdot-example>
<p>Do not group multiple promos together as if they were a regular card group.</p>
</uxdot-best-practice>
Expand All @@ -317,15 +299,18 @@ A narrow promo can be used if the promo content needs to fit in a small area, li
### Vertical height

The vertical height of cards depends on how much content is placed inside. If
there are multiple cards in a row, the vertical height of each of them will be
there are multiple cards in a row, the vertical height of each of them may be
determined by the tallest card. Don’t place inconsistent amounts of content in
cards, as this will impact how scannable the group will appear to users.

Authors may choose to have cards fill the maximum vertical space in a row or
not, depending on whether they want that or not.

<uxdot-example width-adjustment="784px">
<img src="../card-behavior-height.svg"
alt="Card height behavior"
width="784"
height="536">
<img alt="Card height behavior"
src="../card-behavior-height.svg"
width="784"
height="536">
</uxdot-example>

### Interactivity
Expand All @@ -335,10 +320,10 @@ elements inside should all be interactive. Otherwise, each interactive element
should continue to be interactive, but not the card container.

<uxdot-example width-adjustment="784px">
<img src="../card-behavior-interaction.svg"
alt="Card interaction"
width="786"
height="335">
<img alt="Card interaction"
src="../card-behavior-interaction.svg"
width="786"
height="335">
</uxdot-example>

## Interaction states
Expand Down

0 comments on commit bf76c04

Please sign in to comment.