Instruction Box
Caixa de instrucoes e dicas para orientar o usuario em formularios e processos. Variantes semanticas: info (padrao), success, warning e error. Suporta modos compact e static. Position sticky por padrao para acompanhar o scroll na sidebar. Dark mode automatico.
Uso
Quando e como utilizar a instruction box para guiar o usuario.
- Info (padrao) — Instrucoes gerais e dicas de preenchimento. Fundo azul claro.
- Success — Confirmacao de etapa concluida ou requisitos atendidos. Fundo verde.
- Warning — Alertas sobre restricoes ou cuidados. Fundo amarelo.
- Error — Erros criticos ou campos obrigatorios pendentes. Fundo vermelho.
- Compact — Versao com padding e fontes reduzidas para sidebars estreitas.
- Static — Remove o comportamento sticky quando nao desejado.
Exemplos
Veja abaixo os exemplos interativos da instruction box, com todas as variantes e estados.
Carregando exemplo...
Anatomia
Estrutura interna do componente e seus elementos.
| Parte | Elemento | Descricao |
|---|---|---|
| Container | .instruction-box | Box com borda colorida e fundo semantico |
| Titulo | .instruction-box__title | Texto principal com icone opcional (Inter 16px w500) |
| Intro | .instruction-box__intro | Paragrafo introdutorio (Inter 14px w400) |
| Tips | .instruction-box__tips | Lista de dicas com checkmark automatico |
| Tip item | .instruction-box__tips li | Item individual com pseudo-elemento checkmark |
Propriedades
Classes disponiveis para configurar a instruction box.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.instruction-box | classe | — | Container base. Variante info (azul) por padrao. |
.instruction-box__title | classe | — | Titulo com icone opcional. |
.instruction-box__intro | classe | — | Texto introdutorio abaixo do titulo. |
.instruction-box__tips | classe | — | Lista de dicas com checkmark automatico. |
.instruction-box--success | classe | — | Variante verde para mensagens de sucesso. |
.instruction-box--warning | classe | — | Variante amarela para alertas e atencao. |
.instruction-box--error | classe | — | Variante vermelha para erros e restricoes. |
.instruction-box--compact | classe | — | Padding e fontes reduzidas para espacos menores. |
.instruction-box--static | classe | — | Remove position sticky (padrao e sticky no topo). |
Codigo
Snippets prontos para copiar e usar no seu projeto.
Info (padrao)
html
<div class="instruction-box">
<h3 class="instruction-box__title">
<i class="ipe-informacao"></i> Instrucoes de preenchimento
</h3>
<p class="instruction-box__intro">Preencha os campos abaixo com atencao.</p>
<ul class="instruction-box__tips">
<li>Utilize o nome completo conforme documento oficial.</li>
<li>O e-mail sera usado para <strong>confirmacao</strong> do cadastro.</li>
<li>Campos marcados com * sao obrigatorios.</li>
</ul>
</div>Variante success
html
<div class="instruction-box instruction-box--success">
<h3 class="instruction-box__title">
<i class="ipe-check-circle"></i> Etapa concluida
</h3>
<ul class="instruction-box__tips">
<li>Todos os campos obrigatorios foram preenchidos.</li>
<li>Voce pode avancar para a proxima etapa.</li>
</ul>
</div>Variante warning
html
<div class="instruction-box instruction-box--warning">
<h3 class="instruction-box__title">
<i class="ipe-alerta"></i> Atencao
</h3>
<p class="instruction-box__intro">Verifique os dados antes de prosseguir.</p>
<ul class="instruction-box__tips">
<li>Alteracoes nesta etapa nao poderao ser desfeitas.</li>
<li>Certifique-se de que os valores estao corretos.</li>
</ul>
</div>Variante error
html
<div class="instruction-box instruction-box--error">
<h3 class="instruction-box__title">
<i class="ipe-erro"></i> Correcoes necessarias
</h3>
<ul class="instruction-box__tips">
<li>O campo CPF esta com formato invalido.</li>
<li>O campo e-mail e obrigatorio.</li>
</ul>
</div>Compact e static
html
<div class="instruction-box instruction-box--compact instruction-box--static">
<h3 class="instruction-box__title">
<i class="ipe-informacao"></i> Dica rapida
</h3>
<ul class="instruction-box__tips">
<li>Use TAB para navegar entre os campos.</li>
</ul>
</div>Design
Especificacoes visuais e tokens utilizados no componente.
Especificacoes
| Propriedade | Valor |
|---|---|
| Padding | 20px (--spacing-lg), 16px (compact) |
| Gap | 8px (--spacing-sm), 4px (compact) |
| Border | 1px solid |
| Border-radius | 8px (--radius-md) |
| Position | sticky (padrao), static (--static) |
| Top | 24px (--spacing-xl) |
| Fonte titulo | Inter 16px w500 (padrao), 14px (compact) |
| Fonte intro | Inter 14px w400 |
| Fonte tips | Inter 13px (padrao), 12px (compact) |
| Icone titulo | 18px |
| Tips checkmark | Pseudo-elemento Unicode 2713 |
Tokens utilizados
| Variante | Background | Borda | Titulo | Texto | Checkmark |
|---|---|---|---|---|---|
| Info (padrao) | #EEF3FE | --color-accent-200 | --color-accent-400 | --color-accent-400 | --color-accent-300 |
| Success | --color-success-light | --color-success | --color-success-dark | --color-success-dark | --color-success |
| Warning | --color-warning-light | --color-warning | --color-warning-dark | --color-warning-dark | --color-warning-icon |
| Error | --color-danger-light | --color-danger | --color-danger-dark | --color-danger-dark | --color-danger |