Article Layout

The .article-layout are layout elements to present a list of article in different forms.

The following code examples shows how to use article content:

<div class="article-layout">
  <div class="article-layout__list">
    <div class="article">
      <a href="#" class="article-teaser">
        <span class="article-teaser__title">Hello World 01</span>
        <span class="article-teaser__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</span>
      </a>
    </div>

    <div class="article">
      <a href="#" class="article-teaser">
        <span class="article-teaser__title">Hello World 02</span>
        <span class="article-teaser__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</span>
      </a>
    </div>

    <!-- ... -->
  </div>
</div>

The following list describe all existing block/element/modifier classes of the component.

• .article-layout - required Container for a list of article with a defined structure
• .article-layout__list - required a list of article
• Modifier
  • .article-layout--top - shows the first article full width and rest in three cols on desktop
  • .article-layout--start - shows the first (on desktop also the second) article a lot bigger, the 3., 4., & 5. article a lot smaller
  • .article-layout--col - shows all article on desktop in a three column grid
  • .article-layout--show-max-{MAX} - only show {MAX} article, hide all other

The variables are:

• MAX 2, 3, 4, 5, 6, 7, 8, 9

Basic Example:

Modifier

A list of modifier that change the structured order of article list.

Top

With a leading article, all other article will shown in a three column style. Use the modifier .article-layout--top to change to this variant.

Start

Shows the first (on desktop also the second) article a lot bigger, the 3., 4., & 5. article a lot smaller.