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 curta (uma frase até um pequeno parágrafo)

• O alerta deve chamar a 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 layout Hero em vez disso

Acessibilidade

• Garanta que a role do alerta seja aplicada corretamente (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

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

Slots

Slot	Descrição
message	Conteúdo da mensagem de alerta

Partes

Parte	Descrição
.instui-content	Contêiner para o conteúdo de texto.
.instui-icon	Ícone opcional à esquerda do conteúdo.

Pseudo-elementos

Pseudo-elemento	Descrição
::before	—

Estados

Estado	Descrição
:optional	—

Tokens consumidos

Token	Tipo	Valor
--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	—	—

Relacionados

• alert