Skip to content
Xshna.cssv1.0.0-beta.2
PlaygroundUtilities

FRAMEWORK REFERENCE / ADVANCED INDEX

Component variant atlas

Browse every documented appearance and sizing selector for the major component families. Click through for behavior, accessibility and full markup.

Ready

Every card below uses a selector present in the shipped framework source. These are individual modifiers; do not infer that all modifiers can be combined arbitrarily. For complex interactive components use their dedicated documentation and JavaScript reference.

Button treatments

Detailed guide ↗
xsh-btn
xsh-btn
xsh-btn-2xl
xsh-btn-2xl
xsh-btn-2xs
xsh-btn-2xs
xsh-btn-block
xsh-btn-block
xsh-btn-danger
xsh-btn-danger
xsh-btn-dashed
xsh-btn-dashed
xsh-btn-elevated
xsh-btn-elevated
xsh-btn-full
xsh-btn-full
xsh-btn-ghost
xsh-btn-ghost
xsh-btn-glass
xsh-btn-glass
xsh-btn-gradient
xsh-btn-gradient
xsh-btn-group
xsh-btn-group
xsh-btn-icon
xsh-btn-icon
xsh-btn-lg
xsh-btn-lg
xsh-btn-link
xsh-btn-link
xsh-btn-md
xsh-btn-md
xsh-btn-outline
xsh-btn-outline
xsh-btn-pill
xsh-btn-pill
xsh-btn-primary
xsh-btn-primary
xsh-btn-secondary
xsh-btn-secondary
xsh-btn-sm
xsh-btn-sm
xsh-btn-soft
xsh-btn-soft
xsh-btn-split
xsh-btn-split
xsh-btn-square
xsh-btn-square
xsh-btn-tonal
xsh-btn-tonal
xsh-btn-xl
xsh-btn-xl
xsh-btn-xs
xsh-btn-xs

Badge styles

Detailed guide ↗
xsh-badge
Preview
xsh-badge-danger
Preview
xsh-badge-dot
Preview
xsh-badge-info
Preview
xsh-badge-lg
Preview
xsh-badge-outline
Preview
xsh-badge-pill
Preview
xsh-badge-soft
Preview
xsh-badge-solid
Preview
xsh-badge-square
Preview
xsh-badge-success
Preview
xsh-badge-warning
Preview
xsh-badge-xs
Preview

Card compositions

Detailed guide ↗
xsh-card
Interface card

Surface variant

xsh-card-borderless
Interface card

Surface variant

xsh-card-feature
Interface card

Surface variant

xsh-card-footer
xsh-card-glass
Interface card

Surface variant

xsh-card-header
Interface card

Surface variant

xsh-card-inset
Interface card

Surface variant

xsh-card-interactive
Interface card

Surface variant

xsh-card-title
Interface card

Surface variant

xsh-alert
InformationUseful feedback
xsh-alert-close
InformationUseful feedback
xsh-alert-content
InformationUseful feedback
xsh-alert-danger
InformationUseful feedback
xsh-alert-success
InformationUseful feedback
xsh-alert-title
InformationUseful feedback
xsh-alert-warning
InformationUseful feedback
xsh-avatar
X
xsh-avatar-lg
X
xsh-avatar-sm
X
xsh-avatar-stack
X
xsh-chip
Design token
xsh-spinner