Article Upgrade Notes

If their is an major rework in the .article component, this site describe how to handle the changes.

SG v1.11.0

With the version v1.11.0, we reworked the .article components, formerly .news. Here is a integration description:

1. Handle article block & element classes

Rename the following block and element classes:

.news__card ➔ .article-teaser
.news__ad-info ➔ .article-teaser__ad-info
.news__ad-logo ➔ .article-teaser__ad-logo
.news__date ➔ .article-teaser__date
.news__source ➔ .article-teaser__source
.news__kicker ➔ .article-teaser__kicker
.news__media-image ➔ .article-teaser__image
.news__media-video ➔ .article-teaser__video
.news__media ➔ .article-teaser__media
.news__title ➔ .article-teaser__title
.news__teaser ➔ .article-teaser__text
.news__read-more ➔ .article-teaser__more
.news__related-text ➔ .article-teaser__related-title

Example from ≤SGv1.10.0

<div class="news">
  <a href="#" class="news__teaser">
    <span class="news__ad-info ad-hint">ad</span>
    <img class="news__ad-logo" src=".." alt="..">
    <time class="news__date" datetime="..">..</time>
    <span class="news__source">source</span>
    <span class="news__kicker">kicker</span>
    <span class="news__media">
      <img class="news__media-image" width=".." height=".." src=".." alt="..">
    </span>
    <span class="news__title">title</span>
    <span class="news__text">text</span>
    <span class="news__read-more">more</span>
  </a>
  <ul class="news__related">
    <li class="news__related-item"><a href="#" class="news__related-text">related</a></li>
    <li class="news__related-item"><a href="#" class="news__related-text">related</a></li>
  </ul>
</div>

Example from ≥SGv1.11.0

<div class="article">
  <a href="#" class="article-teaser">
    <span class="article-teaser__ad-info ad-hint">ad</span>
    <img class="article-teaser__ad-logo"  src=".." alt="..">
    <time class="article-teaser__date" datetime="..">..</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">title</span>
    <span class="article-teaser__text">text</span>
    <span class="article-teaser__more">more</span>
  </a>
  <ul class="article__related">
    <li class="article__related-item"><a href="#" class="article__related-title">related</a></li>
    <li class="article__related-item"><a href="#" class="article__related-title">related</a></li>
  </ul>
</div>

2. Handle article modifier classes

All modifier are changed.

Also all .news--** variants modifier where changed to .article-teaser--** variants. First rename the modifier and secondly moved the modifier from the .news to the .article-teaser.

List of all modifier that must be renamed & moved:

.news--item ➔ .article-teaser--meta-line
.news--item-small ➔ .article-teaser--small.article-teaser--meta-line
.news--item-with-media ➔ .article-teaser--media-left.article-teaser--meta-line
.news--item-with-media-small ➔ .article-teaser--small.article-teaser--meta-line
.news--card-hover ➔ .article-teaser--hover
.news--image-hover ➔ .article-teaser--image-hover
.news__media--play-button ➔ .article-teaser__media--play-button

Example from ≤SGv1.10.0

<div class="news news--item">
  <a href="#" class="news__teaser">
    <span class="news__title">title</span>
  </a>
</div>

Example from ≥SGv1.11.0

<div class="article">
  <a href="#" class="article-teaser article-teaser--item">
    <span class="article-teaser__title">title</span>
  </a>
</div>

3. Handle layout

Add a new element .article-layout__list. The element has the .article-layout as parent and the .article list as children. It is needed for container queries.

Example from ≤SGv1.10.0

<div class="news-layout">
  <div class="news">
    <a href="#" class="news-teaser news-teaser--item">
      <span class="news-teaser__title">title</span>
    </a>
  </div>
  <div class="news">
    <a href="#" class="news-teaser news-teaser--item">
      <span class="news-teaser__title">title</span>
    </a>
  </div>
  <div class="news">
    <a href="#" class="news-teaser news-teaser--item">
      <span class="news-teaser__title">title</span>
    </a>
  </div>
</div>

Example from ≥SGv1.11.0

<div class="article-layout">
  <div class="article-layout__list">
    <div class="article">
      <a href="#" class="article-teaser article-teaser--item">
        <span class="article-teaser__title">title</span>
      </a>
    </div>
    <div class="article">
      <a href="#" class="article-teaser article-teaser--item">
        <span class="article-teaser__title">title</span>
      </a>
    </div>
    <div class="article">
      <a href="#" class="article-teaser article-teaser--item">
        <span class="article-teaser__title">title</span>
      </a>
    </div>
  </div>
</div>

Reasons for the rework

Up until now, this component was only suitable for displaying news teasers. But the core idea behind the .news class was always that it displays individual news, regardless of whether it is just a teaser or its the complete content.

During the work on finanzen.net, a special class called .news-content was created, which was not part of the Style Guide and made special adjustments to the styles of the text, images, etc. in a news.

But exactly such adjustments should be made within the .news class. We have therefore revised the class and made it fit so that complete news content, generalized as “article” can also be displayed in the future. These adjustments will be incorporated in a later version. However, a page has already been prepared for these adjustments: .article-content.