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;

Instalá el componente via terminal.

npm install @nimbus-ds/callout-card

Callout Card

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).

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.
  • 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.
  • 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.

Callout Card incluye:

  1. Ícono (opcional)
  2. Título
  3. Descripción
  4. Link (opcional)
  • Card
  • Text
  • Icon
  • Link
  • 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

  • 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.

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

CalloutCard

NameTypeDefaultDescription

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.