Estilos

Componentes

Formularios

Organismos

Etiquetas

Las etiquetas se utilizan para identificar y categorizar la información dentro de una página proporcionando más detalles a los usuarios sobre el contenido que necesitan.

Estamos actualizando todas las fichas de los componentes. Para conocer más sobre los lineamientos de uso del componente podés visitar la documentación en Obelisco v.1.

Colores

PredeterminadaPeligroInfoÉxitoAdvertencia
<span class="badge badge-default">Predeterminada</span>
<span class="badge badge-danger">Peligro</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-success">Éxito</span>
<span class="badge badge-warning">Advertencia</span>

Enlace

EtiquetaEtiquetaEtiqueta
EtiquetaEtiquetaEtiqueta
EtiquetaEtiquetaEtiqueta
EtiquetaEtiquetaEtiqueta
EtiquetaEtiquetaEtiqueta
// Default
<a href="#" class="badge badge-default">
  ETIQUETA
</a>
<a href="#" class="badge badge-default hover">
  ETIQUETA
</a>
<a href="#" class="badge badge-default focus">
  ETIQUETA
</a>
// Danger
<a href="#" class="badge badge-danger">
  ETIQUETA
</a>
<a href="#" class="badge badge-danger hover">
  ETIQUETA
</a>
<a href="#" class="badge badge-danger focus">
  ETIQUETA
</a>
// Info
<a href="#" class="badge badge-info">
  ETIQUETA
</a>
<a href="#" class="badge badge-info hover">
  ETIQUETA
</a>
<a href="#" class="badge badge-info focus">
  ETIQUETA
</a>
// Success
<a href="#" class="badge badge-success">
  ETIQUETA
</a>
<a href="#" class="badge badge-success hover">
  ETIQUETA
</a>
<a href="#" class="badge badge-success focus">
  ETIQUETA
</a>
// Warning
<a href="#" class="badge badge-warning">
  ETIQUETA
</a>
<a href="#" class="badge badge-warning hover">
  ETIQUETA
</a>
<a href="#" class="badge badge-warning focus">
  ETIQUETA
</a>

Variantes

Navegación de pie de página