4.3 Teaser

Toggle example guides Toggle HTML markup

A teaser is a concept in Drupal.

A teaser is a short piece of text, usually the first paragraph or two of an article. This text is then displayed in most lists, including the default home page (/node). Many modules (including Views) are designed to work with node teasers, and the concept of a "teaser" vs the node "body" is integral to the workings of Drupal core and the Drupal UI.

The teaser can have image but it is not mandatory. Teasers can have one or two buttons (of type flat) which are in the actionbar. Content hierarchy is achieved by the order of fields and the use of typography. Try to limit the amount of information and actions in a teaser. On mobile the image field is not displayed. On tablet and wider the maximum height of the teaser should match the heigth of the image_style.

Example

Teaser title

29 Jan 2018 •
Michelle Clark
Blog
Open Social Developers
6
Read more
Markup: 03-molecules/teaser/teaser.twig 
<div class="card teaser">

  <div class="teaser__image" >

    <div class="teaser__teaser-type">
      <svg class="teaser__teaser-type-icon">
        <use xlink:href="#icon-topic"></use>
      </svg>
    </div>

    <a href="#">
      <img src="kss-assets/teaser-1.jpg" alt="" class="img-responsive">
    </a>

  </div>

  <div class="teaser__body">
    <div class="teaser__content">

      <h4 class="teaser__title"> <a href="#">Teaser title</a></h4>

      <div class="teaser__content-line">
        <svg class="teaser__content-type-icon">
          <use xlink:href="#icon-account_circle"></use>
        </svg>
        <div class="teaser__content-text">
          <div class="teaser__published">
            <div class="teaser__published-date"> 29 Jan 2018 &bullet; </div>
            <div class="teaser__published-author">
              <a title="View user profile." href="#">Michelle Clark </a>
            </div>

          </div>
        </div>
      </div>

      <div class="teaser__content-line">
        <svg class="teaser__content-type-icon">
          <use xlink:href="#icon-event"></use>
        </svg>
        <div class="teaser__content-text">Blog</div>
      </div>

      <div class="teaser__content-line">
        <svg class="teaser__content-type-icon">
          <use xlink:href="#icon-group"></use>
        </svg>
        <div class="teaser__content-text">Open Social Developers</div>
      </div>

    </div>

    <div class="card__actionbar">

      <a href="#" class="badge badge--pill badge-default teaser__badge">
        <span class="badge__container">
          <svg class="badge__icon">
              <use xlink:href="#icon-comment"></use>
            </svg>
            <span class="badge__label">6</span>
        </span>
      </a>

      <div class="badge teaser__badge" title="The visibility of this content is set to public">
        <svg class="badge__icon">
          <use xlink:href="#icon-public"></use>
        </svg>
      </div>

      <a href="#" class="card__link">Read more</a>
    </div>

  </div>


</div>
Source: 03-molecules/teaser/teaser.scss, line 1