layout-card

Container component with background, padding, and visual variants. Simple block mode by default; add header/section/footer children to activate structured grid mode.

Attributes

Attribute Values Default Description
data-variant default, elevated, outlined, ghost default Visual style variant
data-padding none, s, m, l, xl m Internal padding (applies to children in grid mode)
data-max narrow, content, wide - Max-width constraint for centered card patterns

Block Mode

By default, layout-card is a simple block container with padding. Use it for any content that just needs a card surface.

Grid Mode (Structured Cards)

Add <header>, <section>, or <footer> children to automatically activate CSS Grid with named areas. No extra attributes needed — the :has() selector detects semantic children.

How it works

  • <header> maps to the header grid area with a bottom border
  • <section> maps to the content grid area (expands to fill)
  • <footer> maps to the footer grid area with a top border and flex layout for actions
  • Non-semantic children without a slot attribute are implicitly placed in the content area

Grid Mode Variants

All visual variants work in both block and grid modes.

Grid Mode Padding Sizes

The data-padding attribute controls spacing in all grid areas.

Slot Escape Hatch

Use slot="content" for non-semantic elements that should go in the content grid area.

Padding Variants (Block Mode)

The data-padding attribute controls the internal spacing.

Usage Examples

Content Card

Product Card

Stat Cards

Nested Cards

Profile Card

Container Queries

In grid mode, the card uses container-type: inline-size and automatically adjusts padding and typography when placed in narrow containers (under 300px). Headings shrink and footer actions stack vertically.

Accessibility

  • In grid mode, use semantic HTML elements (header, section, footer) for proper document structure
  • Include headings in the header area for screen reader navigation
  • Footer actions should be keyboard accessible
  • Consider wrapping in article if the card represents standalone content

Related
↑