Componentes / Avatar

Avatar

estable

Representación visual de un usuario: foto, iniciales o icono genérico.

Controls

HTML

<article class="author-component">
  <div class="container">
    <div class="author-component__grid">
    <div class="author-component__fecha">Publicado el<br>15 . 11 . 2025<div class="line-element"></div></div>
      <div class="author-component__logos">
        <span class="author-component__sharetext">Compartir</span>
      <a href="#x" class="logo-link" aria-label="Compartir en X" style="--icon-url: url(/icons/ico-x.svg);"><span class="sr-only">Compartir en X</span></a>
      <a href="#linkedin" class="logo-link" aria-label="Compartir en Linkedin" style="--icon-url: url(/icons/ico-linkedin.svg);"><span class="sr-only">Compartir en Linkedin</span></a>
      <a href="#instagram" class="logo-link" aria-label="Compartir en Instagram" style="--icon-url: url(/icons/ico-instagram.svg);"><span class="sr-only">Compartir en Instagram</span></a>
      </div>
    <section class="author-component__authors">
      <div class="author-component__person">
        
        <div class="author-component__person-info">
          <h4 class="author-component__person-name">Nombre Apellido Apellido</h4>
          <p class="author-component__person-title">Cargo profesional en la compañía</p>
          <a class="logo-link" href="https://linkedin.com/in/usuario" aria-label="Ver perfil en Linkedin" style="--icon-url: url(/icons/ico-linkedin.svg);"><span class="sr-only">Ver perfil en Linkedin</span></a>
        </div>
      </div>
      <div class="author-component__person">
        
        <div class="author-component__person-info">
          <h4 class="author-component__person-name">Nombre Apellido Apellido</h4>
          <p class="author-component__person-title">Cargo profesional en la compañía</p>
          <a class="logo-link" href="https://linkedin.com/in/usuario" aria-label="Ver perfil en Linkedin" style="--icon-url: url(/icons/ico-linkedin.svg);"><span class="sr-only">Ver perfil en Linkedin</span></a>
        </div>
      </div>
    </section>
    </div>
    <div class="author-component__keywords">
<a href="/ruta/technology" class="tag-link tag-link--primary is-small" aria-label="Technology">
  Technology
</a>
<a href="/ruta/defense" class="tag-link tag-link--primary is-small" aria-label="Defense">
  Defense
</a>
</div>
  </div>
</article>