Labels

Status

Ativo

Inativo

Cancelado

Code:

<div class="labelStatus active">
  <p>Ativo</p>
</div>

<div class="labelStatus inactive">
  <p>Inativo</p>
</div>

<div class="labelStatus canceled">
  <p>Cancelado</p>
</div>

Breadcrumb

Ativo

Inativo

Cancelado

Code:

<div class="w-100p p-40px m-bottom-40px background-nightPurple">
  <div class="breadcrumb-container">
    <div class="breadcrumb">
      <p class="active">Ativo</p>
    </div>
    <div class="breadcrumb">
      <p>Inativo</p>
    </div>
    <div class="breadcrumb">
      <p>Cancelado</p>
    </div>
  </div>
</div>

Company logo

Example:

Code:

<div class="company-logo">
  <p>Nome</p>
</div>

Label icon


Texto


<div class="label-icon">
  <img src="../../icons/icon-camera.svg" />
  <p>Texto</p>
</div>

Label Card


Edmar


<div class="label-card">
  <p>Edmar</p>
</div>

List


Edmar

ZAG

Charlie

Canivilo


<div class="label-card-list">
  <div class="label-card">
    <p>Edmar</p>
  </div>
  <div class="label-card">
    <p>Edmar</p>
  </div>
  <div class="label-card">
    <p>Edmar</p>
  </div>
  <div class="label-card">
    <p>Edmar</p>
  </div>
</div>
← FormsGridItem →