Author

The author molecule is a card that gives more info about the author of an article. It contains an avatar with name, function and image, a short biography, links to the social media pages of the author and a link to an overview of all articles written by that specific author.

Default

px 

			
				<article class="m-author ">
	<h3 class="m-author__title">Erika Wyckmans</h3>
	<div class="a-avatar m-author__avatar a-avatar--large">
		<div class="a-image a-avatar__image">
			<img class="a-image__visual" src="/assets/images/avatar/erika.jpg" alt="Erika Wyckmans" title="Erika Wyckmans" />
		</div>
		<div class="a-avatar__content">
			<p class="a-avatar__title">Erika Wyckmans</p>
			<p class="a-avatar__description">
				Functie auteur (1)
				-
				Functie auteur (2)
			</p>
		</div>
	</div>
	<p class="m-author__description">Korte biografie lorem ipsm dolor sit amet, consectetur adipiscing elit. Ut porta justo dui, ut hendrerit nibh eleifend id. Vivamus molestie risus ac ante blandit lobortis.</p>
	<ul class="m-author__socials">
		<li class="m-author__social">
			<a class="m-author__social-link" href="#" aria-label="Facebook" target="_blank">
				<span class="m-author__social-icon icon-link"></span>
			</a>
		</li>
		<li class="m-author__social">
			<a class="m-author__social-link" href="#" aria-label="Twitter" target="_blank">
				<span class="m-author__social-icon icon-twitter"></span>
			</a>
		</li>
		<li class="m-author__social">
			<a class="m-author__social-link" href="#" aria-label="Instagram" target="_blank">
				<span class="m-author__social-icon icon-instagram"></span>
			</a>
		</li>
		<li class="m-author__social">
			<a class="m-author__social-link" href="#" aria-label="Linkedin" target="_blank">
				<span class="m-author__social-icon icon-linkedin"></span>
			</a>
		</li>
		<li class="m-author__social">
			<a class="m-author__social-link" href="#" aria-label="Link" target="_blank">
				<span class="m-author__social-icon icon-link"></span>
			</a>
		</li>
	</ul>
</article>