Cards cheat sheet

When a container helps, when it is noise, and what to use instead.

SGDSMaterial3 rules, updated 7 Oct 2026Verified 7 Oct 2026

AI workflow Why generated UI overuses cards

Viewport: All

Viewport references are useful starting points. Design breakpoints should respond to the content, not specific device models. Choosing a viewport changes what is emphasised; nothing is hidden.

Component QA

Craft guidance

Anatomy

Container
Optional media
Title
Supporting content
Optional actions

States to design

Default
Hover, if clickable
Focus, if clickable
Selected
Loading

Edge cases

Very long title
Missing image
One card alone in a grid
Hundreds of cards
Cards of unequal height in a row

Checklist

Each card is one independent object
No card inside a card
Padding and radius match across cards
If the whole card is clickable, it has one clear target
Shadow only where the card overlaps something

Before adding one

Do I actually need a card?

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

Not every group needs a container. A card should mean: this is one self-contained object, such as a product, a message or a file.

Why?

Containers are the easiest way to separate things, so they get reached for first. Each one adds a border, a background, padding and a radius to the screen.

When to use it

The content is an independent object people act on as a whole.
Items repeat in a grid or list and need clear edges.
The surface is interactive or draggable as a unit.

When not to

Spacing alone already shows the grouping.
A section heading would do.
A divider would do.
You are putting a card inside another card.

Common mistakes (3)

Every section of a page in its own rounded card.
Card, inside card, inside panel.
Identical card layouts for unlike content.

Senior designer note“Not everything needs a card.”

AI-look warning. Generated interfaces overuse containers because a card is an easy way to create separation. Try a heading, spacing and one meaningful container instead.

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Safe starting point

16–24 px

Padding

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to Mobile to large desktop

Common working ranges for the space inside a container. Consistency matters more than finding a theoretically perfect value: pick one value per kind of container and keep it.

Mobile

12–16 px

Tablet

16–20 px

Desktop

16–24 px

The yellow band is the card's padding. Schematic, not to scale: the frames are small, so the padding is drawn in proportion.

Mobile: 12–16 px
Tablet: 16–20 px
Laptop: 16–24 px
Desktop: 16–24 px
Large desktop: 20–32 px

Depends on information density, component size, touch interaction, product type, your design system. A starting point, not a correct value.

Common range 8–12 compact control, 16–24 standard card, 24–32 large content card

8–12: Compact control. Buttons, chips, table cells, dense toolbars.
16–24: Standard card. Most cards, panels, popovers and dialogs.
24–32: Large content card. Cards holding long text or a single important object.

Why?

This range tends to give a desktop product card room to breathe while keeping useful density. Compact enterprise tools go lower; large editorial cards go higher.

When to deviate. Go tighter when people scan many items at once. Go looser when a card holds one thing people read carefully.

Common mistakes (3)

Different padding on cards that sit side by side.
Padding larger than the gap between cards, so the insides feel further apart than the cards.
Desktop padding carried unchanged onto a 360 px screen.

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Safe starting point

6–8 px

Border radius

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

How round corners are. Pick two or three values and tie them to component size, not to taste per component.

0
4
8
12
16
24
Full

The same 88 by 48 px shape at each radius, in px. On a control this size, 24 is already nearly a pill.

Common range 0–4 sharp, 6–8 general, 10–12 softer, 16–24 large surfaces, full for pills

0–4: Sharp. Technical, dense and enterprise interfaces; table cells; small tags.
6–8: General purpose. A safe default for buttons, fields and cards in product UI.
10–12: Softer. A more relaxed, consumer feel; larger cards.
16–24: Large surfaces. Sheets, large modals and expressive marketing surfaces.
Full: Pill. Chips, avatars and capsule controls.

Why?

Radius sets the tone of a product more than almost any other value, and inconsistency in it is easy to see.

When to deviate. Follow the platform or design system first. Scale radius with size: a large radius on a small control turns it into a pill.

Common mistakes (4)

Five or more radius values on one screen.
A rounded card inside a rounded card inside a rounded panel.
Inner corners rounder than the container holding them.
Everything rounded because it looks modern.

AI-look warning. Large rounded cards used everywhere are one of the most common marks of template or generated UI.

Official guidanceSGDSMaterial

SGDS
0 and 2 px for tables and dividers; 4 px for tags and small icon buttons; 8 px for cards, modals, dropdowns and inputs; 12 and 16 px for large modals and banners; 24 px for feature cards; full for avatars.
SGDS, Border(opens in a new tab)Design-system convention
Material
Shape scale: extra small 4 dp, small 8 dp, medium 12 dp, large 16 dp, extra large 24 dp.
Android Developers, Material Design 3 in Compose(opens in a new tab)Design-system convention

