maestro-ui/docs/components/steps.md

UI Component library for Zeev BPMS

# Steps

<div class="o-steps">
  <header class="o-steps-header">
    <h1 class="o-steps-title">Planejamento</h1>
    <div class="o-steps-count">
      Etapa <span class="o-tag">4 de 5</span>
    </div>
  </header>
  <ul class="o-steps-items">
    <li class="o-step -done">
      <div class="o-step-indicator">1</div>
      <div class="o-step-content">
        <a href="#" class="o-step-title">Definir Tipo de Contrato</a>
        <p class="o-step-description">Avaliar a abrangência do contrato</p>
      </div>
    </li>
    <li class="o-step -active">
      <div class="o-step-indicator">2</div>
      <div class="o-step-content">
        <a href="#" class="o-step-title">Cadastro de Colaboradores</a>
        <p class="o-step-description">Verficar a necessidade de cadastro</p>
      </div>
    </li>
    <li class="o-step">
      <div class="o-step-indicator">3</div>
      <div class="o-step-content">
        <a href="#" class="o-step-title">Verificar Sensibilização</a>
        <p class="o-step-description">Optar pela sensibilização / treinamento</p>
      </div>
    </li>
    <li class="o-step -error">
      <div class="o-step-indicator">4</div>
      <div class="o-step-content">
        <a href="#" class="o-step-title">Notificações do Contrato</a>
        <p class="o-step-description">Definir os contatos para notificações</p>
      </div>
    </li>
    <li class="o-step -error -active">
      <div class="o-step-indicator">5</div>
      <div class="o-step-content">
        <a href="#" class="o-step-title">Realizar Alinhamentos</a>
        <p class="o-step-description">Alinhamento geral e por produto</p>
        <ul class="o-steps-subitems">
          <li class="o-substep -done">
            <a href="#">Geral</a>
          </li>
          <li class="o-substep -active">
            <a href="#">Exames e Consultas</a>
          </li>
          <li class="o-substep">
            <a href="#">PCMSO</a>
          </li>
          <li class="o-substep -error">
            <a href="#">Higiene Ocupacional</a>
          </li>
          <li class="o-substep -error -active">
            <a href="#">Ergonomia</a>
          </li>
           <li class="o-substep -active -done">
            <a href="#">Demais NRs</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>


<div class="o-steps u-margin-top-14">
  <header class="o-steps-header">
    <h1 class="o-steps-title">Planejamento</h1>
    <div class="o-steps-count">
      Etapa <span class="o-tag">4 de 5</span>
    </div>
  </header>
  <ul class="o-steps-items">
    <li class="o-step -done">
      <div class="o-step-indicator">1</div>
      <div class="o-step-content">
        <a href="#" class="o-step-title">Definir Tipo de Contrato</a>
        <p class="o-step-description">Avaliar a abrangência do contrato</p>
      </div>
    </li>
    <li class="o-step -active">
      <div class="o-step-indicator">2</div>
      <div class="o-step-content">
        <a href="#" class="o-step-title">Cadastro de Colaboradores</a>
        <p class="o-step-description">Verficar a necessidade de cadastro</p>
      </div>
    </li>
    <li class="o-step">
      <div class="o-step-indicator">3</div>
      <div class="o-step-content">
        <a href="#" class="o-step-title">Verificar Sensibilização</a>
        <p class="o-step-description">Optar pela sensibilização / treinamento</p>
      </div>
    </li>
    <li class="o-step">
      <div class="o-step-indicator">4</div>
      <div class="o-step-content">
        <a href="#" class="o-step-title">Notificações do Contrato</a>
        <p class="o-step-description">Definir os contatos para notificações</p>
      </div>
    </li>
    <li class="o-step">
      <div class="o-step-indicator">5</div>
      <div class="o-step-content">
        <a href="#" class="o-step-title">Realizar Alinhamentos</a>
        <p class="o-step-description">Alinhamento geral e por produto</p>
        <ul class="o-steps-subitems">
          <li class="o-substep">
            <a href="#">Geral</a>
          </li>
          <li class="o-substep">
            <a href="#">Exames e Consultas</a>
          </li>
          <li class="o-substep">
            <a href="#">PCMSO</a>
          </li>
          <li class="o-substep">
            <a href="#">Higiene Ocupacional</a>
          </li>
          <li class="o-substep">
            <a href="#">Ergonomia</a>
          </li>
           <li class="o-substep">
            <a href="#">Demais NRs</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>