Article metadata

The article metadata molecule is a fairly simple component that displays:

  • the date the article is published,
  • the estimated reading time,
  • the author of the article,
  • a share button

Default

px 

			
				<div class="m-article-metadata ">
	<div class="m-article-metadata__timing-container">
		<div class="m-article-metadata__timing">
			<time class="m-article-metadata__timing-item">16 april 2019</time>
			<div class="a-attribute m-article-metadata__timing-item a-attribute--inherited">
				<span class="a-attribute__icon a-attribute__icon--before icon-stopwatch"></span>
				<p class="a-attribute__text">4 min</p>
			</div>
		</div>
	</div>
	<div class="m-article-metadata__footer">
		<div class="a-avatar m-article-metadata__avatar">
			<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)
				</p>
			</div>
		</div>
		<button class="a-button a-button--secondary a-button--outline a-button--small ">
			<span class="a-button__icon icon-share"></span>
			<span class="a-button__text">delen</span>
		</button>
	</div>
</div>