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.
Default
Default Card
Subtle shadow with background color.
data-variant="elevated"
Elevated Card
Stronger shadow for more emphasis.
data-variant="outlined"
Outlined Card
Border instead of shadow.
data-variant="ghost"
Ghost Card
Transparent, no shadow or border.
Code
<layout-card>
Default card with subtle shadow
</layout-card>
<layout-card data-variant="elevated">
Elevated card with stronger shadow
</layout-card>
<layout-card data-variant="outlined">
Outlined card with border
</layout-card>
<layout-card data-variant="ghost">
Ghost card with no background
</layout-card>
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.
Card Title
Card content goes here. This area expands to fill available space.
<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.
Default
Subtle shadow, solid background.
Elevated
Stronger shadow for emphasis.
Outlined
Border instead of shadow.
Ghost
Transparent background.
Grid Mode Padding Sizes
The data-padding attribute controls spacing in all grid areas.
Small
Compact padding.
Default
Standard padding.
Large
Spacious padding.
Code
<!-- Small padding -->
<layout-card data-padding="s">
<header><h3>Compact</h3></header>
<section><p>Small padding for dense layouts.</p></section>
<footer><button>OK</button></footer>
</layout-card>
<!-- Large padding -->
<layout-card data-padding="l">
<header><h3>Spacious</h3></header>
<section><p>Large padding for prominent content.</p></section>
<footer><button>OK</button></footer>
</layout-card>
Slot Escape Hatch
Use slot="content" for non-semantic elements that should go in the content grid area.
Quote Card
"The only way to do great work is to love what you do."
Code
<layout-card>
<header><h3>Quote Card</h3></header>
<blockquote slot="content">
"The only way to do great work is to love what you do."
</blockquote>
</layout-card>
Padding Variants (Block Mode)
The data-padding attribute controls the internal spacing.
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