<h2 class="styleguide-title">Collections</h2>
<div class="preview-inner-container">
    <h2 class="styleguide">Teaser collection</h2>
    <ul class="teasers">
        <li>
            <div class="teaser">
                <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text </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 </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>
                <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 </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>
                <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 </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>
                <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 </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>
                <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 </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>
                <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 </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>
                <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 </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>
</div>

<div class="preview-inner-container">
    <h2 class="styleguide">Topic collection</h2>
    <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>
</div>
<h2 class="styleguide-title">Collections</h2>
<div class="preview-inner-container">
  <h2 class="styleguide">Teaser collection</h2>
  {% include '@teaser-collection' with {
      "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);"
  } %}
</div>

<div class="preview-inner-container">
  <h2 class="styleguide">Topic collection</h2>
  {% include '@teaser-collection--topics' with {
      "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);"
  } %}
</div>
/* No context defined for this component. */

There are no notes for this item.