componente · @solu30/ui-kit/display

CardHeader

Encabezado con línea divisoria, en dos modos. Con title/subtitle/action arma la fila él; con children te cede el layout entero y sólo conserva el borde y el padding.

249 sitios de import en 9 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

carlosmartinpavon
cmp-packages
dietaly
elliot
gestorsalon
luigi
prepchat
raquetea
zentrya

La parte, adentro de su padre

Cargando el espécimen…

export function CardMatrix() {
  return (
    <Stage label="Card · 5 variantes × 4 paddings + anatomía compuesta" tall wide>
      <div className="flex w-full flex-col gap-4">
        <CardVariantes />
        <CardPaddings />
        <CardComposicion />
      </div>
    </Stage>
  )
}

De specimens/display.tsx · CardMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

CardHeader es una parte de Card: sola no significa nada. Así que el escenario monta el padre completo, y lo que se ve incluye más piezas que la de esta ficha.

Cómo se usa

import { CardHeader } from '@solu30/ui-kit/display'

Props

3 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
title	opcional	`string`	—
subtitle	opcional	`string`	—
action	opcional	`ReactNode`	—

Ejemplo del paquete

// Con las props arma el encabezado solo; con children se compone a mano.
<CardHeader title="Salón Norte" subtitle="Capacidad 180" action={<IconButton icon={MoreVertical} />} />

<CardHeader>
  <CardTitle>Salón Norte</CardTitle>
  <CardDescription>Capacidad 180</CardDescription>
</CardHeader>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.