Card

A structured content container with header, body, and footer zones for grouping related content. Cards are Geist-style bordered surfaces (page background plus a 1px border, not a gray fill) and stay inert on hover unless you opt in with hoverable.

Use when you need to group related content into a bordered surface with title, description, body, and footer zones: <r-card> gives you those slots plus an optional hoverable interactive state.

Quick Start

Basic Usage

tag

Body content goes in the default slot.

View notes

<r-card heading="Card title" description="Optional subtitle">
  <span slot="extra">tag</span>
  <p>Body content goes in the default slot.</p>
  <a slot="footer" href="#">View notes</a>
</r-card>

API Reference

Properties

Property	Type	Default	Description
`heading`	`string`	`''`	Card heading, shown at the top of the header. Hidden when empty.
`description`	`string`	`''`	Subtitle rendered below the title. Hidden when empty.
`hoverable`	`boolean`	`false`	Interactive card: hover darkens the border and lifts to the elevated shadow.
`sheet`	`string`	`''`	CSS injected into the card's shadow DOM.

Heading `heading`

The card heading, shown at the top of the header. Hidden when empty.

Body content.

<r-card heading="Only a title">
  <p>Body content.</p>
</r-card>

Description `description`

A subtitle rendered below the title. Hidden when empty. When neither title nor description is set, the whole header is hidden.

Body content.

<r-card heading="Title" description="A short supporting subtitle">
  <p>Body content.</p>
</r-card>

Interactive Card `hoverable`

Cards don't react to hover by default. Add the hoverable attribute on cards that are actually clickable: on hover the border darkens one step on the gray ladder (--ran-color-border → --ran-color-border-hover) and the surface takes the quiet elevated shadow (--ran-shadow-elevated).

The border darkens and the card lifts slightly.

<r-card hoverable heading="Hoverable card" description="Hover me">
  <p>The border darkens and the card lifts slightly.</p>
</r-card>

hoverable is purely presentational: gate it to cards that respond to clicks, and keep non-interactive cards inert.

External Styles `sheet`

CSS injected into the card's shadow DOM. It follows the same sheet convention used by every other ranui component.

<r-card heading="Themed card" sheet=".ran-card { background: #f6ffed; }">
  <p>Body content.</p>
</r-card>

Slots

Slot	Description
(default)	Body content, rendered in the card body.
`extra`	Right side of the header: badges, links, or actions.
`footer`	Footer content. The footer is hidden until this slot has assigned nodes.

CSS Parts

The card exposes these ::part() hooks for external styling:

Part	Description
`card`	The outer card container.
`header`	The header row.
`title`	The title text.
`description`	The subtitle text.
`extra`	The `extra` slot in the header.
`body`	The body region (default slot).
`footer`	The footer region (`footer` slot).

The following CSS variables can be overridden: --ran-card-display, --ran-card-min-height, --ran-card-gap, --ran-card-padding, --ran-card-radius, --ran-card-background, --ran-card-border-color, --ran-card-shadow, --ran-card-hover-border-color, --ran-card-hover-shadow (the last two apply with hoverable), --ran-card-title-color, --ran-card-title-font-size, --ran-card-title-font-weight, --ran-card-description-color, --ran-card-description-font-size.

r-card {
  --ran-card-background: var(--surface-2);
  --ran-card-radius: 12px;
  --ran-card-min-height: 148px;
}
r-card::part(header) {
  border-bottom: 1px solid var(--line);
}

Events

The card is a passive container and dispatches no custom events.

Best Practices

Title & Description: Use title for the heading and description for a short supporting subtitle; omit both to hide the header entirely.
Body Content: Place primary content in the default slot.
Header Actions: Use the extra slot for badges, links, or actions aligned to the right of the header.
Footer: Use the footer slot for secondary actions or links; it stays hidden until you slot content into it.
Hover Feedback: Add hoverable only to cards that are clickable; non-interactive cards must not react to hover.
Theming: Prefer CSS variables and ::part() over the sheet attribute for reusable styling.