Publicado el
15 . 11 . 2025
15 . 11 . 2025
Componentes / Avatar
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>