21/Acciones y etiquetas

Badge y avatar

Contadores, puntos de estado y avatares con iniciales o imagen, solos o en grupo.

Badges

12 Nuevo Pagado 3 días 99+ Pro

HTML

<span class="cb-badge">12</span>
<span class="cb-badge cb-badge--accent">Nuevo</span>
<span class="cb-badge cb-badge--success">Pagado</span>
<span class="cb-badge cb-badge--warning">3 días</span>
<span class="cb-badge cb-badge--danger">99+</span>
<span class="cb-badge cb-badge--solid">Pro</span>
<span class="cb-badge cb-badge--dot cb-badge--success" role="img" aria-label="En línea"></span>

Avatares

AB CD EF GH

HTML

<span class="cb-avatar cb-avatar--sm">AB</span>
<span class="cb-avatar">CD</span>
<span class="cb-avatar cb-avatar--lg cb-avatar--accent">EF<span class="cb-avatar__status cb-avatar__status--online" role="img" aria-label="En línea"></span></span>
<span class="cb-avatar cb-avatar--xl cb-avatar--square">GH</span>

Grupo y usuario

ARJMLP+2

LM Lucía MoralesAdministrador

HTML

<div class="cb-avatar-group" aria-label="5 colaboradores">
  <span class="cb-avatar">AR</span><span class="cb-avatar cb-avatar--accent">JM</span><span class="cb-avatar">LP</span><span class="cb-avatar">+2</span>
</div>
<div class="cb-user">
  <span class="cb-avatar">LM</span>
  <span><span class="cb-user__name">Lucía Morales</span><span class="cb-user__meta">Administrador</span></span>
</div>

Clases y modificadores

Clase	Descripción
`.cb-badge`	Contador o etiqueta corta.
`.cb-badge--accent\|success\|warning\|danger\|info`	Tonos suaves.
`.cb-badge--solid`	Relleno de acento.
`.cb-badge--dot`	Solo un punto.
`.cb-avatar`	Avatar de 36px. Acepta texto o `img`.
`.cb-avatar--sm\|lg\|xl`	Tamaños de 28, 48 y 64px.
`.cb-avatar--square`, `.cb-avatar--accent`	Forma cuadrada y tono de acento.
`.cb-avatar__status--online\|busy\|away`	Punto de estado.
`.cb-avatar-group`	Avatares superpuestos.
`.cb-user`, `.cb-user__name`, `.cb-user__meta`	Avatar con nombre y detalle.

Accesibilidad

Un punto de estado sin texto necesita role="img" y aria-label.
Si el avatar es una imagen, su alt debe ser el nombre de la persona.