Draft
Components

Card.

A container that groups one subject and, usually, one way into it. Built mobile first for the field apps, and on web it can also carry a selected state. The card sits on the surface layer, so everything about its fill, border and shadow comes from Shadow & elevation rather than from anything card specific.

Anatomy and spacing

Every part below the media is optional except the title. The gaps are fixed, so a card with no subtitle closes up rather than leaving a hole.

Title
Optional subtitle
NeutralInfo

The body of a card provides supporting text that expands on the title and gives users helpful information or context.

Hover or focus a row to see that part highlighted on the card above.

270px Media4:3, object-fit cover. Flush to the card edge, with the gradient foot over it.
24px Overflow24 × 24, white. Optional. Top right of the media, on the gradient. Holds the actions that are not the main one.
28px Title/Medium SemiBold, 20/28TitleThe only part that is never optional.
24px Body/Large Regular, 16/24SubtitleMetadata rather than a second title.
22px 12/16 SemiBold, pill radiusBadgesStatus. The badge and the action should agree with each other.
24px Body/Large Regular, 16/24BodyClamped. If it needs more than three lines the card is the wrong container.
38px One primary button, 38px tallActionOne only. A second button means the card is doing two jobs.

Spacing

Three rules, two values. The padding is one value on all four edges, gaps tighten between related lines and open between groups. That is the whole spacing of the card.

Title
Optional subtitle
NeutralInfo

The body of a card provides supporting text that expands on the title and gives users helpful information or context.

Card padding is 16px all round the content. Small cards drop to 8px.

16px
--sprout-spacing-m
Card padding
All four edges, one value. Small cards drop to 8, because at 175px wide 16 on each side leaves too little for a title.
8px
--sprout-spacing-xs
Between related lines
Title to subtitle, and subtitle to badges. They belong to the heading, so they close up and read as one block.
16px
--sprout-spacing-m
Between groups
Badges to body, and body to action. Each is a new group, so the gap opens to match the padding.

Media and the gradient foot

Media is always 4:3 and cropped to cover. A gradient sits over it so the overflow control and anything on the image stay legible whatever the photograph does.

Legible down here
Transparent to black, 60 to 100%
.card-media {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gradient-overlay {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 1) 100%
  );
  pointer-events: none;
}

pointer-events: none matters: without it the overlay swallows the tap that should reach the card. And the ramp only starts at the 60% mark, where white text is 3.95:1. Keep text and controls below it, and keep them large. Small text high on a photograph has no contrast guarantee at all.

Padding is 16px all round the content. Small cards drop to 8px, because at 175px wide 16 on each side leaves too little for a title.

Size

Three widths. The media stays 4:3 at every one, so the card scales without the image recomposing.

Title
Small · 175
Title
Optional subtitle
Medium · 240
Title
Optional subtitle

The body of a card provides supporting text that expands on the title and gives users helpful information or context.

Large · 360
Size
Width
Content padding
Where it is used
Small
175px
8px
Two up galleries on a 393px screen, 8px gutter inside 16px margins. Title only.
Medium
240px
16px
Horizontal scrollers and recently visited rows.
Large
360px
16px
The full width card on mobile, and the default on web.

Slots and order

There are no card styles. There are slots, each one optional except the title, in an order that never changes. That answers the only question a card ever raises: not which style to pick, but where a thing goes.

MediaIcon · Overflow
TitleIcon button
Subtitle
Badges
Body
Action

  • The order is fixed. Badges go below the subtitle and above the body, always. There is no card where badges sit above the title.

  • Only the title is required. Everything else is on or off, and the gaps close rather than leaving a hole.

  • The control positions are not interchangeable. Overflow sits on the media, top right. An icon button can sit on the media, top left, or on the title row, right. Each position means something different.

  • One of each. One action, one overflow, one icon button. A second button in a card is a sign the card is doing two jobs.

  • Media is a slot, not a type. A card with no media is just media off, which is what used to be called the Text style.

Try mechange the options and the card rebuilds
Size
Media
Slots
Order 21811

The container

Nothing here is a card decision. It is the surface layer, applied.

Property
Light
Dark
Token
Fill
grey/0 #FFFFFF
grey/900 #1A1A1A
layers/surface
Border
grey/50 #F2F2F2
alpha/white/06
layers/outline variant
, 1px
Shadow
0 1px 2px rgba(0,0,0,.06)
none
Shadow/Surface
Radius
8px (0.5rem)
8px (0.5rem)
border-radius-large

Media

Three kinds of media, and the option of none. Files and folders take an icon on a flat fill rather than a photograph, so a list of documents does not pretend to have imagery.

Image
Image
Video
Video
Document
Icon
No media
The slot is simply off
None

States

Mobile has two: resting and pressed. Web adds hover, focus and selected. None of them change the shadow, because elevation means height, not interaction.

Order 21811
Resting
Order 21811
Hover · web only
Order 21811
Selected · primary outline
Order 21811
Resting
Order 21811
Hover · web only
Order 21811
Selected · primary container
State
Light
Dark
Contrast
Resting
Border
grey/50
Border
alpha/white/06
1.12:1 and 1.18:1. Quiet on purpose.
Hover
Fill
surface-hovered
Border
unchanged
Fill
alpha/white/06
Border
unchanged
1.12:1 in light, 1.18:1 in dark. The fill is the whole signal and the border stays put.
Focus
Ring
2px primary, 2px offset
Ring
2px primary container
Outside the border, so nothing reflows.
Selected
Border
primary #447952
Border
primary container #E1FFAD
5.12:1 in light, 15.84:1 in dark. A state indicator needs 3:1.

Do & Don't

Four decisions that come up every time someone builds one.

✓ Do
Order 21811
Make the whole card the target.

One subject, one way in. The chevron or the card itself opens it, and no separate button is needed to do the same thing.

✕ Don't
Order 21811
Don't add a button that repeats the card.

Details, View and Read more duplicate the tap target they sit inside, and shrink the button below the 48px a gloved hand needs.

✓ Do
Selected
Show selection with the primary outline.

Colour marks the state and the card stays at the height it already had. 5.12:1, well past the 3:1 a state indicator needs.

✕ Don't
Selected
Don't lift the card to select it.

A shadow that changes reads as the card physically moving, and it does nothing at all in dark mode where the shadow is inert.

✓ Do
Legible
Keep text on media in the bottom third.

The gradient only starts at 60%. Below that, white on the darkened foot is 10:1 or better.

✕ Don't
Top of the image
Unreadable
Don't put text high on the image.

Above the 60% mark there is no gradient, so contrast depends entirely on the photograph. A bright sky gives you nothing.

✓ Do
Site drawings
Use an icon for things that have no image.

Folders, PDFs and orders get an icon on a flat fill, so the row reads as documents rather than as missing photographs.

✕ Don't
Site drawings
Don't leave the media empty.

A blank 4:3 block reads as an image that failed to load, and the card looks broken rather than typed.

← PreviousNavigation
Sprout · Aceve Design System · v3.23.1