view_agenda

Card

Surface container for grouped content.

Card Examples

Copy-ready examples with live previews.

Basic usage

Card is a simple surface container. Use a single surface modifier for predictable styling.

Live preview

ElevatedSimple surface container.

import Card from "@/packages/ui/src/_components/card/Card";

export default function Example() {
  return (
    <Card elevated customStyles={{ padding: 16 }}>
      <div>Card content</div>
    </Card>
  );
}

Surface variants

Use elevated, outlined, or tonal.

• The component does not enforce exclusivity; prefer enabling only one at a time.

Live preview

Elevated

Outlined

Tonal

import Card from "@/packages/ui/src/_components/card/Card";

export default function Example() {
  return (
    <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
      <Card elevated customStyles={{ padding: 16, minWidth: 220 }}>Elevated</Card>
      <Card outlined customStyles={{ padding: 16, minWidth: 220 }}>Outlined</Card>
      <Card tonal customStyles={{ padding: 16, minWidth: 220 }}>Tonal</Card>
    </div>
  );
}

Custom styles

Use customStyles for padding/spacing and any inline tweaks.

Live preview

Custom stylesPadding + radius via customStyles.

CompactOutlined card with tighter spacing.

import Card from "@/packages/ui/src/_components/card/Card";

export default function Example() {
  return (
    <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
      <Card elevated customStyles={{ padding: 22, borderRadius: 18, minWidth: 240 }}>
        Custom styles
      </Card>

      <Card outlined customStyles={{ padding: 14, minWidth: 240 }}>
        Compact outlined
      </Card>
    </div>
  );
}

Nested cards

Use nested cards to create grouped surfaces.

Live preview

Parent card

SectionNested tonal surface.

AsideNested outlined surface.

import Card from "@/packages/ui/src/_components/card/Card";

export default function Example() {
  return (
    <Card elevated customStyles={{ padding: 16, maxWidth: 520 }}>
      <div style={{ display: "grid", gap: 12 }}>
        <strong>Parent card</strong>

        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <Card tonal customStyles={{ padding: 12, minWidth: 200, flex: 1 }}>
            Section
          </Card>

          <Card outlined customStyles={{ padding: 12, minWidth: 200, flex: 1 }}>
            Aside
          </Card>
        </div>
      </div>
    </Card>
  );
}

Controlled surface (playground style)

Use your Button component to switch the active surface modifier.

Live preview

Controlled surfaceActive: elevated

import { useState } from "react";
import Card from "@/packages/ui/src/_components/card/Card";
import { Button } from "@/packages/ui/src/_components/buttons_variants/buttons/Button";

type Surface = "elevated" | "outlined" | "tonal";

export default function Example() {
  const [surface, setSurface] = useState<Surface>("elevated");

  return (
    <div style={{ display: "grid", gap: 12 }}>
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
        <Button variant="secondary" ripple outline size="small" onClick={() => setSurface("elevated")}>
          Elevated
        </Button>
        <Button variant="secondary" ripple outline size="small" onClick={() => setSurface("outlined")}>
          Outlined
        </Button>
        <Button variant="secondary" ripple outline size="small" onClick={() => setSurface("tonal")}>
          Tonal
        </Button>
      </div>

      <Card
        elevated={surface === "elevated"}
        outlined={surface === "outlined"}
        tonal={surface === "tonal"}
        customStyles={{ padding: 16, minHeight: 90 }}
      >
        Active: {surface}
      </Card>
    </div>
  );
}

Layout example (grid)

Cards are commonly used as grid items for dashboards and lists.

Live preview

Card AGrid cell content.

Card BGrid cell content.

Card CGrid cell content.

import Card from "@/packages/ui/src/_components/card/Card";

export default function Example() {
  return (
    <div style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" }}>
      <Card outlined customStyles={{ padding: 14 }}>Card A</Card>
      <Card tonal customStyles={{ padding: 14 }}>Card B</Card>
      <Card elevated customStyles={{ padding: 14 }}>Card C</Card>
    </div>
  );
}

On this page

Card Props

Card — Props
Prop	Type	Required	Default	Description
elevated	boolean	No	false	Adds the elevated modifier class.
outlined	boolean	No	false	Adds the outlined modifier class.
tonal	boolean	No	false	Adds the tonal modifier class.
children	React.ReactNode \| string \| number	No	—	Card content.
customStyles	React.CSSProperties	No	—	Inline styles applied to the root <div>.