PrimitiveDisponible

Card

Superficie componible para agrupar contenido, contexto y acciones relacionadas.

Lesson 1

Personal information

Introduce yourself and practice the verb to be.

Lesson progress68%

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

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

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

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

Variantes

Opciones visuales incluidas en la API oficial del componente.

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.

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Es una superficie o contenido, no un control por defecto. No añade hover, pulsado ni foco ficticios.
Las acciones internas usan Button o enlaces. Un estado informativo necesita texto además del color.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
variant	default \| flat \| raised \| accent \| secondary \| warning \| info \| inverse	default	Cambia superficie, contraste y elevación.
className	string	—	Permite extender la composición.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Card no añade semántica interactiva por sí misma.

Usa encabezados en orden correcto dentro de CardTitle.

No conviertas toda la tarjeta en botón cuando contiene otras acciones.