LayoutBrowse layout components
Card
Universal content container. Header / body / footer slots, with raised, flat, glass, gradient, and interactive variants.
Live preview
Default
Border + soft shadow.
Body content.
Glass
Backdrop saturation + blur.
Body content.
Usage
Adapters:React stableVue stable
index.html
<article class="lm-card">
<header class="lm-card-header">
<h3 class="lm-card-title">Account</h3>
<p class="lm-card-subtitle">Plan + billing</p>
</header>
<div class="lm-card-body">…</div>
<footer class="lm-card-footer">…</footer>
</article>CSS classes (8)
| Class | Description |
|---|---|
lm-card | Base container |
lm-card-raised | Larger elevated shadow |
lm-card-flat | No shadow |
lm-card-glass | Backdrop blur surface |
lm-card-gradient | Soft primary→surface gradient |
lm-card-interactive | Hover lift + primary border |
lm-card-header / -body / -footer | Padded slot regions |
lm-card-title / -subtitle | Typography helpers |
React props (2)
| Prop | Type | Default | Description |
|---|---|---|---|
variant | default | raised | flat | glass | gradient | — | — |
interactive | boolean | — | — |
Accessibility
- Use semantic <article> when card is self-contained content.
- Interactive cards must wrap an <a> or <button> for the focusable target.
Spotted something wrong? Edit this entry on GitHub.