Before adding one

Do I actually need a card?

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

Not every group needs a container. A card should mean: this is one self-contained object, such as a product, a message or a file.

Why?

Containers are the easiest way to separate things, so they get reached for first. Each one adds a border, a background, padding and a radius to the screen.

When to use it

The content is an independent object people act on as a whole.
Items repeat in a grid or list and need clear edges.
The surface is interactive or draggable as a unit.

When not to

Spacing alone already shows the grouping.
A section heading would do.
A divider would do.
You are putting a card inside another card.

Common mistakes (3)

Every section of a page in its own rounded card.
Card, inside card, inside panel.
Identical card layouts for unlike content.

Senior designer note“Not everything needs a card.”

AI-look warning. Generated interfaces overuse containers because a card is an easy way to create separation. Try a heading, spacing and one meaningful container instead.

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Safe starting point

16–24 px

Padding

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to Mobile to large desktop

Common working ranges for the space inside a container. Consistency matters more than finding a theoretically perfect value: pick one value per kind of container and keep it.

Mobile

12–16 px

Tablet

16–20 px

Desktop

16–24 px

The yellow band is the card's padding. Schematic, not to scale: the frames are small, so the padding is drawn in proportion.

Mobile: 12–16 px
Tablet: 16–20 px
Laptop: 16–24 px
Desktop: 16–24 px
Large desktop: 20–32 px

Depends on information density, component size, touch interaction, product type, your design system. A starting point, not a correct value.

Common range 8–12 compact control, 16–24 standard card, 24–32 large content card

8–12: Compact control. Buttons, chips, table cells, dense toolbars.
16–24: Standard card. Most cards, panels, popovers and dialogs.
24–32: Large content card. Cards holding long text or a single important object.

Why?

This range tends to give a desktop product card room to breathe while keeping useful density. Compact enterprise tools go lower; large editorial cards go higher.

When to deviate. Go tighter when people scan many items at once. Go looser when a card holds one thing people read carefully.

Common mistakes (3)

Different padding on cards that sit side by side.
Padding larger than the gap between cards, so the insides feel further apart than the cards.
Desktop padding carried unchanged onto a 360 px screen.

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Safe starting point

6–8 px

Border radius

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

How round corners are. Pick two or three values and tie them to component size, not to taste per component.

0
4
8
12
16
24
Full

The same 88 by 48 px shape at each radius, in px. On a control this size, 24 is already nearly a pill.

Common range 0–4 sharp, 6–8 general, 10–12 softer, 16–24 large surfaces, full for pills

0–4: Sharp. Technical, dense and enterprise interfaces; table cells; small tags.
6–8: General purpose. A safe default for buttons, fields and cards in product UI.
10–12: Softer. A more relaxed, consumer feel; larger cards.
16–24: Large surfaces. Sheets, large modals and expressive marketing surfaces.
Full: Pill. Chips, avatars and capsule controls.

Why?

Radius sets the tone of a product more than almost any other value, and inconsistency in it is easy to see.

When to deviate. Follow the platform or design system first. Scale radius with size: a large radius on a small control turns it into a pill.

Common mistakes (4)

Five or more radius values on one screen.
A rounded card inside a rounded card inside a rounded panel.
Inner corners rounder than the container holding them.
Everything rounded because it looks modern.

AI-look warning. Large rounded cards used everywhere are one of the most common marks of template or generated UI.

Official guidanceSGDSMaterial

SGDS
0 and 2 px for tables and dividers; 4 px for tags and small icon buttons; 8 px for cards, modals, dropdowns and inputs; 12 and 16 px for large modals and banners; 24 px for feature cards; full for avatars.
SGDS, Border(opens in a new tab)Design-system convention
Material
Shape scale: extra small 4 dp, small 8 dp, medium 12 dp, large 16 dp, extra large 24 dp.
Android Developers, Material Design 3 in Compose(opens in a new tab)Design-system convention

Cards cheat sheet

Filters

Component QA

Anatomy

States to design

Edge cases

Checklist

Before adding one

Do I actually need a card?

When to use it

When not to

Padding

Border radius

Cards cheat sheet

Filters

Component QA

Anatomy

States to design

Edge cases

Checklist

Before adding one

Do I actually need a card?

When to use it

When not to

Padding

Border radius