Guia de Componentes

Referência visual dos componentes da plataforma. Para usar um componente, basta copiar a estrutura HTML e trocar a classe de variação.

Botões

Estados de interação. Nesta vitrine, hover, foco e ativo estão fixados para visualização.

<button class="botao">Enviar</button>
<a class="botao botao--destaque" href="...">Doar</a>
<button class="botao botao--neutro">Limpar</button>
<button class="botao" disabled>Enviando...</button>

Badges

Etiquetas curtas para categoria ou situação de um projeto, campanha ou vaga.

Alimentação
Vagas abertas
Poucas vagas
Urgente
Aos sábados

<span class="badge">Categoria</span>
<span class="badge badge--sucesso | badge--aviso | badge--erro | badge--neutro">...</span>

Alertas

Mensagens fixas dentro da página. Use role="alert" para erros e role="note" para informações.

Informação

Toda doação é aplicada diretamente nos projetos e prestada em relatório anual.

Sucesso

Cadastro enviado com sucesso! Entraremos em contato em breve.

Atenção

É preciso ter pelo menos 16 anos para se cadastrar como voluntário.

Erro

Não foi possível enviar o cadastro. Verifique sua conexão e tente novamente.

<div class="alerta alerta--erro" role="alert">
  <span class="alerta__icone" aria-hidden="true">×</span>
  <div>
    <p class="alerta__titulo">Erro</p>
    <p>Mensagem</p>
  </div>
</div>

Toast

Notificação temporária no canto da tela. Some sozinha após 5 segundos e não bloqueia a página.

Chave PIX copiada! Agora é só colar no app do seu banco.

Restam poucas vagas no Reforço Escolar.

Alguns campos precisam de atenção.

Novas turmas de Inclusão Digital aos sábados.

mostrarToast('Mensagem', 'sucesso'); // sucesso | aviso | erro | info

Modal

Janela de confirmação sobre a página, feita com o elemento nativo <dialog>: o foco fica preso nela e a tecla Esc fecha.

<dialog id="modal-exemplo" class="modal" aria-labelledby="titulo">...</dialog>
abrirModal('modal-exemplo');