Card

Overview

The s-card attribute provides a structured container for content with optional header, body, and footer sections.

Basic Usage

<article s-card>
  <div s-card-body>Simple card content</div>
</article>

Full Structure

<article s-card>
  <header s-card-header>
    <h3>Card Title</h3>
  </header>
  <div s-card-body>Main card content goes here.</div>
  <footer s-card-footer>
    <button s-btn="primary" s-size="sm">Action</button>
  </footer>
</article>

Card Sections

Attribute	Purpose
s-card	Main card container
s-card-header	Card header area
s-card-body	Main content area
s-card-footer	Footer with actions
s-card-media	Image/media container
s-card-title	Card title text
s-card-subtitle	Subtitle/description

Examples

Simple Card

<article s-card>
  <div s-card-body>
    <h4>Simple Card</h4>
    <p>Just a body section with content.</p>
  </div>
</article>

Card with All Sections

<article s-card>
  <header s-card-header>
    <h3>Project Update</h3>
  </header>
  <div s-card-body>
    <p>The project is progressing well with all milestones on track.</p>
  </div>
  <footer s-card-footer>
    <button s-btn="ghost" s-size="sm">Cancel</button>
    <button s-btn="primary" s-size="sm">View Details</button>
  </footer>
</article>

Card with Media

<article s-card>
  <div s-card-media>
    <img src="/image.jpg" alt="Card image" />
  </div>
  <div s-card-body>
    <h4 s-card-title>Card Title</h4>
    <p s-card-subtitle>A brief description</p>
    <p>More detailed content here.</p>
  </div>
</article>

Variants

Flat Card

No shadow, just a border:

<article s-card="flat">
  <div s-card-body>Flat card with border</div>
</article>

Elevated Card

Higher shadow:

<article s-card="elevated">
  <div s-card-body>Elevated card</div>
</article>

Outline Card

Transparent with strong border:

<article s-card="outline">
  <div s-card-body>Outline card</div>
</article>

Modifiers

Interactive Card

Lift effect on hover:

<article s-card s-interactive>
  <div s-card-body>Hover me!</div>
</article>

Horizontal Layout

Side-by-side media and content:

<article s-card s-horizontal>
  <div s-card-media>
    <img src="/image.jpg" alt="Card image" />
  </div>
  <div s-card-body>
    <h4 s-card-title>Horizontal Card</h4>
    <p>Content beside the image.</p>
  </div>
</article>

Card with Link Overlay

Make the entire card clickable:

<article s-card s-link s-interactive>
  <div s-card-body>
    <h4 s-card-title>
      <a href="/details">Clickable Card</a>
    </h4>
    <p>Click anywhere on the card.</p>
  </div>
</article>

Card Layouts

Card Grid

Responsive grid with auto-fitting columns:

<div s-card-grid>
  <article s-card>
    <div s-card-body>Card 1</div>
  </article>
  <article s-card>
    <div s-card-body>Card 2</div>
  </article>
  <article s-card>
    <div s-card-body>Card 3</div>
  </article>
</div>

Card Stack

Vertical list of cards:

<div s-card-stack>
  <article s-card>
    <div s-card-body>Stacked card 1</div>
  </article>
  <article s-card>
    <div s-card-body>Stacked card 2</div>
  </article>
</div>

How It Works

Cards use CSS custom properties for consistent styling:

:where([s-card]) {
  --_card-bg: var(--s-surface-raised);
  --_card-border: var(--s-border-muted);
  --_card-radius: var(--s-radius-xl);
  --_card-padding: var(--s-space-4);

  background-color: var(--_card-bg);
  border: 1px solid var(--_card-border);
  border-radius: var(--_card-radius);
}

:where([s-card-body]) {
  padding: var(--_card-padding);
}

Customization Examples

Custom Background

<article s-card style="--_card-bg: var(--s-primary-50);">
  <div s-card-body>Tinted card background</div>
</article>

Sharp Corners

[s-card] {
  --_card-radius: 0;
}

All Attributes

Attribute	Purpose	Values
s-card	Card variant	(default), flat, elevated, outline, feature
s-card-header	Header section	N/A
s-card-body	Body section	N/A
s-card-footer	Footer section	N/A
s-card-media	Media container	N/A
s-card-title	Title element	N/A
s-card-subtitle	Subtitle element	N/A
s-interactive	Hover lift effect	Boolean
s-horizontal	Horizontal layout	Boolean
s-link	Link overlay	Boolean
s-size	Card size	sm, lg
s-card-grid	Grid container	N/A
s-card-stack	Stack container	N/A