Example
Markup
<div class="row align-items-stretch">
<div class="col-md-6 col-lg-4">
<a href="javascript://" class="news-card">
<div class="news-card__image">
<div class="image image--landscape image--fill">
<div class="image__image"><img src="images/test-image.jpg"></div>
</div>
</div>
<div class="news-card__content">
<div class="news-card__title card-title card-title--two-lines card-title--large card-title--left-zero">
<h4 class="card-title__title"><small>Kategorie</small> Titel</h4>
</div>
<p class="news-card__text">
The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.
</p>
<div class="news-card__continue">
weiterlesen
</div>
</div>
</a>
</div>
<div class="col-sm-12 col-lg-8">
<a href="javascript://" class="news-card news-card--medium">
<div class="news-card__image">
<div class="image image--landscape image--fill">
<div class="image__image"><img src="images/test-image.jpg"></div>
</div>
</div>
<div class="news-card__content">
<div class="news-card__title card-title card-title--two-lines card-title--large card-title--left-zero">
<h4 class="card-title__title"><small>Kategorie</small> Titel</h4>
</div>
<p class="news-card__text">
The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.
</p>
<div class="news-card__continue">
weiterlesen
</div>
</div>
</a>
</div>
<div class="col-sm-12">
<a href="javascript://" class="news-card news-card--large">
<div class="news-card__image">
<div class="image image--landscape image--fill">
<div class="image__image"><img src="images/test-image.jpg"></div>
</div>
</div>
<div class="news-card__content">
<div class="news-card__title card-title card-title--two-lines card-title--large card-title--left-zero">
<h4 class="card-title__title"><small>Kategorie</small> Titel</h4>
</div>
<p class="news-card__text">
The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.
</p>
<div class="news-card__continue">
weiterlesen
</div>
</div>
</a>
</div>
</div>
Source:
assets/styles/03-molecules/01-cards/_news.scss, line 1
