Ir al contenido
English

Navegar

English

Escribe para buscar. Pulsa Escape para cerrar.

    Componentes · css

    Avatar

    Un cuadrado o un círculo pequeño que representa a una persona o a una cosa: una imagen, o las iniciales cuando no hay imagen. Cuatro tamaños, un anillo opcional, un punto de estado y grupos que se superponen con un recuento para el resto. No lleva identidad propia: el nombre accesible sale del alt de la imagen o de un aria-label en el contenedor. Sin JavaScript.

    CSS: css/components/avatar.css (en ivolt.css). Añadido en la v0.6.

    Tamaños, anillo, cuadrado y estadofixtures/avatar/basic.htmlAbrir sola — Tamaños, anillo, cuadrado y estado
    <div class="iv-u-flex iv-u-flex-wrap iv-u-gap-6 iv-u-items-center">
  <span class="iv-avatar iv-avatar--sm" role="img" aria-label="Ada Márquez"><span aria-hidden="true">AM</span></span>
  <span class="iv-avatar" role="img" aria-label="Ada Márquez"><span aria-hidden="true">AM</span></span>
  <span class="iv-avatar iv-avatar--lg" role="img" aria-label="Bruno Oteiza"><span aria-hidden="true">BO</span></span>
  <span class="iv-avatar iv-avatar--xl" role="img" aria-label="Chen Wei"><span aria-hidden="true">CW</span></span>
</div>

<div class="iv-u-flex iv-u-flex-wrap iv-u-gap-6 iv-u-items-center iv-u-mt-8">
  <span class="iv-avatar iv-avatar--lg iv-avatar--ring" role="img" aria-label="Ada Márquez"><span aria-hidden="true">AM</span></span>
  <span class="iv-avatar iv-avatar--lg iv-avatar--square" role="img" aria-label="Bruno Oteiza"><span aria-hidden="true">BO</span></span>
  <span class="iv-avatar iv-avatar--lg">
    <img class="iv-avatar__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%231D4FC4'/%3E%3Cpath d='M20 32c0-9 5-15 13-17-1 10-6 15-13 17z' fill='%2373DFFF'/%3E%3Cpath d='M20 32c0-6-3-10-10-11 1 7 4 10 10 11z' fill='%23EAF4FF' opacity='.85'/%3E%3C/svg%3E" alt="Drawing of a plant, used here instead of a portrait" width="56" height="56">
  </span>
  <span class="iv-avatar iv-avatar--lg" role="img" aria-label="Ada Márquez">
    <span aria-hidden="true">AM</span>
    <span class="iv-avatar__status" data-iv-tone="success"><span class="iv-u-sr-only">Online</span></span>
  </span>
  <span class="iv-avatar iv-avatar--lg" role="img" aria-label="Bruno Oteiza">
    <span aria-hidden="true">BO</span>
    <span class="iv-avatar__status" data-iv-tone="warning"><span class="iv-u-sr-only">Away</span></span>
  </span>
  <span class="iv-avatar iv-avatar--lg" role="img" aria-label="Chen Wei">
    <span aria-hidden="true">CW</span>
    <span class="iv-avatar__status" data-iv-tone="muted"><span class="iv-u-sr-only">Offline</span></span>
  </span>
</div>

<p class="iv-u-text-sm iv-u-text-muted iv-u-mt-6" style="max-width: 40rem">The names and initials are invented: this package ships no photographs of people. The single image above is an inline SVG drawing of a plant, not a portrait. The status dot repeats its meaning in text for screen readers, so the colour is never alone.</p>

    Grupos

    iv-avatar-group coloca las caras en fila, cada una tapando a la anterior algo menos de una quinta parte de su tamaño y con la primera encima. El último elemento puede ser iv-avatar-group__more: una cara atenuada con el recuento de quienes no se ven, y ese recuento en su etiqueta. El solape se ajusta en una línea con --iv-avatar-overlap en el grupo.

    Grupos superpuestosfixtures/avatar/group.htmlAbrir sola — Grupos superpuestos
    <div class="iv-avatar-group">
  <span class="iv-avatar" role="img" aria-label="Ada Márquez"><span aria-hidden="true">AM</span></span>
  <span class="iv-avatar" role="img" aria-label="Bruno Oteiza"><span aria-hidden="true">BO</span></span>
  <span class="iv-avatar" role="img" aria-label="Chen Wei"><span aria-hidden="true">CW</span></span>
  <span class="iv-avatar" role="img" aria-label="Dario Ferri"><span aria-hidden="true">DF</span></span>
  <span class="iv-avatar iv-avatar-group__more" role="img" aria-label="3 more people"><span aria-hidden="true">+3</span></span>
</div>

