IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Card

/

Design

Collect related content or tasks within a container.

Cards exist to group repeatable content and display it in a modular, easy-to-read way.

IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Card documentation and examples.

Cases

While all cards are displayed in a familiar format, the content within them changes the purpose of each.

Basic: The majority of our cards are basic. It can collect and display a variety of content and most likely won’t include any visuals.

Elements

Every card consists of a body, but can also include a header, footer and sometimes media content.

Chase Winovich — Draft 2019

The only thing that matters is that you outwork every single person.

Body: Use for just about any and all content imaginable.

Usage

Content

Content shows up in different ways when grouped into cards. Some require headers, some will only need footers and some might need both. When collectively displayed, they each should remain consistent and use the right card type.

Don't recreate a card type out of individual elements.

Don'trecreate a card type out of individual elements.

Do choose the right card for the content.

Dochoose the right card for the content.

Don't organize content in different ways when grouped together.

Don'torganize content in different ways when grouped together.

Do keep cards consistent for easy scanning.

Dokeep cards consistent for easy scanning.

Actions

Cards may vary in size depending on the purpose and content. Actions should only ever be present in the footer. Reserve these for the three most important.

Don't overload the footer with actions.

Don'toverload the footer with actions.

Do list the most important the user can take.

Dolist the most important the user can take.

Selection

In some cases cards may be selectable. If it makes sense to include selection, use our select mark in the upper left corner.

Microcopy

Titles

Titles should be concise and briefly explain the content. Write them in title case, but don’t worry about punctuation for these.

Date and Time

Cards are nearly synonymous with time as they’re most often displayed in feeds. Follow our date and time guidelines.

Case & Punctuation

Like most things, cards follow our non-label text guidelines and use appropriate punctuation and sentence case.

Accessibility

Audit Results

See our full accessibility audit for more information about these results.

PlatformVisualInteractiveAutomatedDetails
ReactIconConfirmation PassIconCritical ViolationsIconConfirmation Pass
  • IconCriticalOutermost div is interactive but has no focus styles or tabIndex.
  • IconCriticalComponent contains an interactive div or span with no associated role.
React NativeIconConfirmation PassIconConfirmation PassIconWarning N/A

    Platform

    platformnotes
    Web
    • Stick to the guidelines above.
    Apple
    • Stick to the guidelines above.
    Android
    • Stick to the guidelines above.