Standard duskmoon implemented 6 demos

Card

Card groups related content and actions into a small self-contained surface.

Import @duskmoon-dev/components/card

3 API sections

2 documented props

4 behavior scenarios

Key API

appearancepadding

Usage

When to use

Use it to clarify state, metadata, content hierarchy, or loading without creating a new workflow.
Pair it with semantic content so visual treatment never becomes the only source of meaning.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Visual hierarchy

Focuses on status, metadata, empty/loading states, or content grouping without owning application state.

Theme integration

Uses DuskMoon tokens so the component follows the active docs theme.

Primary API surface

Card is most often configured through `appearance`, `padding`.

Covered behavior

Renders children correctly

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

DuskMoon Card

Basic usage

authored

Import the component stylesheet and Card from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Card } from "@duskmoon-dev/components/card";

export function Example() {
  return (<Card
  appearance="elevated"
>
  DuskMoon Card
</Card>);
}

Preview

DuskMoon Card

Renders children correctly

test-backed

Card scenario from the component test coverage: renders children correctly.

Source

import "@duskmoon-dev/components/styles.css";
import { Card } from "@duskmoon-dev/components/card";

export function CardRendersChildrenCorrectlyDemo() {
  return (<Card
  // Renders children correctly
  appearance="elevated"
>
  DuskMoon Card
</Card>);
}

Preview

DuskMoon Card

Applies default classes

test-backed

Card scenario from the component test coverage: applies default classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Card } from "@duskmoon-dev/components/card";

export function CardAppliesDefaultClassesDemo() {
  return (<Card
  // Applies default classes
  appearance="elevated"
>
  DuskMoon Card
</Card>);
}

Preview

DuskMoon Card

Applies appearance and padding classes

test-backed

Card scenario from the component test coverage: applies appearance and padding classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Card } from "@duskmoon-dev/components/card";

export function CardAppliesAppearanceAndPaddingDemo() {
  return (<Card
  // Applies appearance and padding classes
  appearance="elevated"
>
  DuskMoon Card
</Card>);
}

Preview

DuskMoon Card

Applies custom className

test-backed

Card scenario from the component test coverage: applies custom classname.

Source

import "@duskmoon-dev/components/styles.css";
import { Card } from "@duskmoon-dev/components/card";

export function CardAppliesCustomClassNameDemo() {
  return (<Card
  // Applies custom className
  appearance="elevated"
>
  DuskMoon Card
</Card>);
}

Preview

Sunshine Theme

DuskMoon Card

Moonlight Theme

DuskMoon Card

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Card
  appearance="elevated"
>
  DuskMoon Card
</Card>
</div>

<div data-theme="moonlight">
  <Card
  appearance="elevated"
>
  DuskMoon Card
</Card>
</div>

API

The API reference below lists every parsed exported type or interface for Card. Start with `appearance`, `padding` for common usage.

Types: packages/components/src/components/card/Card.types.ts Scenarios: packages/components/src/components/card/Card.test.tsx

CardProps interface extends ComponentProps<"div">

Prop	Type	Required	Description
`appearance`	`CardAppearance`	No	appearance configures Card.
`padding`	`CardPadding`	No	padding configures Card.

CardAppearance type

"elevated" | "outline" | "filled"

CardPadding type

"none" | "sm" | "md" | "lg"