Back

Card

Variants

Default

Clay morphism surface with raised outer shadow.

Flat

Subtle border, no shadow. Good for dense layouts.

Elevated

Stronger shadow — use for featured or active cards.

Inset

Pressed / recessed look. Good for selected state.

Composition

Card is a generic clay container — compose any content inside it.

Monthly Revenue

+12%

€ 24,830

Compared to € 22,170 last month.

Hoverable & Clickable

Set Hoverable: true for interactive cards or Href to render as an <a> link.

Hoverable Card

Hover to see clay press effect.

Elevated + Hover

Combines elevated shadow with press.

Link Card →

Rendered as <a href=...>.

Usage

Import from the display package. Variant defaults to "default". Use Class to add padding, grid spans, etc.

@display.Card(display.CardProps{
    Variant:   "elevated", // "default" | "flat" | "elevated" | "inset"
    Hoverable: true,       // adds clay-hover + clay-pressed styles
    Href:      "/detail",  // wraps in <a> (omit for div)
    Class:     "p-6",
}) {
    <h3>Card Title</h3>
    <p>Card body content.</p>
}