Article Teaser

The .article component can contain a .article-teaser, which usually contains a picture as well as its title, teaser text, etc.

Also a list of related articles are shown within an .article, below the .article-teaser (see .article).

The following code examples shows how to use article teaser:

<div class="article">
  <a href="#" class="article-teaser">
    <span class="article-teaser__ad-info">Ad</span>
    <img class="article-teaser__ad-logo" src=".." alt="..">
    <time class="article-teaser__date" datetime="2020-01-01 01:01">01/01/20</time>
    <span class="article-teaser__source">Source</span>
    <span class="article-teaser__kicker">Kicker</span>
    <span class="article-teaser__media">
      <img class="article-teaser__image" width=".." height=".." src=".." alt="..">
    </span>
    <span class="article-teaser__title">Hello World</span>
    <span class="article-teaser__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</span>
    <span class="article-teaser__more">More</span>
  </a>
  <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>

We can change the positioning of the elements within the .article-teaser by using a list of modifier. This modifier, especially the structured one, will reset to a default layout when the container of the .article is to small, when the screen size is same to XS & SM sizes or when the modifier .article-teaser--small is used on the teaser.

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

• .article-teaser - required this contains a article teaser, should be an <a> link
• .article-teaser__title - required article title, should be an inline HTML tag
• .article-teaser__ad-info - an information that the article is an ad, should be an inline HTML tag
• .article-teaser__ad-logo - a logo of the ad source, should be an inline HTML tag
• .article-teaser__date - the date time of the article, should be a <time> tag with [datetime] attribute
• .article-teaser__source - the source of the article, should be an inline HTML tag
• .article-teaser__kicker - a small kicker text of the article, should be an inline HTML tag
• .article-teaser__media - a container for a image or a video, should be an inline HTML tag
• .article-teaser__image - a related image of the article
• .article-teaser__video - a related video of the article
• .article-teaser__text - a teaser text, that could be a bit longer, should be an inline HTML tag
• .article-teaser__more - a container for a link or button with a more text (add a .button within the container or a span with the .hyperlink class, see Hyperlink), should be an inline HTML tag
• Modifier
  • .article-teaser--small - reset the layout of the teaser to the XS & SM screen size design
  • .article-teaser--media-left - change the layout of the teaser, show the media (image/video) on the left
  • .article-teaser--meta-line - change the layout of the teaser, show .article-teaser__ad-info, .article-teaser__source and .article-teaser__date in one line, separate by a hyphen
  • .article-teaser--overlap-media - change the layout of the teaser, add this modifier to any element of the teaser (like .article-teaser__more) and the element will overlap over the media, top stretched positioning
  • .article-teaser--overlap-media-end - same as overlap media, but with bottom stretched positioning
  • .article-teaser--hover - normally only the title and the text are hovered as a clickable element within a card, even if the entire card is a link. With this modifier, the entire card becomes an optically clickable element
  • .article-teaser--image-hover - the image in a article card usually has no special hover effect, with this modifier the image gets a slight zoom effect with a hover, this modifier can be combined with the .article-teaser--hover modifier
  • .article-teaser__media--play-button - adds a youtube like play button on top of an image
  • .article-teaser--pro - only on DE themes, will change the font color
  • .article-teaser--pro-invert - only on DE themes, will change the font color
  • .article-teaser--{DIRECTION}-{POSITION} - change position of a teaser element
  • .article-teaser--{DIRECTION}-{POSITION}-{SCREEN_SIZE} - until the screen size
  • .article-teaser--no-hyphen - remove the hyphen from an element if it is use the .article-teaser--meta-line
  • .article-teaser--bold-title - change title weight

The variables are:

• DIRECTION horizontal, vertical
• POSITION start, center, end, stretch
• SCREEN_SIZE xl, lg, md, sm, xs

NOTE In most variants, the elements (.article-teaser__media, .article-teaser__more, …) are not displayed by default. These can be displayed with the global modifier .display-block.

ATTENTION the .article-teaser should be an <a> link, but then every HTML element within the link should be a inline HTML tag like <span>, because in HTML block elements (like <div>) within an inline elements (like <a>) are not allowed, see CSS 2.1 Spec

Basic Example:

Layout Modifier

You can change the positions of the elements within the article teaser with the different layout modifier.

Small

Ony XS & SM screens (see Responsive Design) the teaser will shown in a single row. Add the .article-teaser--small modifier to force this layout on every screens.

Media Left

Show the media (image/video) on left side.

Overlap Media

Show the media (image/video) on left side.

Meta Line

Merge the elements .article-teaser__ad-info, .article-teaser__source and .article-teaser__date in one line. Except if the date is on the left in the default design on large screens.

Kicker Line

Merge the elements .article-teaser__ad-info, .article-teaser__kicker and .article-teaser__date in one line.

Modifier

The component can be customized using class modifiers.

Hover Effects

Normally only the title and the text have a hover effect. With the .article-teaser--hover or .article-teaser--image-hover modifier you can change the effects.

Pro & Pro Invert

In this variant the .article-teaser__more link is front of the media and should combine with a .button.button--pro-primary, see Buttons.

Their is also the Pro and Pro Invert variant, (the second needs a dark background).

Position

Combine the