## Overview [#overview] The **Card** component provides a flexible container system for grouping related content. It includes specialized sections for headers, content, footers, and toolbars. Set `hoverable` on the root card when you want the surface to transition from `surface-1` to `surface-2` on hover. ## Usage [#usage] ```tsx import { Button, Card, CardContent, CardHeader, CardHeading, CardTitle, CardToolbar, Label, Switch, } from "@tilt-legal/cubitt-components/primitives"; ``` ```tsx ... ... ... ; ``` *** ## Examples [#examples] ### Hoverable [#hoverable] Use `hoverable` when a card should shift from `surface-1` to `surface-2` on hover. ```tsx import { Card, CardContent, CardDescription, CardHeader, CardHeading, CardTitle, } from "@tilt-legal/cubitt-components/primitives"; Activity Summary Use `hoverable` when a card needs a subtle surface shift on hover.

This card transitions from `surface-1` to `surface-2` while keeping the same structure and spacing.

``` ### With Toolbar [#with-toolbar] Use `CardToolbar` to add action buttons to the header. ```tsx import { Button, Card, CardContent, CardHeader, CardHeading, CardTitle, CardToolbar, Label, Switch, } from "@tilt-legal/cubitt-components/primitives"; import { Gear } from "@tilt-legal/cubitt-icons/ui/outline"; Settings
``` ### With Meta (Top) [#with-meta-top] Use `CardMeta` at the top of a card for metadata like timestamps, categories, or status. ```tsx import { Card, CardContent, CardDescription, CardHeader, CardHeading, CardTitle, CardMeta, } from "@tilt-legal/cubitt-components/primitives"; import { Clock } from "@tilt-legal/cubitt-icons/ui/outline"; Updated 2 hours ago Project Overview Track your project progress

CardMeta can be placed at the top of a card to show metadata like timestamps, categories, or tags.

``` ### With Meta (Bottom) [#with-meta-bottom] `CardMeta` can also be placed at the bottom for footer-style metadata. ```tsx import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardHeading, CardMeta, CardTitle, } from "@tilt-legal/cubitt-components/primitives"; Article Title Read the full article

CardMeta can also be placed at the bottom of a card for footer-style metadata.

Published: Jan 15, 2025 5 min read ``` ### Advanced [#advanced] ```tsx import { Badge, Button, Card, CardContent, CardHeader, CardHeading, CardMeta, CardTitle, CardToolbar, } from "@tilt-legal/cubitt-components/primitives"; import { ChartActivity, Plus } from "@tilt-legal/cubitt-icons/ui/outline"; const users = [ { id: "1", name: "Kathryn Campbell", email: "kathryn@example.com", status: "active", }, { id: "3", name: "Sophia Johnson", email: "sophia@example.com", status: "active", }, { id: "2", name: "Robert Smith", email: "robert@example.com", status: "inactive", }, { id: "4", name: "Sophia Johnson", email: "sophia@example.com", status: "active", }, { id: "5", name: "Kathryn Campbell", email: "kathryn@example.com", status: "active", }, ]; 32 new users this week Recent Users {users.map((user) => (
{user.name .split(" ") .map((n) => n[0]) .join("")}
{user.name}
{user.email}
{user.status.charAt(0).toUpperCase() + user.status.slice(1)}
))} ``` *** ## API Reference [#api-reference] ### Card [#card] The root container component for all card sections. | **Prop** | **Type** | **Default** | | ----------- | --------- | ----------- | | `hoverable` | `boolean` | `false` | | `className` | `string` | - | ### CardHeader [#cardheader] Contains the card heading and optional toolbar. Uses flexbox layout to align items. | **Prop** | **Type** | **Default** | | ----------- | -------- | ----------- | | `className` | `string` | - | ### CardHeading [#cardheading] Wrapper for CardTitle and CardDescription with vertical spacing. | **Prop** | **Type** | **Default** | | ----------- | -------- | ----------- | | `className` | `string` | - | ### CardTitle [#cardtitle] The main heading for the card (renders as `h3`). | **Prop** | **Type** | **Default** | | ----------- | -------- | ----------- | | `className` | `string` | - | ### CardDescription [#carddescription] Supporting text that describes the card's purpose. | **Prop** | **Type** | **Default** | | ----------- | -------- | ----------- | | `className` | `string` | - | ### CardToolbar [#cardtoolbar] Container for action buttons, aligned to the right of the header. | **Prop** | **Type** | **Default** | | ----------- | -------- | ----------- | | `className` | `string` | - | ### CardContent [#cardcontent] The main content area of the card. | **Prop** | **Type** | **Default** | | ----------- | -------- | ----------- | | `className` | `string` | - | ### CardTable [#cardtable] Alternative content area optimized for table layouts. | **Prop** | **Type** | **Default** | | ----------- | -------- | ----------- | | `className` | `string` | - | ### CardFooter [#cardfooter] The bottom section for actions or additional information. | **Prop** | **Type** | **Default** | | ----------- | -------- | ----------- | | `className` | `string` | - | ### CardMeta [#cardmeta] Displays metadata like timestamps, categories, or tags. Can be placed at the top or bottom of the card. | **Prop** | **Type** | **Default** | | ----------- | -------- | ----------- | | `className` | `string` | - | *** ## Design Guidelines [#design-guidelines] ### Structure [#structure] * **CardMeta** can be placed first (top) or last (bottom) in the card for metadata * **CardHeading** should contain CardTitle and optionally CardDescription * **CardToolbar** is for action buttons (1-2 icon buttons recommended) * **CardContent** is for the main content area * **CardFooter** is optional, use for primary actions or additional info ### Best Practices [#best-practices] * Place primary actions in CardFooter and secondary actions in CardToolbar * Keep CardToolbar minimal with icon buttons * Use CardMeta at the top for timestamps/status or at the bottom for article metadata * CardMeta automatically displays as flexbox with justify-between for multiple children * Cards don't require all sections - use only what's needed * For list items within cards, use `py-1` on CardContent to reduce padding