Contenido y datosServer Component

Card

La superficie que agrupa: cabecera, contenido, pie y acción. Dos variantes, dos tamaños, interactiva y seleccionable.

import { Card, CardAction, CardContent, CardDescription, … } from "sebs7n-ui/card"

Ejemplos

Las piezas

Factura 0012

Acme S.A. · vence el 30/09

Pagada

$ 128.400

import { Badge } from "sebs7n-ui/badge"
import { Button } from "sebs7n-ui/button"
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "sebs7n-ui/card"

function Completa() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Factura 0012</CardTitle>
        <CardDescription>Acme S.A. · vence el 30/09</CardDescription>
        <CardAction>
          <Badge color="green">Pagada</Badge>
        </CardAction>
      </CardHeader>
      <CardContent>
        <div className="text-heading-32 text-gray-1000 tabular-nums">$ 128.400</div>
      </CardContent>
      <CardFooter>
        <Button size="sm" variant="outline">
          Descargar
        </Button>
        <Button size="sm" variant="ghost">
          Ver detalle
        </Button>
      </CardFooter>
    </Card>
  )
}

Superficie y banda

`default` es lo que flota sobre la página; `subtle` es una zona hundida.

default

Borde y `bg-background-100`.

subtle

Sin borde, `bg-background-200`.

import { Card, CardDescription, CardHeader, CardTitle } from "sebs7n-ui/card"

function Variantes() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-2">
      <Card size="sm">
        <CardHeader>
          <CardTitle>default</CardTitle>
          <CardDescription>Borde y `bg-background-100`.</CardDescription>
        </CardHeader>
      </Card>
      <Card size="sm" variant="subtle">
        <CardHeader>
          <CardTitle>subtle</CardTitle>
          <CardDescription>Sin borde, `bg-background-200`.</CardDescription>
        </CardHeader>
      </Card>
    </div>
  )
}

Interactiva y seleccionada

`interactive` solo pone los estilos: para que sea clickeable tiene que ser un `<a>` o un `<button>`.

Plan Pro

Hasta 500 facturas por mes.

Plan Equipo

El que está elegido.

import { Card, CardDescription, CardHeader, CardTitle } from "sebs7n-ui/card"

function Interactiva() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-2">
      <a className="block" href="/docs/components/card">
        <Card interactive size="sm">
          <CardHeader>
            <CardTitle>Plan Pro</CardTitle>
            <CardDescription>Hasta 500 facturas por mes.</CardDescription>
          </CardHeader>
        </Card>
      </a>
      <Card selected size="sm">
        <CardHeader>
          <CardTitle>Plan Equipo</CardTitle>
          <CardDescription>El que está elegido.</CardDescription>
        </CardHeader>
      </Card>
    </div>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Card

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`interactive`	`boolean`	—	Estilos de hover, active y foco. No hace la tarjeta clickeable: eso lo hace el elemento.
`selected`	`boolean`	—	Borde y anillo de marca.
`size`	`"sm" \| "md"`	`"md"`
`variant`	`"default" \| "subtle"`	—	`default` superficie con borde · `subtle` banda sin borde.
`className`	`string`	—

CardAction

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

CardContent

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

CardDescription

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

CardFooter

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

CardHeader

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

CardTitle

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

Teclado

Tab: Con interactive (y render sobre un link o un botón), la tarjeta entera es una parada.
Enter: Activa la tarjeta interactiva.

Accesibilidad

Una tarjeta interactiva tiene que ser un `<a>` o un `<button>`. interactive solo agrega los estilos de hover y foco: no la hace clickeable ni enfocable.
Con selected hace falta además aria-pressed o aria-checked según el patrón: el anillo de marca es visual.
CardTitle es un <div>: si la tarjeta encabeza una sección, poné el heading vos (render no aplica acá — usá tu propio <h3> adentro).

Reglas de uso

`variant="default"` es la superficie (borde + bg-background-100); `subtle` es la banda (bg-background-200, sin borde) para una zona hundida.
Una card dentro de otra card es una señal de que falta una tabla o una lista.
size="sm" en una grilla de 3 o más columnas; md suelta.
CardAction se ubica sola arriba a la derecha si está dentro de CardHeader.

Relacionados

Stat Table EmptyState