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;

Instale o componente via terminal.

npm install @nimbus-ds/callout-card

Callout Card

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

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

Callout Card inclui:

  1. Ícone (opcional)
  2. Título
  3. Descrição
  4. Link (opcional)
  • Card
  • Text
  • Icon
  • Link
  • 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

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

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.