Card

A quiet container — parchment/white fill, 1px hairline, low warm shadow. Does not float. The feature variant adds a top brass keyline for the most important card; onDark for ink sections.

jsx

<Card eyebrow="Coding harness" title="stirrup">
  Production-grade safety via five deterministic rings.
</Card>
<Card variant="feature" interactive eyebrow="Researcher" title="chiron">…</Card>

Props: variant (default/feature), onDark, interactive (hover wash — nothing moves), eyebrow, title. Free-form children render in the mono body slot.

Preview

Declarations

TypeScript

export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
  /** feature adds a top brass keyline. */
  variant?: 'default' | 'feature';
  onDark?: boolean;
  /** Background wash on hover (no lift, no shadow growth); sets pointer cursor. */
  interactive?: boolean;
  /** Short sentence-case label above the title (brass caption, not uppercase). */
  eyebrow?: React.ReactNode;
  /** Card title (Cormorant display). */
  title?: React.ReactNode;
  className?: string;
  children?: React.ReactNode;
}

/**
 * A quiet content container — parchment/white fill, 1px hairline, low warm
 * shadow. The `feature` variant adds the top brass keyline for the hero card.
 */
export function Card(props: CardProps): React.JSX.Element;