From fc10a6490783cf4455f6685066f62ba5b4280eef Mon Sep 17 00:00:00 2001 From: lboehling Date: Mon, 13 Jul 2026 16:40:53 -0400 Subject: [PATCH] Add accented card design guidelines to card component docs. Document the new accented card variant with usage guidance, when to use and when not to use rules, and an SVG example asset. Co-authored-by: Cursor --- .../content/components/card/card.md | 26 +++++++++++++++++-- .../components/card/img/card-accented.svg | 20 ++++++++++++++ 2 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/components/card/img/card-accented.svg diff --git a/packages/documentation-site/patternfly-docs/content/components/card/card.md b/packages/documentation-site/patternfly-docs/content/components/card/card.md index 6900d6291f..d34ec58ca3 100644 --- a/packages/documentation-site/patternfly-docs/content/components/card/card.md +++ b/packages/documentation-site/patternfly-docs/content/components/card/card.md @@ -101,8 +101,30 @@ The header element can be made expandable in situations where you want to hide t
![Example of an expandable card.](./img/card-expandable.svg)
- - + +### Accented cards + +Use an accented card to give one or more cards more visual prominence in a set. An accented card includes a short brand accent mark centered along the top edge. The mark uses the brand accent color and is meant for hierarchy and emphasis, not to communicate status. + +
+![Example of an accented card with a brand accent mark on the top edge, shown next to a standard card without the accent.](./img/card-accented.svg) +
+ +Add the accent to a single card or a small number of cards in a row to help users identify a featured, recommended, or primary option among similar cards. For example, you might accent one plan in a pricing comparison or one entry point in a catalog view. + +Do not use the accent mark to indicate status. On cards that include status information, such as success, warning, or danger, use status indicators like icons, labels, or semantic colors instead. Avoid combining an accented card with status-specific color treatments that could be confused with the accent mark. + +#### When to use + +- You want to highlight one or a few cards as featured, recommended, or primary among similar options. +- The accent supports a clear visual hierarchy without relying on status color. + +#### When not to use + +- The card needs to communicate status. Use status indicators instead. +- You plan to accent most or all cards in a set. The accent loses meaning when overused. +- The card has no hierarchy purpose. Do not add the accent for decoration alone. + ### Selectable cards Selectable cards have a checkbox or radio button to indicate that a card is selectable. To select a card, users can click anywhere on the card. PatternFly supports two types of selectable cards: diff --git a/packages/documentation-site/patternfly-docs/content/components/card/img/card-accented.svg b/packages/documentation-site/patternfly-docs/content/components/card/img/card-accented.svg new file mode 100644 index 0000000000..64e1721597 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/card/img/card-accented.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + +