Skip navigation

Components / Surfaces & media

Card

An enclosed surface with optional media, header and content regions. Add Exhibit when this surface needs artwork composition; Exhibit also works on Group.

article.card > figure.figure + div.content
Try the options

About media, header color and checklist controls

Header: when enabled, the media and introduction are inside the same header region. Its color covers their shared padding; it does not recolor the image pixels.

Edges: media touches the Card edges by default. has-media-padding adds breathing room in either orientation. is-padded pads the whole Card for a composition; there is no separate Panel.

Spare height: choose “Equal-height row”, then toggle image fill. The image takes the height supplied by its taller neighbor instead of stretching the text region.

Checklist: enable it, choose one item, and change that check’s color. The generated HTML puts the color class on that li.

Blue mountains beneath a golden sun

Media, text and optional header regions share one surface.

<article class="card"><figure class="figure"><img src="/assets/images/pattern-example.svg" width="800" height="500" alt="Blue mountains beneath a golden sun"></figure><div class="content"><h3 class="like-h4">Example Card</h3><p>Media, text and optional header regions share one surface.</p></div></article>
Class or attributeWhat it does
is-light / is-outlinedSecondary surface or transparent fill.
is-darkOpt into the dark section palette on a Card, including Card.Exhibit.
is-borderlessRemove the border only.
is-dashedUse a dashed border without changing the Card surface or content; choose this instead of is-borderless.
has-shadowOptional elevation; there is no separate Box.
is-unboxedEditorial treatment without padding, border, fill or rounded enclosure.
is-paddedPad the whole Card for a composition, with the same surface options. This replaces Panel.
is-horizontalMedia beside Content on desktop; stack on mobile.
has-media-paddingAdd space around media in either orientation, without doubling the gap next to padded text.
is-reversedWith horizontal layout, media sits right on desktop.
card-headerHeader region owns its media and introduction. A color on the header covers the media padding and text area together; only the body grows in equal-height rows.
is-light + plain card-headerLight-grey body with a white header; the two regions are independent.
figure.is-fillIn a stretched Card, let media take the remaining height instead of stretching the text region.
checklist + tooltip + pricePricing is a Card composition; try these choices in the controls above.
exhibit + is-immersiveCombine Card with Exhibit for artwork-led compositions.
is-top-left/center/right / is-center-left/center/right / is-bottom-left/center/rightPlace immersive content. Use is-center for the exact center. Bottom-left is the fallback; the artwork controls emit an explicit choice.