CardCoreCore card compositions with employee, content, static content, teaser, and responsive variant layouts plus focused edge cases.

Available components

CardContentIcon-led content cards with a tagline, headline, description, and link action.

CardContent

DownloadEnergy report 2026Discover how a compact card can highlight one icon-led topic, keep the title area readable, and still leave room for a clear call to action.Read more

CardContent edge caseIcon-led content card with longer text in its own container.

CardContent edge case

DocumentationEnergy report with longer contextThe description can grow quite a bit before the card loses its shape. This edge case keeps the copy intentionally long so we can confirm the body spacing and action alignment stay stable.Open report

CardContent StaticA static information card with icon, tagline, headline, and description.

CardContent Static

InformationService noteUse the static content variant when the card should present a short, self-contained summary without a navigation action.

CardContent Static edge caseThe static information card with longer content in its own container.

CardContent Static edge case

Status updateService note with more contextEven without an action slot, the card should remain balanced when the description becomes a little longer and wraps across multiple lines.

CardTeaser VerticalEditorial teaser card with a 4:3 image, meta slot, headline, and link action.

CardTeaser Vertical

News12 | 06 | 2026Sustainability in daily operationsTeaser cards pair metadata, a headline, and a single link action for editorial or campaign content.Read more

CardTeaser Vertical edge caseThe vertical editorial teaser with longer content in its own container.

CardTeaser Vertical edge case

News12 | 06 | 2026This headline is intentionally long so we can check wrapping, vertical rhythm, and link placement in a constrained teaser card.This headline is intentionally long so we can check wrapping, vertical rhythm, and link placement in a constrained teaser card.Explore topic

CardTeaser horizontalHorizontal teaser card with a 1:1 image, metadata, and link action.

CardTeaser horizontal

Campaign12 | 06 | 2026Energy for the next generationTeaser cards pair metadata, a headline, and a single link action for editorial or campaign content.Read more

CardTeaser horizontal edge caseThe horizontal teaser with longer content in its own container.

CardTeaser horizontal edge case

Campaign12 | 06 | 2026A longer horizontal headline that still needs to read cleanlyA narrow horizontal card should still keep the image and content legible even when the headline wraps and the action has to sit lower in the flow.Open campaign

CardTeaser responsive variantThe same teaser switches its layout and media aspect ratio across container breakpoints. This reproduces the SSR case with responsive variant and mediaAspectRatio props together.

Responsive variant + aspect ratio { base: 4:3, lg: 1:1 }

Campaign12 | 06 | 2026Responsive layout from mobile to desktopThis card starts vertical in narrow containers and switches to horizontal at the md container breakpoint, using the breakpoint-aware variant prop.Read more

CardTeaser responsive variant edge caseThe responsive teaser switches from vertical to horizontal at the md container breakpoint and keeps the horizontal layout on larger containers.

Responsive variant + aspect ratio (dark)

Campaign12 | 06 | 2026Responsive cards stay readable as the layout switches between stacked and side-by-sideResize the card container to watch the same card switch from the vertical layout in narrow containers to the horizontal layout at the md container breakpoint and above.Open responsive example

CardTeaser responsive variant in a constrained containerA constrained container demonstrates the same responsive API at the sm breakpoint, because this card is intentionally narrower than md.

Constrained responsive variant { base: vertical, sm: horizontal }

Campaign12 | 06 | 2026Responsive layout from mobile to desktopThis card starts vertical in narrow containers and switches to horizontal at the md container breakpoint, using the breakpoint-aware variant prop.Read more