Alertas
Os componentes de alerta são utilizados para destacar informações importantes, dicas, avisos ou notas que requerem a atenção do usuário.
Exemplos Visuais
Existem 5 variantes de alertas, cada uma com uma cor e ícone semântico associado.
Note (Observação)
Observação
Informação que o aluno deve notar mesmo passando o olho.
Tip (Dica)
Dica
Informação opcional para ajudar o aluno a ter mais sucesso.
Information (Informação)
Informação
Informação essencial para o aluno seguir sem travar.
Caution (Cuidado)
Cuidado
Possíveis consequências negativas de uma ação.
Warning (Aviso)
Aviso
Consequências potencialmente perigosas de uma ação.
Como Utilizar
Macro Nunjucks
Para usar este componente, importe a biblioteca de macros no topo do seu arquivo.
1. Importação
{% import "macros/ui.njk" as ui %}2. Uso Básico
{{ ui.alert(
type="note",
title="Título do Alerta",
text="Conteúdo do alerta."
) }}3. Parâmetros Disponíveis
- type (opcional): Tipo do alerta. Padrão:
'note'.'note'(Roxo)'tip'(Verde)'information'(Ciano)'caution'(Vermelho)'warning'(Amarelo/Ouro)
- title (opcional): Título do alerta. Se omitido, usa o padrão do tipo (ex: "Observação").
- text (obrigatório): Conteúdo do alerta. Aceita HTML.
- icon (opcional): Classe Font Awesome para substituir o ícone padrão (ex:
'fa-solid fa-star'). - ariaLabel (opcional): Texto para leitores de tela.
Exemplos Avançados
Ícone Customizado
Você pode substituir o ícone padrão passando uma classe do Font Awesome no parâmetro icon.
Pro Tip
Você pode customizar o ícone usando qualquer ícone do Font Awesome.
{{ ui.alert(
type="tip",
title="Pro Tip",
text="Texto com ícone customizado.",
icon="fa-solid fa-star"
) }}