Card

Usage

Do

• Keep cards simple, to show available information.
• Use cards to group related content.

Don't

• Avoid overloading cards with more information or interactive elements than necessary.
• Avoid overriding a card’s visual appearance.

---

Anatomy

---

Live playground

---

Types

Our card has two types (with variants to include a header, a footer or both):

• card
• inset card

---

Format

Cards are rectangular with subtle borders and elevation shadow to differentiate them from the background. They may either include a title in the header and footer areas or not. Cards may be positioned anywhere on the screen.

Size

Medium is the default size for a card. Use large cards in large views when it's necessary to present a lot of content at once. Small cards are best for small containers such as modals, drawers, popovers or trays.

Padding

The header and footer areas of the card are available with two padding options: tight and generous. These change in size according to the size of the card.

Elevation

Cards, by default, are set to use Fabric level 0 Elevation so that they have a small amount of definition against the background surface.

---

Content

There are a variety of different types of cards, but the purpose of all card content is to set an expectation for what happens when a user interacts with it. Content sits in the header, main body and footer areas of the card.

Keep card content concise

Titles are short (five to seven words) and should focus on the value a user will get from interacting with the card. Descriptive content should be brief - about 10-15 words (or more depending on the complexity of the information) - complementing the title with more in-depth context.

Be clear about the card's destination

Cards take someone to another experience, so the content should focus on the value they find when they get there.

---

Accessibility