Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
Card variant examples
<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.
Structured card with header/section/footer
<layout-card> <header><h3>Card Title</h3></header> <section> <p>Content with automatic grid placement.</p> </section> <footer> <button type="button" class="secondary">Cancel</button> <button type="button">Save</button> </footer></layout-card>How it works
<header>maps to theheadergrid area with a bottom border<section>maps to thecontentgrid area (expands to fill)<footer>maps to thefootergrid area with a top border and flex layout for actions- Non-semantic children without a
slotattribute 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.
Grid mode padding variants
<!-- 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.
Slot-based content placement
<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.
Usage Examples
Content Card
Content card with image
<layout-card> <layout-stack data-layout-gap="m"> <div data-media data-layout-ratio="16:9" data-radius="s"> <img src="image.jpg" alt="Card image" loading="lazy" /> </div> <layout-stack data-layout-gap="xs"> <h3>Card Title</h3> <p>Brief description of the card content.</p> </layout-stack> <layout-cluster data-layout-gap="s"> <button type="button">Primary</button> <button type="button" class="secondary">Secondary</button> </layout-cluster> </layout-stack></layout-card>Product Card
Product card with outlined variant
<layout-card data-variant="outlined"> <layout-stack data-layout-gap="m"> <div data-media data-layout-ratio="1:1" data-radius="s"> <img src="product.jpg" alt="Product image" loading="lazy" /> </div> <layout-stack data-layout-gap="xs"> <small>Category</small> <strong>Product Name</strong> <strong>$49.99</strong> </layout-stack> <button type="button">Add to Cart</button> </layout-stack></layout-card>Stat Cards
Stat cards with elevated variant
<layout-grid data-layout-min="15rem" data-layout-gap="m"> <layout-card data-variant="elevated" data-padding="l"> <layout-stack data-layout-gap="xs"> <small>Total Revenue</small> <strong>$45,231</strong> <small>+12.5% from last month</small> </layout-stack> </layout-card></layout-grid>Nested Cards
Nested cards with auto background
<layout-card data-padding="l"> <layout-stack data-layout-gap="m"> <h3>Outer Card</h3> <p>Nested cards get a raised surface color.</p> <layout-card> <strong>Nested Card</strong> </layout-card> </layout-stack></layout-card>Profile Card
Profile card with centered content
<layout-card data-variant="outlined"> <layout-stack data-layout-gap="m" data-layout-align="center"> <user-avatar data-size="xl"> <img src="avatar.jpg" alt="Jane Doe" /> </user-avatar> <layout-stack data-layout-gap="xs" data-layout-align="center"> <strong>Jane Doe</strong> <small>Product Designer</small> </layout-stack> <layout-cluster data-layout-gap="xs"> <layout-badge>UX</layout-badge> <layout-badge>UI</layout-badge> <layout-badge>Figma</layout-badge> </layout-cluster> </layout-stack></layout-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
articleif the card represents standalone content
Related
<layout-stack>— Vertical stacking layout<layout-grid>— Auto-fit grid layout<layout-cluster>— Horizontal grouping with wrapping<layout-badge>— Badge/tag component<user-avatar>— Avatar display component