News card

The news card component previews a news article by displaying an contextual image, a title, an exerpt, a read more button and a date label. There is a hover state on the card itself that increaes the drop-shadow of the card indicating that you probably can interact with it. Furthermore the image, the title and the read more button are clickable. They will link the detail page of the full article.

The component almost always exists in a grid layout. Iit's variable width makes sure it fits in any kind of layout.

Default

px 

			
				<article class="c-news-card ">
	<a class="c-news-card__card-link" href=""></a>
	<div class="c-news-card__visual">
		<div class="c-news-card__label">17 july 2019</div>
		<div class="c-image c-news-card__image u-hide">
			<img class="c-image__visual" src="/assets/images/news/card-placeholder.jpg" alt="" title="" />
		</div>
		<div class="c-news-card__image" style="background-image: url('/assets/images/news/card-placeholder.jpg')">
		</div>
	</div>
	<div class="c-news-card__content">
		<header class="c-news-card__header">
			<h3 class="c-news-card__title">
				<a class="c-news-card__title-link" href="#">News title enim ad minim veniam aute irure dolor in reprehenderit</a>
			</h3>
		</header>
		<div class="c-news-card__exerpt">
		</div>
		<a class="c-link c-news-card__link" href="#">
			<span class="c-link__text">Read more</span>
		</a>
	</div>
</article>