Callout Card
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:
- Ícone (opcional)
- Título
- Descrição
- 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
Name | Type | Default | Description |
---|---|---|---|
appearance* | 'danger' | 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. |