<div class="c-teaser-container medium:grid-cols-3">
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_11.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
<p><a href="/">Enim lobortis scelerisque fermentum dui faucibus in ornare adipiscing diam donec adipiscing tristique risus nec feugiat.</a></p>
<p class="hidden medium:block"><a href="/">Donec aliquet lacus vel nunc euismod dictum ornare quis augue. Aliquam vel laoreet ligula, nec vehicula justo. Morbi venenatis porttitor mauris, id iaculis risus rhoncus eget. Maecenas egestas ultricies ipsum nec tempus. Aliquam ultricies mauris at erat porttitor, et posuere orci egestas.</a></p>
<div class="c-icon-link-container">
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Nonumy eirmod tempor</span>
<span><strong>Dolor sitament lorem</strong></span>
</a>
</div>
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Dolor sitament lorem</span>
<span><strong>Lorem ipsum</strong></span>
</a>
</div>
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Lorem ipsum</span>
<span><strong>Sadipscing elitr</strong></span>
</a>
</div>
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Alle anzeigen</span>
</a>
</div>
</div>
</div>
<div class="c-teaser__bottom">
<p class="medium:hidden"><a href="/">Donec aliquet lacus vel nunc euismod dictum ornare quis augue. Aliquam vel laoreet ligula, nec vehicula justo. Morbi venenatis porttitor mauris, id iaculis risus rhoncus eget. Maecenas egestas ultricies ipsum nec tempus. Aliquam ultricies mauris at erat porttitor, et posuere orci egestas.</a></p>
<div class="c-price">
<span class="c-price__old">€ 20</span>
<span class="c-price__new">€ 15</span>
</div>
<div class="grow-0">
<button class="
c-button
c-button--primary
c-button--outlined
c-button--large
">
<span class="
c-button__label
">Jetzt bestellen</span>
</button>
</div>
</div>
</div>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_8.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
<p><a href="/">Beque volutpat ac tincidunt vitae semper quis lectus nulla. Nullam vehicula ipsum a arcu.</a></p>
<p class="hidden medium:block"><a href="/">Sed sed urna turpis. Sed vel varius ex. Suspendisse semper erat quis risus dignissim ultrices. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>
<div class="c-icon-link-container">
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Sadipscing elitr</span>
<span><strong>Dolor sitament lorem</strong></span>
</a>
</div>
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Dolor sitament lorem</span>
<span><strong>Nonumy eirmod tempor</strong></span>
</a>
</div>
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Lorem ipsum</span>
<span><strong>Sadipscing elitr</strong></span>
</a>
</div>
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Alle anzeigen</span>
</a>
</div>
</div>
</div>
<div class="c-teaser__bottom">
<p class="medium:hidden"><a href="/">Sed sed urna turpis. Sed vel varius ex. Suspendisse semper erat quis risus dignissim ultrices. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>
<div class="c-price">
<span class="c-price__old">€ 20</span>
<span class="c-price__new">€ 15</span>
</div>
<div class="grow-0">
<button class="
c-button
c-button--primary
c-button--outlined
c-button--large
">
<span class="
c-button__label
">Jetzt bestellen</span>
</button>
</div>
</div>
</div>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_18.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Lorem ipsum dolor sit amet</a></h3>
<p><a href="/">Leo in vitae turpis massa sed elementum. Facilisis gravida neque convallis in nisl nisi scelerisque.</a></p>
<p class="hidden medium:block"><a href="/">Lorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitament. Lorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitamentLorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitamentLorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitament.</a></p>
<div class="c-icon-link-container">
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Dolor sitament lorem</span>
<span><strong>Sadipscing elitr</strong></span>
</a>
</div>
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Sadipscing elitr</span>
<span><strong>Lorem ipsum</strong></span>
</a>
</div>
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Lorem ipsum</span>
<span><strong>Dolor sitament lorem</strong></span>
</a>
</div>
<div class="c-icon-link">
<span class="c-icon-link__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#arw-right"></use>
</svg>
</span>
<a href="/" class="c-icon-link__label">
<span>Alle anzeigen</span>
</a>
</div>
</div>
</div>
<div class="c-teaser__bottom">
<p class="medium:hidden"><a href="/">Lorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitament. Lorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitamentLorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitamentLorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitament.</a></p>
<div class="c-price">
<span class="c-price__old">€ 20</span>
<span class="c-price__new">€ 15</span>
</div>
<div class="grow-0">
<button class="
c-button
c-button--primary
c-button--outlined
c-button--large
">
<span class="
c-button__label
">Jetzt bestellen</span>
</button>
</div>
</div>
</div>
</div>
<hr class="fractal__hr">
<div class="c-teaser-container medium:grid-cols-3">
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_2.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<h3 class="text-style-subheadline-4"><a href="/">Lorem ipsum dolor sit amet</a></h3>
</div>
</div>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_1.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
</div>
</div>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_12.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<h3 class="text-style-subheadline-4"><a href="/">Lorem ipsum dolor sit amet</a></h3>
</div>
</div>
</div>
<hr class="fractal__hr">
<div class="c-teaser-container medium:grid-cols-4">
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_17.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<h3 class="text-style-subheadline-4"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
</div>
</div>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_13.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
</div>
</div>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_7.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
</div>
</div>
<div class="
c-teaser
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_9.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<h3 class="text-style-subheadline-4"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
</div>
</div>
</div>
<hr class="fractal__hr">
<div class="c-teaser-container medium:grid-cols-4">
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_10.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#cal"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Consetetur sadipscing elitr
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Dolor sitament lorem
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_9.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#cal"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Consetetur sadipscing elitr
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Nonumy eirmod tempor
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_9.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#cal"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Lorem ipsum
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Consetetur sadipscing elitr
</p>
</div>
</div>
</div>
<div class="
c-teaser
c-teaser--on-small:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_10.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Ut enim ad minim veniam, quis nostrud</a></h3>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#cal"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Consetetur sadipscing elitr
</p>
</div>
<div class="c-icon-tag">
<span class="c-icon-tag__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#time"></use>
</svg>
</span>
<p class="c-icon-tag__label text-style-mini">
Nonumy eirmod tempor
</p>
</div>
</div>
</div>
</div>
<hr class="fractal__hr">
<div class="c-teaser-container">
<div class="
c-teaser
c-teaser--on-all:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_19.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>
<p class="hidden medium:block"><a href="/">Quisque et nisi purus. Nulla massa erat, rutrum ac sagittis ut, pharetra vel risus. Duis tortor justo. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>
</div>
<div class="c-teaser__bottom">
<p class="medium:hidden"><a href="/">Quisque et nisi purus. Nulla massa erat, rutrum ac sagittis ut, pharetra vel risus. Duis tortor justo. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>
</div>
</div>
<div class="
c-teaser
c-teaser--on-all:image-left
">
<div class="c-teaser__image">
<a href="/">
<img class="
c-image
" src="../../img/placeholder/500x300/image_16.jpg" alt="Lorem alt ipsum" />
</a>
</div>
<div class="c-teaser__compact">
<p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>
<h3 class="text-style-subheadline-4"><a href="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>
<p class="hidden medium:block"><a href="/">Donec aliquet lacus vel nunc euismod dictum ornare quis augue. Aliquam vel laoreet ligula, nec vehicula justo. Morbi venenatis porttitor mauris, id iaculis risus rhoncus eget. Maecenas egestas ultricies ipsum nec tempus. Aliquam ultricies mauris at erat porttitor, et posuere orci egestas.</a></p>
</div>
<div class="c-teaser__bottom">
<p class="medium:hidden"><a href="/">Donec aliquet lacus vel nunc euismod dictum ornare quis augue. Aliquam vel laoreet ligula, nec vehicula justo. Morbi venenatis porttitor mauris, id iaculis risus rhoncus eget. Maecenas egestas ultricies ipsum nec tempus. Aliquam ultricies mauris at erat porttitor, et posuere orci egestas.</a></p>
</div>
</div>
</div>
<div class="c-teaser-container medium:grid-cols-3">
{% for index in [1, 2, 3] %}
{% render '@teaser', {
include: ['image', 'kicker', 'title', 'text', 'iconlink', 'icontag', 'price', 'text-long', 'cta']
} %}
{% endfor %}
</div>
<hr class="fractal__hr">
<div class="c-teaser-container medium:grid-cols-3">
{% for index in [1, 2, 3] %}
{% render '@teaser', { include: ['image', 'title'] } %}
{% endfor %}
</div>
<hr class="fractal__hr">
<div class="c-teaser-container medium:grid-cols-4">
{% for index in [1, 2, 3, 4] %}
{% render '@teaser', { include: ['image', 'title'] } %}
{% endfor %}
</div>
<hr class="fractal__hr">
<div class="c-teaser-container medium:grid-cols-4">
{% for index in [1, 2, 3, 4] %}
{% render '@teaser', {
include: ['image', 'kicker', 'title', 'icontag-event'],
on_small: { image_left: true }
} %}
{% endfor %}
</div>
<hr class="fractal__hr">
<div class="c-teaser-container">
{% for index in [1, 2] %}
{% render '@teaser', {
include: ['image', 'kicker', 'title', 'text-long'],
on_all: { image_left: true }
} %}
{% endfor %}
</div>
/* No context defined. */
No notes defined.