Hint Box

O que é?

O componente hint box ressalta ou reforça uma informação a pessoa usuária. Seja uma dica, um lembrete ou uma explicação.

É usado de forma contextualizada e sempre refere-se ao fluxo ou a página atual. O componente é posicionado na área de conteúdo, ocupando uma linha. Pode ser dispensado ou não, dependendo das regras de negócio.

Pode ser usado para notificar mudanças de status assíncronas.

Anatomia

1. Contêiner

Comporta todos os elementos do hint box.

2. Ícone de feedback

Varia de acordo com o status do componente.

3. Título (opcional)

Deve ser específico e comunicar o objetivo da mensagem.

4. Ícone de remoção (opcional)

Fecha o hint e move o restante do conteúdo para cima.

5. Descrição

Deve conter uma mensagem curta e direta.

6. Button link ou button text (opcional)

Button link é usado para encaminhar para outras páginas, seja dentro da plataforma ou não. Button text é usado para abrir modais ou modificações na página, como atualizar.

Tipos de hint box

O componente pode ou não conter título, botões e ícone de remoção. Veja algumas variações de hint box abaixo.

Text

<article class="hint is-success">
  <span class="icon">
    <i class="fak fa-success-medium"></i>
  </span>
  <div class="hint-body"> 
    Label
  </div>
</article>

Title + Text

<article class="hint is-success">
  <span class="icon">
    <i class="fak fa-success-medium"></i>
  </span>
  <div class="hint-body">
    <h4 class="title">Title</h4>
    Label
  </div>
</article>

Title + Text com button link

<article class="hint is-success">
  <span class="icon">
    <i class="fak fa-success-medium"></i>
  </span>
  <div class="hint-body">
    <h4 class="title">Title</h4>
    Label
    <a>
      <span>Button Link</span>
      <span class="icon is-small">
        <i class="far fa-angle-right"></i>
      </span>
    </a>
  </div>
</article>

Title + Text com button link e ícone de remoção

<article class="hint is-success">
  <span class="icon">
    <i class="fak fa-success-medium"></i>
  </span>
  <div class="hint-body">
    <h4 class="title">Title</h4>
    Label
    <a>
      <span>Button Link</span>
      <span class="icon is-small">
        <i class="far fa-angle-right"></i>
      </span>
    </a>
  </div>
  <button class="delete is-medium"></button>
</article>

Status

Os 4 status de feedback do Sirius estão disponíveis para esse componente.

Acessar princípios de feedback >

Success

Mensagens positivas e ações concluídas com sucesso. Usado para feedbacks assíncronos, onde um toast não seria o suficiente.

<article class="hint is-success">
  <span class="icon">
    <i class="fak fa-success-medium"></i>
  </span>
  <div class="hint-body"> 
    Label
  </div>
</article>

Warning

Alerta de nível médio. Avisos que precisam da atenção do usuário.

<article class="hint is-warning">
  <span class="icon">
    <i class="fak fa-warning-medium"></i>
  </span>
  <div class="hint-body"> 
    Label
  </div>
</article>

Danger

Alerta de nível alto. Erros, problemas no sistema, ações críticas.

<article class="hint is-danger">
  <span class="icon">
    <i class="fak fa-error-medium"></i>
  </span>
  <div class="hint-body"> 
    Label
  </div>
</article>

Info

Mensagens neutras ou dicas.

<article class="hint is-info">
  <span class="icon">
    <i class="fak fa-info-medium"></i>
  </span>
  <div class="hint-body"> 
    Label
  </div>
</article>

Aplicação

Vários hints em uma página

Não é recomendado que sejam utilizados vários hints boxes agrupados em uma página. Mas em casos de extrema necessidade, recomendamos que sejam usados no máximo 2 hints agrupados e que sejam ordenados por status, seguindo essa ordem:

Não há restrições de uso de vários hints boxes por página, contanto que estes estejam separados por blocos de conteúdo.

Exemplos

Do

Don't