Flexible content containers. Use <article> as the semantic element with class card. The framework styles header, footer, and child elements automatically — no sub-classes needed.
This is the card body content. It describes the purpose or details of the card item clearly and concisely.
<article class="card">
<header>
<h3>Card Title</h3>
</header>
<p>Card content goes here.</p>
<footer>
<button class="primary">Action</button>
<button class="secondary">Cancel</button>
</footer>
</article>Place an axicon as the first child — the framework sizes and colors it automatically:
Integrate seamlessly with our REST API and webhooks.
Your account identity has been confirmed.
<article class="card">
<span class="axicon render" data-name="Code"></span>
<h3>Developer API</h3>
<p>Integrate seamlessly with our REST API.</p>
</article>Use <figure> as the first child for media previews — the framework handles the negative margin and rounding automatically:
The figure element at the top bleeds edge-to-edge automatically.
<article class="card">
<figure>
<img src="cover.jpg" alt="Cover">
</figure>
<header>
<h3>Media Card</h3>
</header>
<p>The figure element bleeds edge-to-edge automatically.</p>
</article>The ghost modifier creates a transparent, borderless card — useful for icon-centered feature lists:
15.3 KB gzipped.
WCAG 2.1 AA by default.
One class per component.
<div class="card ghost">
<span class="axicon render primary" data-name="Zap"></span>
<h4>Fast</h4>
<p>15.3 KB gzipped.</p>
</div>The filled modifier applies the primary container background — ideal for highlighted or featured content:
This card uses the primary container color, automatically adapting to light and dark themes.
<article class="card filled">
<header>
<h3>Featured Content</h3>
</header>
<p>Highlighted content that adapts to the theme.</p>
<footer>
<button class="primary">Learn More</button>
</footer>
</article>Use <a> with class card for fully-linked cards:
The entire card is the link. Keyboard and screen reader accessible.
<a href="/article" class="card">
<header>
<h3>Read Article ↗</h3>
</header>
<p>The entire card is the link.</p>
</a>Wrap cards in a .grid container for responsive auto-layout:
<div class="grid">
<article class="card">...</article>
<article class="card">...</article>
<article class="card">...</article>
</div>The card follows natural document order. The framework automatically styles each child element based on its semantic role — no sub-classes ever needed:
| Element | Role | Automatic Styling |
|---|---|---|
article.card | Container | Surface, border, radius, shadow, flex column |
header | Title area | Margin bottom |
h3, h4 | Title | Size, weight, color, spacing |
p | Body text | Color, line height, reading width |
figure | Media | Negative bleed margin, overflow hidden |
footer | Actions | Pushed to bottom via margin-top: auto |
.axicon (first child) | Icon | Size 2.5rem, primary color, margin bottom |
<article> for self-contained content — it has implicit landmark meaning<a class="card"> for clickable cards — never onclick on a div:focus-visibleh3 inside cards, not h1 or h2figure must have meaningful alt textUse the glass modifier to create beautiful, frosted-glass depth effects, perfect for overlays or vibrant backgrounds:
This card blends into the vibrant background using CSS backdrop-filter.
<article class="card glass">
<header><h3>Glassmorphic Design</h3></header>
<p>Frosted glass effect applied.</p>
</article>The Card component is designed for versatile implementation across modern web applications. Ideal scenarios include: