CSS: callout ​

div[class~="instui-callout"] — Alerta de informação inline para um lembrete ou nota curta.

✅ Use Callout quando:

  • Você precisa destacar informações importantes ou lembretes inline

  • A mensagem é relativamente breve (uma frase até um parágrafo curto)

  • O alerta deve chamar atenção sem interromper o fluxo principal 🚫 Não use Callout quando:

  • A mensagem exige interação ou múltiplas ações — use um Modal ou Alert Dialog

  • O conteúdo é o foco principal da página — use um Card ou um layout Hero em vez disso

Acessibilidade ​

  • Garanta que o papel de alerta esteja corretamente aplicado (role="alert" ou role="status")
  • Use contraste de cor semântico que atenda aos padrões WCAG AA
  • Não confie apenas na cor para transmitir significado

Uso ​

css
@import "@pantoken/plugin-layouts/layouts.css";

Exemplos ​

Slots ​

SlotDescrição
messageConteúdo da mensagem de alerta

Partes ​

ParteDescrição
.instui-contentContêiner para o conteúdo de texto.
.instui-iconÍcone opcional à esquerda do conteúdo.

Pseudo-elementos ​

Pseudo-elementoDescrição
::before—

Estados ​

EstadoDescrição
:optional—

Tokens consumidos ​

TokenTipoValor
--instui-color-info-background——
--instui-color-info-border——
--instui-color-info-text——
--instui-radius-medium——
--instui-size-small<length>—
--instui-space-medium——
--instui-space-small——

Relacionado ​