CardHeader

Cabecera de una tarjeta: título con insignia opcional, descripción, acciones y menú, con línea inferior.

Cuándo usarlo

Props. title, badge (+ badgeColor), description, actions, menu (+ onMenu), avatar (props de Avatar, para fichas de persona). Título text-lg-semibold; padding 20/24; separador border-secondary.

Uso. Encabeza tablas y paneles dentro de una tarjeta. Para el título de toda la página, PageHeader; para un bloque sin tarjeta, SectionHeader.

Detalles. Funciona sin JavaScript. El título es un <h3> (en la guía era un bloque sin nivel de encabezado); la insignia es brand si no se indica otro color.

Ampliaciones sobre la guía. Como en MetricCard: menuLabel cambia el nombre del botón de tres puntos ("Más opciones") y menu también admite un nodo, como un Dropdown con su propio trigger.

Ejemplos

Suscripciones12 activas

Pagos recurrentes de este mes.

Props

Prop	Tipo	Por defecto	Descripción
`title`obligatoria	`ReactNode`	—	Título de la tarjeta (`<h3>`, `text-lg` semibold).
`badge`	`ReactNode`	—	Insignia junto al título, como "12 activas".
`badgeColor`	`"gray" · "brand" · "error" · "warning" · "success" · "slate" · "sky" · "blue" · "indigo" · "purple" · "pink" · "orange"`	`brand`	Color de la insignia.
`description`	`ReactNode`	—	Una frase en `text-tertiary` bajo el título.
`actions`	`ReactNode`	—	Botones a la derecha: la acción principal, la última.
`menu`	`ReactNode`	—	Menú de la tarjeta: `true` pinta el botón de tres puntos (con `onMenu`); también admite un nodo, como un `Dropdown` con `trigger` (ampliación sobre la guía, como en `MetricCard`).
`onMenu`	`(() => void)`	—	Al pulsar el botón de tres puntos.
`menuLabel`	`string`	`"Más opciones"`	Nombre del botón de tres puntos.
`avatar`	`AvatarProps`	—	Avatar de 48px a la izquierda, para fichas de persona (props de `Avatar`).
`className`	`string`	—

Código

import { CardHeader } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<CardHeader
				title="Suscripciones"
				badge="12 activas"
				description="Pagos recurrentes de este mes."
				actions={<Button size="sm">Añadir</Button>}
			/>
		</>
	);
}

---
import { CardHeader } from "@jotis-me/react";
---

<CardHeader
	title="Suscripciones"
	badge="12 activas"
	description="Pagos recurrentes de este mes."
	actions={<Button size="sm">Añadir</Button>}
/>

Con onMenu necesita una función: envuélvelo en un .tsx y úsalo como isla client:load.