PrimitiveAvailable

Card

Composable surface for grouping related content, context, and actions.

Lesson 1

Personal information

Introduce yourself and practice the verb to be.

Lesson progress68%

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/card.json

Usage

Import the component into your project and keep the source code under your control.

tsx

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card"

Variants

Visual options included in the component’s official API.

default

A shared outline. A different emphasis.

flat

A shared outline. A different emphasis.

raised

A shared outline. A different emphasis.

accent

A shared outline. A different emphasis.

secondary

A shared outline. A different emphasis.

warning

A shared outline. A different emphasis.

info

A shared outline. A different emphasis.

inverse

A shared outline. A different emphasis.

States & interaction

Appearance, behavior and keyboard checks.

A surface or content, not a control by default. No artificial hover, pressed or focus state.
Internal actions use Button or links. Informational states need text as well as color.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
variant	default \| flat \| raised \| accent \| secondary \| warning \| info \| inverse	default	Changes surface, contrast, and elevation.
className	string	—	Extends the composition with additional styles.

Accessibility

Rules that should remain intact when adapting the component to a product.

Card does not add interactive semantics by itself.

Keep headings inside CardTitle in a logical order.

Do not turn the entire card into a button when it contains other actions.