Natcore LogoNatCorev2 — In Progress
v2 — In Progress

Card

Sectioned content containers with variant-driven tone styling and an optional hover modifier. Mark child sections with data-slot attributes to inherit the card layout structure.

At a glance

Overview

Structured content

Add slot-marked children to apply the card section spacing automatically.

Header, content, and footer are documented slots.Preview
Interactive

Hover-ready card

Compose card-hover with any variant when the whole surface should feel clickable.

card-hover + card-outline/accentPreview

Playground

Controls
Preview
Interactive

Release summary

Switch variants, palettes, and hover behavior to see how the card surface and generated markup change together.

Hover disabledcard-soft/primary
Codehtml
<article class="card-soft/primary">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Interactive
    </span>
    <h3 class="text-lg font-semibold">Release summary</h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Switch variants, palettes, and hover behavior to see
      how the card surface and generated markup change
      together.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>Hover disabled</span>
    <span>card-soft/primary</span>
  </div>
</article>

Card

component

Applies the card container styling using the selected variant and tone palette. Child sections opt into the built-in layout using documented slots.

Pattern
card-{variant}[/{palette}]
Variant
solid/soft/outline/ghost
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited

Solid

Primary

Solid card

Use the primary palette for high-emphasis summaries, selections, or key navigation points.

card-solid/primaryPreview
Secondary

Supporting content

Secondary works well for related panels or secondary summaries in a denser layout.

card-solid/secondaryPreview
Accent

Highlight a state

Accent cards are useful when you need a little more energy or a stronger semantic distinction.

card-solid/accentPreview
Surface

Low-noise layout

Surface keeps the card present while preserving contrast for nested text and controls.

card-solid/surfacePreview
Codehtml
<article class="card-solid/primary">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Primary
    </span>
    <h3 class="text-lg font-semibold">Solid card</h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Use the primary palette for high-emphasis summaries,
      selections, or key navigation points.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-solid/primary</span>
    <span>Preview</span>
  </div>
</article>
<article class="card-solid/secondary">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Secondary
    </span>
    <h3 class="text-lg font-semibold">
      Supporting content
    </h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Secondary works well for related panels or secondary
      summaries in a denser layout.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-solid/secondary</span>
    <span>Preview</span>
  </div>
</article>
<article class="card-solid/accent">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Accent
    </span>
    <h3 class="text-lg font-semibold">Highlight a state</h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Accent cards are useful when you need a little more
      energy or a stronger semantic distinction.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-solid/accent</span>
    <span>Preview</span>
  </div>
</article>
<article class="card-solid/surface">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Surface
    </span>
    <h3 class="text-lg font-semibold">Low-noise layout</h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Surface keeps the card present while preserving
      contrast for nested text and controls.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-solid/surface</span>
    <span>Preview</span>
  </div>
</article>

Soft

Primary

Soft card

Use the primary palette for high-emphasis summaries, selections, or key navigation points.

card-soft/primaryPreview
Secondary

Supporting content

Secondary works well for related panels or secondary summaries in a denser layout.

card-soft/secondaryPreview
Accent

Highlight a state

Accent cards are useful when you need a little more energy or a stronger semantic distinction.

card-soft/accentPreview
Surface

Low-noise layout

Surface keeps the card present while preserving contrast for nested text and controls.

card-soft/surfacePreview
Codehtml
<article class="card-soft/primary">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Primary
    </span>
    <h3 class="text-lg font-semibold">Soft card</h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Use the primary palette for high-emphasis summaries,
      selections, or key navigation points.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-soft/primary</span>
    <span>Preview</span>
  </div>
</article>
<article class="card-soft/secondary">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Secondary
    </span>
    <h3 class="text-lg font-semibold">
      Supporting content
    </h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Secondary works well for related panels or secondary
      summaries in a denser layout.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-soft/secondary</span>
    <span>Preview</span>
  </div>
</article>
<article class="card-soft/accent">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Accent
    </span>
    <h3 class="text-lg font-semibold">Highlight a state</h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Accent cards are useful when you need a little more
      energy or a stronger semantic distinction.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-soft/accent</span>
    <span>Preview</span>
  </div>
</article>
<article class="card-soft/surface">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Surface
    </span>
    <h3 class="text-lg font-semibold">Low-noise layout</h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Surface keeps the card present while preserving
      contrast for nested text and controls.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-soft/surface</span>
    <span>Preview</span>
  </div>
</article>

Outline

Primary

Outline card

Use the primary palette for high-emphasis summaries, selections, or key navigation points.

card-outline/primaryPreview
Secondary

Supporting content

Secondary works well for related panels or secondary summaries in a denser layout.

card-outline/secondaryPreview
Accent

Highlight a state

Accent cards are useful when you need a little more energy or a stronger semantic distinction.

card-outline/accentPreview
Surface

Low-noise layout

Surface keeps the card present while preserving contrast for nested text and controls.

card-outline/surfacePreview
Codehtml
<article class="card-outline/primary">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Primary
    </span>
    <h3 class="text-lg font-semibold">Outline card</h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Use the primary palette for high-emphasis summaries,
      selections, or key navigation points.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-outline/primary</span>
    <span>Preview</span>
  </div>
</article>
<article class="card-outline/secondary">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Secondary
    </span>
    <h3 class="text-lg font-semibold">
      Supporting content
    </h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Secondary works well for related panels or secondary
      summaries in a denser layout.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-outline/secondary</span>
    <span>Preview</span>
  </div>
