Card

Surface with header, title, description, content, and footer slots.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Default size

Card with default padding scale.

Content uses card tokens.

Small + action

size="sm" with CardAction.

Tighter rhythm for dense dashboards.

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@payglocal_ui/flux-ui";

Example

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Supporting text.</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>