Information density preset.
Design system / Component reference
Density Engine
Change vertical rhythm, table density, forms and card padding together.
LIVE COMPONENT REFERENCE
Relaxed, comfortable and compact density
Density changes spacing and component rhythm while retaining the same content and semantic structure.
Actual Xshna CSSResponsive preview
RELAXED
COMFORTABLE
Information density preset.
DENSE
Information density preset.
HTML · COPY AND USE
<div class="xsh-ref-persona-grid"><div class="xsh-app" data-xsh-theme="light" data-xsh-density="relaxed"><p class="xsh-ref-label">RELAXED</p><article class="xsh-card"><strong>Workspace</strong><p>Information density preset.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm">Continue</button></article></div><div class="xsh-app" data-xsh-theme="light" data-xsh-density="comfortable"><p class="xsh-ref-label">COMFORTABLE</p><article class="xsh-card"><strong>Workspace</strong><p>Information density preset.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm">Continue</button></article></div><div class="xsh-app" data-xsh-theme="light" data-xsh-density="dense"><p class="xsh-ref-label">DENSE</p><article class="xsh-card"><strong>Workspace</strong><p>Information density preset.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm">Continue</button></article></div></div>Overview
Set data-xsh-density=relaxed|comfortable|compact|dense on the root. Density controls spacing tokens so most components scale consistently.
Live example
Interactive · Real frameworkAccounts
Adjust layout density from the header.
Activity
Consistent controls and spacing.
Example markup
<div class="xsh-grid xsh-grid-auto xsh-gap-3">
<article class="xsh-card"><h3 class="xsh-h3">Accounts</h3><p class="xsh-muted">Adjust layout density from the header.</p></article>
<article class="xsh-card"><h3 class="xsh-h3">Activity</h3><p class="xsh-muted">Consistent controls and spacing.</p></article>
</div>Production guidance
Dense data displays may need a larger click target for mobile users.
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
Use the documented Xshna classes with semantic HTML rather than replacing native elements unnecessarily.
Compose existing xsh- classes on the appropriate HTML element. Keep content order meaningful when CSS is disabled.
Interactive behavior
Verify focus order, disabled behavior and descriptive labels for interactive patterns.
Load xshna.min.js only if the documented interaction needs it. Your application remains responsible for data, persistence and business rules.
Responsive and localization
Test narrow containers, long translations and user-defined text sizes.
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.