Article

With this component, article are displayed as a teaser (see .article-teaser) or with its complete content (see .article-content).

Every article teaser or article content is within the generally .article component, which represents a single article.

A article can append related article as a list below the teaser/content.

Multiple article can be structured within the .article-layout component.

The following code examples shows how to use a single article:

<div class="article">
  <!-- one article-teaser or one article-content -->

  <ul class="article__related">
    <li class="article__related-item">
      <a href="#" class="article__related-title">Hello World 01</a>
    </li>
    <li class="article__related-item">
      <a href="#" class="article__related-title">Hello World 02</a>
    </li>
    <li class="article__related-item">
      <a href="#" class="article__related-title">Hello World 03</a>
    </li>
  </ul>
</div>

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

• .article - required the block represent a single article as teaser or within its complete content
• .article__related - a list of related article, only shows their titles
• .article__related-item - a single related article
• .article__related-title - title of the article, should be an <a> link

Teaser Generator

The following generator helps to create your own article teaser or a list of article teaser.