Card

The Card component renders an <article> tag, making it semantically appropriate for self-contained content like blog posts, project summaries, or widgets. It includes built-in named slots for headers and footers to ensure consistent padding and borders across the system.

---

Usage

Basic Usage

The simplest form of a card just wraps content in a bordered box.

<Card padding="sm">
  <Heading renderAs="h3">Simple Card</Heading>
  <Text variant="body-small">This is a basic container for content.</Text>
</Card>

Structured Data (Skills Style) Use the header slot to create a distinct title bar with a gray background. This is ideal for lists, widgets, or grouping small items.

<Card padding="sm">
  {/* Header Slot: Gray background bar */}
  <fragment slot="header">
    <Terminal size={16} />
    <span class="font-bold uppercase">Backend</span>
  </fragment>
  
  {/* Default Slot: Main Content */}
  <Stack type="row" gap="2" wrap>
    <Tag>Go</Tag>
    <Tag>Rust</Tag>
  </Stack>
</Card>

Interactive Projects (Project Style)

Use the interactive prop to add hover elevation and border transitions. Use the footer slot to dock actions to the bottom of the card with a top border.

<Card interactive padding="md">
  <Heading renderAs="h3">Trading Engine</Heading>
  <Text>High-frequency matching engine written in Go.</Text>

  {/* Footer Slot: Bordered bottom area */}
  <div slot="footer" class="flex justify-between">
    <a href="#">View Source</a>
    <ArrowUpRight />
  </div>
</Card>

Props

Props	Type	Default	Description
interactive	boolean	false	If true, adds a hover lift effect and border color transition.
padding	'none' | 'sm' | 'md'	'md'	Controls the internal padding of the main content area.
...	HTMLAttributes	-	Accepts standard HTML attributes (e.g., class, id).

Slots

Slot Name	Description
default	The main content area of the card.
header	Renders a top bar with a distinct background and bottom border.
footer	Renders a bottom area with a top border, ideal for actions.