“Para acompañar” care card

Cuando un equipo necesita atención. Una por vez, con pasos concretos, nunca alarmista.

Tarjeta que Inicio muestra debajo del resumen cuando hay una alerta: el mensaje de la alerta, una sugerencia breve y dos acciones (Ver pulsos y Crear acción). Sirve en escuelas y empresas. La tarjeta organiza el contenido; no diagnostica ni atribuye una causa al cambio de ánimo.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/care-card.json

import

import { CareCard } from "@moodinary/ui/components/care-card";

Ejemplos

Baja del promedio

Alerta de caída de ánimo en un curso, con la escena de tormenta. Crear acción es el llamado principal y Ver pulsos va como secundario.

Para acompañar · 5.º B

El promedio semanal de 5.º B bajó de 3.10 a 2.40.

Puede valer una charla breve con 5.º B esta semana, con preceptoría o tutoría.

Ver pulsos Crear acción

Código

default.tsx

import { Button } from "@moodinary/ui/components/button";
import { CareCard } from "@moodinary/ui/components/care-card";
import { HeartPulseIcon } from "@moodinary/ui/components/icons";
import { PixelScene } from "@moodinary/ui/components/pixel-scene";

/*
 * Igual que AlertCare en apps/pulses/.../inicio-hero.tsx: título = mensaje de la alerta
 * (packages/api/src/lib/anomalies.ts), descripción = careHint, Ver pulsos + Crear acción.
 * En la app los botones navegan; acá son links de ejemplo sin red.
 */
export default function CareDefault() {
	return (
		<CareCard
			actions={
				<>
					<Button render={<a href="#pulsos" />} variant="secondary">
						Ver pulsos
					</Button>
					<Button render={<a href="#acciones" />}>Crear acción</Button>
				</>
			}
			className="mt-0 w-full"
			description="Puede valer una charla breve con 5.º B esta semana, con preceptoría o tutoría."
			eyebrow="Para acompañar · 5.º B"
			icon={<HeartPulseIcon className="size-4" />}
			scene={
				<PixelScene
					label="Se nubla: alerta nueva"
					scene="alert-storm"
					size="sm"
					still
				/>
			}
			title="El promedio semanal de 5.º B bajó de 3.10 a 2.40."
		/>
	);
}

Menos pulsos que lo habitual

Alerta de volumen en un equipo de trabajo. Misma composición; el ejemplo no navega ni guarda nada.

Para acompañar · Atención al cliente

El clima de Atención al cliente estuvo mucho más disperso de lo habitual esta semana (respuestas muy distintas entre sí).

Mirá los pulsos de estos días antes de decidir. Con pocos datos, tomalo como señal.

Ver pulsos Crear acción

Código

company.tsx

import { Button } from "@moodinary/ui/components/button";
import { CareCard } from "@moodinary/ui/components/care-card";
import { HeartPulseIcon } from "@moodinary/ui/components/icons";
import { PixelScene } from "@moodinary/ui/components/pixel-scene";

/*
 * Igual que AlertCare en apps/pulses/.../inicio-hero.tsx: título = mensaje de la alerta
 * (packages/api/src/lib/anomalies.ts), descripción = careHint, Ver pulsos + Crear acción.
 * Tipo volatility_spike: cae en el careHint por defecto (neutral, sirve para empresas).
 * En la app los botones navegan; acá son links de ejemplo sin red.
 */
export default function CareCompany() {
	return (
		<CareCard
			actions={
				<>
					<Button render={<a href="#pulsos" />} variant="secondary">
						Ver pulsos
					</Button>
					<Button render={<a href="#acciones" />}>Crear acción</Button>
				</>
			}
			className="mt-0 w-full"
			description="Mirá los pulsos de estos días antes de decidir. Con pocos datos, tomalo como señal."
			eyebrow="Para acompañar · Atención al cliente"
			icon={<HeartPulseIcon className="size-4" />}
			scene={
				<PixelScene
					label="Se nubla: alerta nueva"
					scene="alert-storm"
					size="sm"
					still
				/>
			}
			title="El clima de Atención al cliente estuvo mucho más disperso de lo habitual esta semana (respuestas muy distintas entre sí)."
		/>
	);
}

Props

CareCard

Prop	Tipo	Default	Descripción
title	ReactNode	-	Título obligatorio, se renderiza como h3.
eyebrow	ReactNode	-	Etiqueta breve antes del título.
description	ReactNode	-	Contexto del equipo y la señal.
actions	ReactNode	-	Controles o enlaces para actuar.
icon	ReactNode	-	Ícono decorativo. No aparece si hay scene.
scene	ReactNode	-	Escena que reemplaza al ícono; se oculta en pantallas pequeñas.
className	string	-	Clases de la tarjeta.

Cuándo sí y cuándo no

Hacé

Nombrá el equipo y el período de la señal.
Proponé un paso concreto en una sola frase.
Distinguí coincidencia temporal de causa comprobada.

Evitá

No diagnostiques a personas con un promedio de equipo.
No apiles varias tarjetas de atención iguales.
No inventes que una actividad causó el cambio.

Podés usar role=region y aria-label para nombrar el bloque.
Los botones y enlaces siguen el recorrido de Tab y se activan con su teclado nativo.
No pongas información indispensable solo en la escena: se oculta en mobile.