<ul class="teasers teasers--topics">
    <li>
        <div class="teaser">
            <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
            <div class="teaser__content teaser__content--topic">
                <h3 id="uid0">Title text </h3>

                <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                <a href='javascript:void(0);' aria-labelledby="uid0" title="">read more</a>
            </div>
        </div>

    </li>
    <li>
        <div class="teaser">
            <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
            <div class="teaser__content teaser__content--topic">
                <h3 id="uid1">Title text </h3>

                <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                <a href='javascript:void(0);' aria-labelledby="uid1" title="">read more</a>
            </div>
        </div>

    </li>
    <li>
        <div class="teaser">
            <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
            <div class="teaser__content teaser__content--topic">
                <h3 id="uid2">Title text </h3>

                <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                <a href='javascript:void(0);' aria-labelledby="uid2" title="">read more</a>
            </div>
        </div>

    </li>
    <li>
        <div class="teaser">
            <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
            <div class="teaser__content teaser__content--topic">
                <h3 id="uid3">Title text </h3>

                <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                <a href='javascript:void(0);' aria-labelledby="uid3" title="">read more</a>
            </div>
        </div>

    </li>
    <li>
        <div class="teaser">
            <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
            <div class="teaser__content teaser__content--topic">
                <h3 id="uid4">Title text </h3>

                <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                <a href='javascript:void(0);' aria-labelledby="uid4" title="">read more</a>
            </div>
        </div>

    </li>
    <li>
        <div class="teaser">
            <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
            <div class="teaser__content teaser__content--topic">
                <h3 id="uid5">Title text </h3>

                <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                <a href='javascript:void(0);' aria-labelledby="uid5" title="">read more</a>
            </div>
        </div>

    </li>
    <li>
        <div class="teaser">
            <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
            <div class="teaser__content teaser__content--topic">
                <h3 id="uid6">Title text </h3>

                <p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

                <a href='javascript:void(0);' aria-labelledby="uid6" title="">read more</a>
            </div>
        </div>

    </li>
</ul>
<ul class="teasers teasers--topics">
  {% for i in 0..6 %}
    <li>
      {% include '@teaser--topic' with {
        "teaser_paragraph_text": teaser_paragraph_text,
        "teaser_h3_title": teaser_h3_title,
        "teaser_uid":  teaser_uid ~ i,
        "teaser_link_text": teaser_link_text,
        "teaser_link_link": teaser_link_link
      } %}
    </li>
  {% endfor %}
</ul>
{
  "teaser_image_src": "https://loremflickr.com/650/400/ghent?random=",
  "teaser_image_alt_text": "alt text",
  "teaser_paragraph_text": "Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.",
  "teaser_h3_title": "Title text ",
  "teaser_uid": "uid",
  "teaser_link_text": "read more",
  "teaser_link_link": "javascript:void(0);"
}
  • Content:
    // todo: refactor to grid layout
    ul.teasers {
      @include make-row;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      list-style: none;
    
      li {
        @include make-mobile-column(12);
        @include make-tablet-column(6);
        @include make-desktop-column(4);
        flex: 0 1 auto;
        margin-bottom: $gutter-width;
      }
    
      &--topics {
        li {
          margin: $gutter-width 0;
        }
      }
    }
    
  • URL: /components/raw/teaser-collection/_teaser-collection.scss
  • Filesystem Path: components/41-organisms/teaser-collection/_teaser-collection.scss
  • Size: 380 Bytes
  • Content:
    /**
    * @file
    */
    'use strict';
    
    (function ($) {
      $(window).on('load', function (e) {
        $('.js-masonry-layout').masonry({
          itemSelector: 'li',
          columnWidth: 'li',
          percentPosition: true
        });
      });
    })(jQuery);
    
  • URL: /components/raw/teaser-collection/teaser-collection.binding.js
  • Filesystem Path: components/41-organisms/teaser-collection/teaser-collection.binding.js
  • Size: 227 Bytes

Teaser collection

Accessibility

  • A collection of teasers forms a list (WCAG 1.3.1).