Display and feedback

Card

Neutral, accent, and interactive content surface.

Live example

Default

Quiet structure.

Elevated

Raised context.

Outlined

Defined boundary.

Interactive

Linked surface.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Card } from "@cofob/design-system-react";

/**
 * Complete Card parameter reference.
 * @param variant
 *   type: "default" | "elevated" | "outlined" | "interactive"
 *   default: "default"
 *   example: "secondary"
 * @param padding
 *   type: "none" | "sm" | "md" | "lg"
 *   default: "md"
 *   example: "lg"
 * @param href
 *   type: string
 *   default: —
 *   example: "/guide"
 * @param as
 *   type: element name (adapter-specific union)
 *   default: "div"
 *   example: "article"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param surface attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function CardExample() {
  return (
    <Card>Content</Card>
  );
}

Svelte

<script lang="ts">
  import { Card } from "@cofob/design-system-svelte";

  // Complete Card parameter reference.
  // variant
  //   type: "default" | "elevated" | "outlined" | "interactive"
  //   default: "default"
  //   example: "secondary"
  // padding
  //   type: "none" | "sm" | "md" | "lg"
  //   default: "md"
  //   example: "lg"
  // href
  //   type: string
  //   default: —
  //   example: "/guide"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // surface attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Card>Content</Card>

HTML

<!--
  Complete Card parameter reference.
  variant
    type: "default" | "elevated" | "outlined" | "interactive"
    default: "default"
    example: "secondary"
  padding
    type: "none" | "sm" | "md" | "lg"
    default: "md"
    example: "lg"
  href
    type: string
    default: —
    example: "/guide"
  as
    type: element name (adapter-specific union)
    default: "div"
    example: "article"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  surface attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<article class="cf-card" data-padding="md">Content</article>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-card`
Adapters	Native · React · Svelte
Primary props	variant · padding · href · as · children · surface attributes
Documented states	default · outlined · elevated · interactive
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`variant`	`"default" \| "elevated" \| "outlined" \| "interactive"`	`"default"`	React · Svelte · HTML	`"secondary"`	Selects the component's visual treatment.
`padding`	`"none" \| "sm" \| "md" \| "lg"`	`"md"`	React · Svelte · HTML	`"lg"`	Controls internal card spacing.
`href`	`string`	`—`	React · Svelte · HTML	`"/guide"`	Navigation destination; makes Card interactive when provided.
`as`	`element name (adapter-specific union)`	`"div"`	React · HTML	`"article"`	Chooses the rendered semantic element.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`surface attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.