Skip to content

Add accented card design guidelines #5073

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lboehling wants to merge 1 commit into
base: main
Choose a base branch
from
+44 −2
Open

Add accented card design guidelines #5073

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 24 additions & 2 deletions packages/documentation-site/patternfly-docs/content/components/card/card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,30 @@ The header element can be made expandable in situations where you want to hide t
<div class="ws-docs-content-img">
![Example of an expandable card.](./img/card-expandable.svg)
</div>



### 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.

<div class="ws-docs-content-img">
![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)
</div>

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.

@thatblindgeye thatblindgeye Aug 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit thing: would we want to say something more like "icons or labels, with either optionally paired with semantic colors"? Just worried if the way it's worded now if consumers would take it as "I can just use color for status" or something, but that might just be me overthinking


#### 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

@kaylachumley kaylachumley Jul 21, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything looks good to me! completely optional, but we could add an image visual that shows "do not do" or when not to use examples to double down.


- 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:

Expand Down
Loading
Loading