</article>
<article class="card-outline/accent">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Accent
    </span>
    <h3 class="text-lg font-semibold">Highlight a state</h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Accent cards are useful when you need a little more
      energy or a stronger semantic distinction.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-outline/accent</span>
    <span>Preview</span>
  </div>
</article>
<article class="card-outline/surface">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Surface
    </span>
    <h3 class="text-lg font-semibold">Low-noise layout</h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Surface keeps the card present while preserving
      contrast for nested text and controls.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-outline/surface</span>
    <span>Preview</span>
  </div>
</article>

Ghost

Primary

Ghost card

Use the primary palette for high-emphasis summaries, selections, or key navigation points.

card-ghost/primaryPreview
Secondary

Supporting content

Secondary works well for related panels or secondary summaries in a denser layout.

card-ghost/secondaryPreview
Accent

Highlight a state

Accent cards are useful when you need a little more energy or a stronger semantic distinction.

card-ghost/accentPreview
Surface

Low-noise layout

Surface keeps the card present while preserving contrast for nested text and controls.

card-ghost/surfacePreview
Codehtml
<article class="card-ghost/primary">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Primary
    </span>
    <h3 class="text-lg font-semibold">Ghost card</h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Use the primary palette for high-emphasis summaries,
      selections, or key navigation points.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-ghost/primary</span>
    <span>Preview</span>
  </div>
</article>
<article class="card-ghost/secondary">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Secondary
    </span>
    <h3 class="text-lg font-semibold">
      Supporting content
    </h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Secondary works well for related panels or secondary
      summaries in a denser layout.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-ghost/secondary</span>
    <span>Preview</span>
  </div>
</article>
<article class="card-ghost/accent">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Accent
    </span>
    <h3 class="text-lg font-semibold">Highlight a state</h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Accent cards are useful when you need a little more
      energy or a stronger semantic distinction.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-ghost/accent</span>
    <span>Preview</span>
  </div>
</article>
<article class="card-ghost/surface">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Surface
    </span>
    <h3 class="text-lg font-semibold">Low-noise layout</h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Surface keeps the card present while preserving
      contrast for nested text and controls.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-ghost/surface</span>
    <span>Preview</span>
  </div>
</article>

Hover Modifier

modifier

Adds an interactive hover treatment by animating background, foreground, border color, and scale. Compose it with any card variant.

Pattern
card-hover

Composed with variants

Use card-hover alongside a variant class when the entire card surface should feel clickable.
Default state

Interactive summary

The hover utility animates background, foreground, border color, and scale together.

card-hover card-soft/primaryPreview
Subtle

Lightweight affordance

Ghost cards stay quiet until pointer hover, which is useful for secondary navigation or preview rows.

card-hover card-ghost/surfacePreview
Codehtml
<article class="card-hover card-soft/primary">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Default state
    </span>
    <h3 class="text-lg font-semibold">
      Interactive summary
    </h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      The hover utility animates background, foreground,
      border color, and scale together.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-hover card-soft/primary</span>
    <span>Preview</span>
  </div>
</article>
<article class="card-hover card-ghost/surface">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Subtle
    </span>
    <h3 class="text-lg font-semibold">
      Lightweight affordance
    </h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Ghost cards stay quiet until pointer hover, which is
      useful for secondary navigation or preview rows.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>card-hover card-ghost/surface</span>
    <span>Preview</span>
  </div>
</article>

Card Slots

slot

Add data-slot="header", data-slot="content", and data-slot="footer" to child elements to apply the card section spacing and edge dividers.

header
[data-slot="header"]
content
[data-slot="content"]
footer
[data-slot="footer"]

Structured content

The slot attributes preserve the existing card section semantics while keeping the builder metadata explicit for generated docs.
Layout

Slot-based sections

Mark child elements with data-slot attributes to opt into shared section padding and edge dividers.

data-slot="header" | "content" | "footer"Preview
Codehtml
<article class="card-soft/secondary">
  <div data-slot="header" class="flex flex-col gap-1">
    <span
      class="text-xs tracking-[0.18em] uppercase opacity-70"
    >
      Layout
    </span>
    <h3 class="text-lg font-semibold">
      Slot-based sections
    </h3>
  </div>
  <div
    data-slot="content"
    class="space-y-3 text-sm opacity-90"
  >
    <p>
      Mark child elements with data-slot attributes to opt
      into shared section padding and edge dividers.
    </p>
  </div>
  <div
    data-slot="footer"
    class="flex items-center justify-between gap-3 text-xs opacity-75"
  >
    <span>data-slot="header" | "content" | "footer"</span>
    <span>Preview</span>
  </div>
</article>

API Reference

Classes

componentcard-{variant}[/{palette}]
component
Applies the card container styling using the selected variant and tone palette. Child sections opt into the built-in layout using documented slots.
Variant
solid/soft/outline/ghost
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited
componentcard-hover
component
Adds an interactive hover treatment by animating background, foreground, border color, and scale. Compose it with any card variant.

Slots

slotheader
slot
Add data-slot="header", data-slot="content", and data-slot="footer" to child elements to apply the card section spacing and edge dividers.
selector:[data-slot="header"]
slotcontent
slot
Add data-slot="header", data-slot="content", and data-slot="footer" to child elements to apply the card section spacing and edge dividers.
selector:[data-slot="content"]
slotfooter
slot
Add data-slot="header", data-slot="content", and data-slot="footer" to child elements to apply the card section spacing and edge dividers.
selector:[data-slot="footer"]
On this page