Violin.css

Label 

<!-- Default -->
<label for="" class="inv-label ">
    Input label
    <small></small>
</label>


<!-- Required -->
<label for="" class="inv-label ">
    Nome
    <small>- obrigatório</small>
</label>


<!-- Disable -->
<label for="" class="inv-label inv-label--disabled">
    Senha Genérica
    <small>- desabilitado</small>
</label>


<label for="{{label.for}}" class="inv-label {{label.modifier}}">
  {{label.value}}
  <small>{{label.posfix}}</small>
</label>
 
/* Default */
{
  "label": {
    "value": "Input label"
  }
}


/* Required */
{
  "label": {
    "value": "Nome",
    "posfix": "- obrigatório"
  }
}


/* Disable */
{
  "label": {
    "value": "Senha Genérica",
    "posfix": "- desabilitado",
    "modifier": "inv-label--disabled"
  }
}
  • Content: 
    .inv-label {
  display: inline-block;
  color: var(--color-system--dark);
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  padding-bottom: 3px;
}

.inv-label--disabled {
  color: var(--color-default--regular);
  cursor: not-allowed;
}

.inv-label > small {
  color: var(--color-default--regular);
  font-size: 12px;
  font-style: italic;
}
  • URL: /components/raw/label/label.css
  • Filesystem Path: src/components/label/label.css
  • Size: 353 Bytes

Labels

Utilizadas nos campos de input

Tendo a classe base .inv-label, podendo ser adicionado um texto através de uma span

Default Label

Label padrão, comum para ações regulares dos usuários.

<label for="" class="inv-label">Default</label>
<label for="" class="inv-label">
  Default 
  <span>- obrigatório</span>
</label>
Modificadores Uso
.inv-button--disabled Modifica a label com estilização de desabilitado

Disabled label

Versão desabilitada.

<label for="" class="inv-label inv-label--disabled">
  Label
  <span>- desabilitada</span>
</label>