Card

Stable

Core layout component using nested components for flexible content organization and composition.

API Reference

c-card

Attribute	Description	Type	Default
`color`	Background color theme	string	`"100"`
`shadow`	Drop shadow intensity	string	`"sm"`
`size`	Card size variant	string	`"md"`
`bordered`	Adds a card border	boolean	`False`
`glass`	Applies glass morphism effect	boolean	`False`
`side`	Horizontal card layout	boolean	`False`
`normal`	Normal card variant	boolean	`False`
`image_full`	Image covers entire card with overlay content	boolean	`False`

Nested Components

Component	File	Description	Attributes
`c-card.header`	`card/header.html`	Card header with optional title, description, and badge	`title`, `description`, `badge`
`c-card.figure`	`card/figure.html`	Card image/figure container	`src`, `alt`
`c-card.body`	`card/body.html`	Main card body wrapper	Standard HTML attrs
`c-card.title`	`card/title.html`	Card title rendered as `<h2>`	Standard HTML attrs
`c-card.actions`	`card/actions.html`	Card actions container	`justify`

shadow

none sm md lg xl 2xl

size

xs sm md lg xl

Semantics: cards render as <div> elements. Wrap them in a <article> when a card represents a standalone piece of content, or use <li> inside a <ul> for card lists.

Images: always provide meaningful alt text on c-card.figure. Use alt="" for purely decorative images.

Actions: ensure action buttons inside c-card.actions have descriptive labels that make sense out of context (e.g. "View details about Product X" rather than just "View").

Examples

Usage


<c-card bordered shadow="md">
  <c-card.body>
    <c-card.title>Title</c-card.title>
    <p>Content</p>
  </c-card.body>
</c-card>

Basic Card Examples

Complete Card Example

This card demonstrates the nested component pattern with all elements: figure, title, content, and actions.

Simple Layout

This demonstrates a card without image using nested components.

<c-card bordered shadow="md">
  <c-card.figure src="https://picsum.photos/400/200" alt="Card image" />
  <c-card.body>
    <c-card.title>Complete Card Example</c-card.title>
    <p>Card content with all nested components.</p>
    <c-card.actions>
      <c-button color="primary">View Details</c-button>
      <c-button variant="ghost">Cancel</c-button>
    </c-card.actions>
  </c-card.body>
</c-card>

Card Modifiers

Bordered

Bordered Card

Card with border styling

Glass Effect

Glass Card

Card with glass morphism effect

Side Layout

Side Card

Horizontal card layout with side-by-side image.

<c-card bordered>...</c-card>

<c-card glass>...</c-card>

<c-card side>
  <c-card.figure src="..." alt="..." />
  <c-card.body>...</c-card.body>
</c-card>

Card with Image

Basic Image Card

Standard image layout.

Image Overlay Card

Image overlay layout.

<!-- Basic image card -->
<c-card>
  <c-card.figure src="https://example.com/image.jpg" alt="Description" />
  <c-card.body>
    <c-card.title>Image Card</c-card.title>
    <p>Card content</p>
  </c-card.body>
</c-card>

<!-- Image full overlay -->
<c-card image_full>
  <c-card.figure src="https://example.com/image.jpg" alt="Description" />
  <c-card.body>
    <c-card.title>Overlay Card</c-card.title>
    <p class="text-white">Content overlays the image</p>
    <c-card.actions>
      <c-button color="primary">Learn More</c-button>
    </c-card.actions>
  </c-card.body>
</c-card>