<ul class="teasers section--accent js-masonry-layout">
    <li>
        <div class="teaser">
            <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text 0</a>
            <img src="https://loremflickr.com/650/400/ghent?random=0" alt="alt text" class="teaser__image" />
            <div class="teaser__content teaser__content--section">
                <h3 id="uid0">Title text 0</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 1</a>
            <img src="https://loremflickr.com/650/400/ghent?random=1" alt="alt text" class="teaser__image" />
            <div class="teaser__content teaser__content--section">
                <h3 id="uid1">Title text 1</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 2</a>
            <img src="https://loremflickr.com/650/400/ghent?random=2" alt="alt text" class="teaser__image" />
            <div class="teaser__content teaser__content--section">
                <h3 id="uid2">Title text 2</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 3</a>
            <img src="https://loremflickr.com/650/400/ghent?random=3" alt="alt text" class="teaser__image" />
            <div class="teaser__content teaser__content--section">
                <h3 id="uid3">Title text 3</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 4</a>
            <img src="https://loremflickr.com/650/400/ghent?random=4" alt="alt text" class="teaser__image" />
            <div class="teaser__content teaser__content--section">
                <h3 id="uid4">Title text 4</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 5</a>
            <img src="https://loremflickr.com/650/400/ghent?random=5" alt="alt text" class="teaser__image" />
            <div class="teaser__content teaser__content--section">
                <h3 id="uid5">Title text 5</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 6</a>
            <img src="https://loremflickr.com/650/400/ghent?random=6" alt="alt text" class="teaser__image" />
            <div class="teaser__content teaser__content--section">
                <h3 id="uid6">Title text 6</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 section--accent js-masonry-layout">
    {% for i in 0..6 %}
        <li>
            {% include '@teaser' with {
                "teaser_image_src": "https://loremflickr.com/650/400/ghent?random="~i,
                "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 " ~ i,
                "teaser_uid": "uid" ~ i,
                "teaser_link_text": "read more",
                "teaser_link_link" : "javascript:void(0);"
            } %}
        </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).