4.2.1 molecules.teaser.unpublished Teaser unpublished

Toggle example guides Toggle HTML markup

Example
unpublished

Teaser title

• 29 Jan 2017
Blog
Open Social Developers
Markup: 03-molecules/teaser/teaser-unpublished.twig
<div class="card teaser teaser--unpublished">

  <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>

    <!-- diff -->
    <div class="teaser__status">unpublished</div>

  </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-author">
              <a title="View user profile." href="#">Michelle Clark </a>
            </div>
            <div class="teaser__published-date"> &bullet; 29 Jan 2017 </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 teaser__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-community"></use>
        </svg>
      </div>

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

  </div>


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