From bf76c0434bd7b99f022f3fab31fae39e97ba18a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?= =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?= Date: Tue, 10 Dec 2024 08:02:07 +0200 Subject: [PATCH] docs(card): allow non-flush rows (#2079) * docs(card): whitespace, pipe tables, alt before src * docs(card): allow non-flush card rows --- docs/patterns/card/guidelines.md | 57 ++++------- elements/rh-card/docs/20-guidelines.md | 135 +++++++++++-------------- 2 files changed, 81 insertions(+), 111 deletions(-) diff --git a/docs/patterns/card/guidelines.md b/docs/patterns/card/guidelines.md index 1c36508c11..9f9db32cb1 100644 --- a/docs/patterns/card/guidelines.md +++ b/docs/patterns/card/guidelines.md @@ -9,56 +9,41 @@ tags: subnav: collection: cardPatterns order: 2 -importElements: - - rh-card - - rh-cta - - rh-surface - - rh-avatar - - rh-accordion --- - - + + ## 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. - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementCharacter count
Title20
Headline50
Body text165
Footer55
- + Element Character count + ----------- ----------------- + Title 20 + Headline 50 + Body text 165 + Footer 55 + {% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/elements/rh-card/docs/20-guidelines.md b/elements/rh-card/docs/20-guidelines.md index 7092846704..056e8df1af 100644 --- a/elements/rh-card/docs/20-guidelines.md +++ b/elements/rh-card/docs/20-guidelines.md @@ -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. - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementCharacter count
Title20
Headline50
Body text165
Footer55
+ + Element Character count + ----------- ----------------- + Title 20 + Headline 50 + Body text 165 + Footer 55 + ### Grouping @@ -165,10 +147,10 @@ content. For example, grouping a basic card with a pricing card will look bad because they’re not very similar. - Grouping of a card + Grouping of a card These cards can be grouped together because they have similar styles and @@ -188,10 +170,10 @@ Cards can include complex components if necessary. For example, the place any other complex components in card layouts. - Alternative card usage + Alternative card usage ## Variants @@ -222,20 +204,20 @@ A narrow promo can be used if the promo content needs to fit in a small area, li - Three cards in a row + Three cards in a row

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.

 - Four cards in a row + Four cards in a row

Do not make cards narrower than 4 columns. This may not give enough space for content within the card.

 @@ -245,20 +227,20 @@ A narrow promo can be used if the promo content needs to fit in a small area, li
- Card with a default call to action + Card with a default call to action

Use secondary or default calls to action in most cards.

 - Card with a primary call to action + Card with a primary call to action

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.

 @@ -269,20 +251,20 @@ A narrow promo can be used if the promo content needs to fit in a small area, li
- Card with a secondary call to action and a default call to action + Card with a secondary call to action and a default call to action

Use up to two calls to action in a card. They can be two different variants.

 - Card with three call to actions + Card with three call to actions

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.

 @@ -293,20 +275,20 @@ A narrow promo can be used if the promo content needs to fit in a small area, li
- One featured promo below lorem ipsum text + One featured promo below lorem ipsum text

Because promo is used for special promotional content only, promos should typically appear individually.

 - Three narrow promos in a group + Three narrow promos in a group

Do not group multiple promos together as if they were a regular card group.

 @@ -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. + - Card height behavior + Card height behavior ### Interactivity @@ -335,10 +320,10 @@ elements inside should all be interactive. Otherwise, each interactive element should continue to be interactive, but not the card container. - Card interaction + Card interaction ## Interaction states