Built with care.
Composable surface, title and supporting copy.
Read reference ↗Components / Component reference
Cards
Flat, elevated, statistical and media cards that integrate with layout and DNA systems.
LIVE COMPONENT REFERENCE
Card surface variants
Each card retains semantic content and composition. The modifier changes presentation, not interaction semantics. Interactive cards still need real links or buttons.
Actual Xshna CSSResize to test wrapping
Built with care.
Composable surface, title and supporting copy.
Read reference ↗Built with care.
Composable surface, title and supporting copy.
Read reference ↗Built with care.
Composable surface, title and supporting copy.
Read reference ↗Built with care.
Composable surface, title and supporting copy.
Read reference ↗HTML · COPY AND USE
<div class="xsh-ref-flex"><article class="xsh-card xsh-card-interactive xsh-ref-card"><span class="xsh-ref-label">INTERACTIVE</span><h3>Built with care.</h3><p>Composable surface, title and supporting copy.</p><a href="../pages/cards.html">Read reference ↗</a></article><article class="xsh-card xsh-card-borderless xsh-ref-card"><span class="xsh-ref-label">BORDERLESS</span><h3>Built with care.</h3><p>Composable surface, title and supporting copy.</p><a href="../pages/cards.html">Read reference ↗</a></article><article class="xsh-card xsh-card-inset xsh-ref-card"><span class="xsh-ref-label">INSET</span><h3>Built with care.</h3><p>Composable surface, title and supporting copy.</p><a href="../pages/cards.html">Read reference ↗</a></article><article class="xsh-card xsh-card-glass xsh-ref-card"><span class="xsh-ref-label">GLASS</span><h3>Built with care.</h3><p>Composable surface, title and supporting copy.</p><a href="../pages/cards.html">Read reference ↗</a></article><article class="xsh-card xsh-card-feature xsh-ref-card"><span class="xsh-ref-label">FEATURE</span><h3>Built with care.</h3><p>Composable surface, title and supporting copy.</p><a href="../pages/cards.html">Read reference ↗</a></article></div>LIVE COMPONENT REFERENCE
Header, body and footer slots
A reusable content structure with clear action placement. Avoid clickable wrappers around other interactive children.
Actual Xshna CSSResize to test wrapping
Operational overview
Place descriptions, charts, media or user controls here. Keep card actions distinct.
HTML · COPY AND USE
<article class="xsh-card xsh-ref-wide-card"><header class="xsh-card-header"><strong>Workspace report</strong><span class="xsh-badge xsh-badge-success">Ready</span></header><div class="xsh-ref-card-body"><h3>Operational overview</h3><p>Place descriptions, charts, media or user controls here. Keep card actions distinct.</p></div><footer class="xsh-card-footer"><button type="button" class="xsh-btn xsh-btn-primary xsh-btn-sm" >Export report</button><button type="button" class="xsh-btn xsh-btn-ghost xsh-btn-sm" >Dismiss</button></footer></article>Overview
Compose cards using xsh-card, optional data-xsh-elevation, and xsh-card-header, xsh-card-footer or xsh-stat.
Live example
Interactive · Real frameworkRevenue
Live₹84,560
This month
Visitors
12,480+12.4%
Example markup
<div class="xsh-grid xsh-grid-cols-1 xsh-md-grid-cols-2 xsh-gap-4">
<article class="xsh-card" data-xsh-elevation="raised"><div class="xsh-card-header"><h3 class="xsh-h3">Revenue</h3><span class="xsh-badge">Live</span></div><p class="xsh-stat-value">₹84,560</p><p class="xsh-muted">This month</p></article>
<article class="xsh-stat"><p class="xsh-stat-label">Visitors</p><strong class="xsh-stat-value">12,480</strong><p class="xsh-stat-trend">+12.4%</p></article>
</div>Production guidance
Cards should not become clickable unless a link or button provides keyboard-accessible navigation.
Customize this component through --xsh-* CSS tokens, data-xsh-* configuration attributes and documented xsh-* utilities. Use the optional JavaScript distribution only when an interactive behavior is needed.
Build with confidenceOpen interactive design playground →
Complete selector inventory
These selectors exist in the current distribution. An entry in this table does not imply that arbitrary modifier combinations are meaningful; use the examples above for the intended composition.
| Class | Purpose | Delivery |
|---|---|---|
.xsh-card | Core component | CSS-only |
.xsh-card-borderless | Composable modifier / structure class | CSS-only |
.xsh-card-feature | Composable modifier / structure class | CSS-only |
.xsh-card-footer | Composable modifier / structure class | CSS-only |
.xsh-card-glass | Composable modifier / structure class | CSS-only |
.xsh-card-header | Composable modifier / structure class | CSS-only |
.xsh-card-inset | Composable modifier / structure class | CSS-only |
.xsh-card-interactive | Composable modifier / structure class | CSS-only |
.xsh-card-title | Composable modifier / structure class | CSS-only |
Implementation details
Semantic structure
A card is a container, not automatically a link.
Compose existing xsh- classes on the appropriate HTML element. Keep content order meaningful when CSS is disabled.
Interactive behavior
If the full card is interactive, ensure a single coherent focus target.
Load xshna.min.js only if the documented interaction needs it. Your application remains responsible for data, persistence and business rules.
Responsive and localization
Avoid nesting actionable elements inside a wrapping button or anchor.
Test 320px-wide viewports, container-constrained instances, keyboard zoom, longer translations and right-to-left text where relevant.
Theme and customization
Use --xsh-* CSS variables for theme values and data-xsh-design / data-xsh-density on the xsh-app root.
Prefer design tokens over hard-coded overrides so components remain coherent across personalities.
What to verify before shipping
- Confirm every documented class used by the feature exists in the release CSS.
- Navigate controls using Tab, Shift+Tab, Enter, Space and Escape where appropriate.
- Test with reduced motion, high contrast, 200% text zoom and a narrow mobile viewport.
- Verify disabled, loading, empty, error and long-content states where relevant.
- Check actual application behavior independently of the preview: these examples use illustrative data.