Card

Contenedor de contenido flexible con slots de cabecera, cuerpo y pie

Componente card para agrupar contenido relacionado con secciones de cabecera, cuerpo y pie. Compón CardHeader, CardTitle, CardDescription, CardContent y CardFooter según necesites.

Card title

Descripción breve del contenido de la card.

Aquí va el contenido principal de tu card.

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

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card title</CardTitle>
        <CardDescription>
          Descripción breve del contenido de la card.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>Aquí va el contenido principal de tu card.</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  );
}

View Code

Instalación

bash

liminal add card

Uso

Card title

Descripción breve del contenido de la card.

Aquí va el contenido principal de tu card.

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

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card title</CardTitle>
        <CardDescription>
          Descripción breve del contenido de la card.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>Aquí va el contenido principal de tu card.</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  );
}

View Code

Ejemplos

Con cabecera y pie

El ejemplo anterior muestra la composición completa. Puedes omitir CardHeader o CardFooter si solo necesitas contenido.

Solo contenido

Card mínima solo con contenido.

<Card>
  <CardContent>
    <p>Card mínima solo con contenido.</p>
  </CardContent>
</Card>

View Code

API

Card y sus partes aceptan las props estándar de div HTML. Usa estos subcomponentes para estructurar el contenido:

Card — Contenedor
CardHeader — Envuelve título y descripción
CardTitle — Encabezado
CardDescription — Subtítulo o leyenda
CardContent — Cuerpo principal
CardFooter — Acciones o contenido del pie