Callout Card

1.7.0

Callout Card é um padrão que destaca conteúdo relevante ou informativo dentro da interface. Seu propósito é captar a atenção do usuário em momentos chave, **reforçar uma ação recomendada ou proporcionar acessos diretos a outras partes do produto.** É útil para mensagens breves com chamada à ação ou referências contextuais.

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;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/callout-card

Callout Card

Quando usar

Utilizar o Callout Card para:

Mostrar alertas informativos ou recomendações contextuais que convida à ação.
Destacar ações úteis ou necessárias dentro de um fluxo (como recomendações em onboardings ou tutoriais).

Quando não usar

Evitar usá-lo nestes casos:

Para mostrar erros críticos ou bloqueantes (usar um Alert).
Quando o conteúdo requer ações múltiplas.
Se a mensagem é repetitiva ou desnecessária dentro do fluxo.

Critérios de produtividade e usabilidade

Foco no fluxo principal: Nunca deve bloquear a interação, apenas complementá-la.
Feedback visível e contextual: Aparece onde se necessita, reduzindo a necessidade de buscar ajuda externa.

Boas práticas de acessibilidade

Assegurar contraste suficiente entre o padrão e background da interface.
Incluir títulos e descrições claras, sem depender unicamente da cor no caso das variantes de estados (success, warning, danger)
Usar roles ARIA como aria-labelledby e aria-describedby.
O foco deve passar pela card se está no fluxo do teclado.
Todos os acionáveis devem ter labels acessíveis e estados visíveis.
Em mobile, na variante com link, assegurar uma área de tap mínima de 44x44 px em seus acionáveis.

Anatomia

Callout Card inclui:

Ícone (opcional)
Título
Descrição
Link (opcional)

Dependências

Card
Text
Icon
Link

Variantes

Tipo de intenção:
- Neutral: Se utiliza para comunicar informações úteis ou contextuais sem destaque visual. Ideal para fornecer dicas, atalhos ou descrições adicionais em interfaces onde se apresenta informação variada, sem gerar foco ou urgência.
- Primary: Se utiliza para destacar conteúdo relevante que requer maior visibilidade dentro de um conjunto de mensagens. Ideal para guiar a pessoa usuária para ações recomendadas, passos chave ou funcionalidades destacadas do produto.
- Success: Se utiliza para comunicar que uma ação foi completada com sucesso. Reforça o fluxo positivo da experiência, validando o progresso da pessoa usuária em processos como integrações, configurações ou tutoriais.
- Warning: Se utiliza para alertar sobre condições que poderiam afetar o uso correto do produto, sem bloquear a operação. É útil para antecipar problemas ou advertir sobre configurações incompletas ou pouco recomendadas.
- Danger: Se utiliza para informar sobre situações críticas que afetam a funcionalidade esperada ou a experiência de uso. Requer atenção imediata para corrigir erros ou evitar consequências negativas no fluxo de trabalho.
With Link: Com link embebido
Stressed: Com título e descrições extensas

Do and Don'ts

✅ Do

Usar títulos concisos e claros.
Incluir um CTA apenas se for necessário.
Adaptar a variante ao tom da mensagem (informativo, sucesso, erro...).
Mostrar o Callout Card perto do conteúdo que complementa.

❌ Don't

Repetir a mesma mensagem em diferentes telas.
Usar mais de um Callout Card por vista.
Utilizar mais de um link por Callout card
Bloquear o fluxo do usuário com conteúdo não descartável.
Depender apenas de ícones ou cores para comunicar a mensagem.

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.