Arranging teasers and card elements

A broad use case for CSS Grid and Flexbox is to style teasers and card elements on our pages. They usually consist of some image, a headline, perhaps a bit of text, and a link or call-to-action, CTA for short. Card elements can be considered vertical teasers, whereas purely horizontal teasers are extended media objects.

A typical horizontal teaser design has an image that takes up to around 20% of the available width, and the entire height, a card element’s image is usually 100% wide and takes up around 20% to 30% of the height.

Let’s assume the following HTML code. It strongly resembles the media object with a few differences, namely adding a button and different class names:

<!-- chapter5/02_teaser_element.html -->
<article class="teaser">
  <img
    class="teaser-image"
    src="https://via.placeholder.com/240x180"
  ...