Callout Card

1.7.0

Callout Card es un patrón que destaca contenido relevante o informativo dentro de la interfaz. Su propósito es captar la atención del usuario en momentos clave, reforzar una acción recomendada o proporcionar accesos directos a otras partes del producto. Es útil para mensajes breves con llamado a la acción o referencias contextuales.

import React from "react";
import { CalloutCard } from "@nimbus-ds/patterns";
import { BoxUnpackedIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => (
  <CalloutCard
    appearance="neutral"
    title="Title"
    subtitle="Subtitle"
    icon={BoxUnpackedIcon}
  />
);

export default Example;

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/callout-card

Callout Card

Cuándo usar

Utilizar el Callout Card para:

Mostrar alertas informativas o recomendaciones contextuales que invite a la acción.
Destacar acciones útiles o necesarias dentro de un flujo (como recomendaciones en onboardings o tutoriales).

Cuándo no usar

Evitar usarlo en estos casos:

Para mostrar errores críticos o bloqueantes (usar un Alert).
Cuando el contenido requiere acciones múltiples.
Si el mensaje es repetitivo o innecesario dentro del flujo.

Criterios de productividad y usabilidad

Foco en el flujo principal: Nunca debe bloquear la interacción, solo complementarla.
Feedback visible y contextual: Aparece donde se necesita, reduciendo la necesidad de buscar ayuda externa.

Buenas prácticas de accesibilidad

Asegurar contraste suficiente entre el patron y background de la interfaz.
Incluir títulos y descripciones claras, sin depender únicamente del color en el caso de las variantes de estados (succes, warning, danger)
Usar roles ARIA como aria-labelledby y aria-describedby.
El foco debe pasar por la card si está en el flujo del teclado.
Todos los accionables deben tener labels accesibles y estados visibles.
En mobile, en la variante con link, asegurar un área de tap mínima de 44x44 px en sus accionables.

Anatomía

Callout Card incluye:

Ícono (opcional)
Título
Descripción
Link (opcional)

Dependencias

Card
Text
Icon
Link

Variantes

Tipo de intención:
- Neutral: Se utiliza para comunicar información útil o contextual sin destaque visual. Ideal para brindar tips, atajos o descripciones adicionales en interfaces donde se presenta información variada, sin generar foco o urgencia.
- Primary: Se utiliza para destacar contenido relevante que requiere mayor visibilidad dentro de un conjunto de mensajes. Ideal para guiar a la persona usuaria hacia acciones recomendadas, pasos clave o funcionalidades destacadas del producto.
- Success: Se utiliza para comunicar que una acción fue completada con éxito. Refuerza el flujo positivo de la experiencia, validando el progreso de la persona usuaria en procesos como integraciones, configuraciones o tutoriales.
- Warning: Se utiliza para alertar sobre condiciones que podrían afectar el uso correcto del producto, sin bloquear la operación. Es útil para anticipar problemas o advertir sobre configuraciones incompletas o poco recomendadas.
- Danger: Se utiliza para informar sobre situaciones críticas que afectan la funcionalidad esperada o la experiencia de uso. Requiere atención inmediata para corregir errores o evitar consecuencias negativas en el flujo de trabajo.
With Link: Con link embebido
Stressed: Con título y descripciones extensas

Do and Don'ts

✅ Do

Usar títulos concisos y claros.
Incluir un CTA solo si es necesario.
Adaptar la variante al tono del mensaje (informativo, éxito, error...).
Mostrar el Callout Card cerca del contenido que complementa.

❌ Don't

Repetir el mismo mensaje en diferentes pantallas.
Usar más de una Callout Card por vista.
Utilizar más de un link por Callout card
Bloquear el flujo del usuario con contenido no descartable.
Depender solo de íconos o colores para comunicar el mensaje.

Props

Additional props are passed to the <CalloutCard> element. See div docs for a list of props accepted by the <CalloutCard> element.

CalloutCard

Name	Type	Description
appearance*	'danger' 'neutral' 'primary' 'success' 'warning'	CalloutCard color.
icon*	React.FC<IconProps>	The SVG contents to display in the Icon.
title*	string	Title.
subtitle*	string	Subtitle.
link	<Link />	Slot intended to position the Callout Card link correctly.
onClick	() => void;	Event fired when clicking the component.