<div class="iv-avatar-group iv-u-mt-8" style="--iv-avatar-overlap: -0.35rem">
  <span class="iv-avatar iv-avatar--lg" role="img" aria-label="Ada Márquez"><span aria-hidden="true">AM</span></span>
  <span class="iv-avatar iv-avatar--lg" role="img" aria-label="Bruno Oteiza"><span aria-hidden="true">BO</span></span>
  <span class="iv-avatar iv-avatar--lg" role="img" aria-label="Chen Wei"><span aria-hidden="true">CW</span></span>
  <span class="iv-avatar iv-avatar--lg iv-avatar-group__more" role="img" aria-label="12 more people"><span aria-hidden="true">+12</span></span>
</div>

<div class="iv-avatar-group iv-u-mt-8">
  <span class="iv-avatar iv-avatar--sm iv-avatar--square" role="img" aria-label="Ada Márquez"><span aria-hidden="true">AM</span></span>
  <span class="iv-avatar iv-avatar--sm iv-avatar--square" role="img" aria-label="Bruno Oteiza"><span aria-hidden="true">BO</span></span>
  <span class="iv-avatar iv-avatar--sm iv-avatar--square" role="img" aria-label="Chen Wei"><span aria-hidden="true">CW</span></span>
</div>

<p class="iv-u-text-sm iv-u-text-muted iv-u-mt-6" style="max-width: 40rem">Invented names again. Each face is an image with its own label and the overflow count says how many people are not shown. The overlap is an eighth of the face at every size and the initials sit against the visible edge, so the ones behind stay readable; <code>--iv-avatar-overlap</code> retunes it in one line — the middle row above is set to a looser <code>-0.35rem</code>.</p>
    .iv-root {
  --iv-avatar-overlap: -0.35rem;
}

    Anatomía

    ClaseFunción
    iv-avatarLa cara: 2,5rem, radio completo y fondo con tinte de marca para las iniciales.
    iv-avatar__imgLa imagen de dentro, recortada con object-fit: cover. Dale width y height.
    iv-avatar--sm --lg --xl1,75rem, 3,5rem y 5rem, todos a través de --iv-avatar-size.
    iv-avatar--squareCuadrado redondeado en lugar de círculo.
    iv-avatar--ringUn anillo de marca alrededor de la cara.
    iv-avatar__statusPunto en la esquina inferior final; data-iv-tone admite success, warning, danger y muted.
    iv-avatar-group, iv-avatar-group__moreLa fila y su recuento sobrante.

    Las iniciales son la forma por defecto: ponlas en un <span aria-hidden="true"> dentro de un avatar con role="img" y el nombre completo en aria-label, para que un lector de pantalla lea a la persona y no dos letras. No hay una clase modificadora aparte para ellas.

    Tokens y locales

    LocalPor defectoQué mueve
    --iv-avatar-size2.5remDiámetro de la cara; los modificadores de tamaño solo cambian esto.
    --iv-avatar-radiusvar(--iv-radius-full)Radio de las esquinas; --square lo lleva a md.
    --iv-avatar-ringtransparentColor del anillo; --ring lo pone en el de marca.
    --iv-avatar-overlapcalc(var(--iv-avatar-size) * -0.18)Cuánto tapa cada cara del grupo a la anterior.

    El solape por defecto es un cálculo y no una medida fija para que una fila de caras pequeñas y otra de grandes mantengan el mismo ritmo y las iniciales de detrás sigan legibles. Ponlo en el grupo, no en una cara.

    Accesibilidad y teclado

    Un avatar no es interactivo, así que no hay nada que enfocar salvo que lo envuelvas en un enlace o un botón, y entonces ese enlace necesita su propio nombre accesible, no solo la imagen. Decide una vez si el avatar es contenido o decoración: con nombre es la imagen de una persona, y repetir ese nombre en el texto de al lado le da lo mismo dos veces a un lector de pantalla; en ese caso pon el avatar con alt="" o aria-hidden y deja que el texto lleve la identidad. El punto de estado tiene que repetir su significado con palabras, como hace la fixture con un «Online» invisible; el color solo no dice nada. El recuento sobrante indica a cuántas personas no se ve, para que la fila no mienta por omisión.

    Sin JavaScript

    No hay JavaScript. Una imagen rota cae al texto de su alt, centrado en la cara, en lugar de a un icono partido.

    Errores frecuentes

    • Iniciales sin nombre: dos letras leídas en voz alta son ruido.
    • alt="avatar" o alt="foto de perfil". O el nombre, o vacío.
    • Un punto de estado que solo existe en color.
    • Un grupo de veinte caras sin recuento. Muestra cuatro o cinco y di cuántas faltan.
    • Fotografías de personas inventadas para una demostración. Las fixtures de aquí usan iniciales inventadas y un dibujo, y lo dicen.

    Índice de clases

    Partes y modificadores de esta familia que los ejemplos de arriba no muestran. La lista completa por hoja está en la referencia.

    ClaseQué hace
    iv-avatar--lgAvatar de 3,5rem.
    iv-avatar--xlAvatar de 5rem, para una cabecera de perfil.