Use the teaser component in a collection to show teasers of content.
The teaser component is used in collections on overview and on filter pages to show the overview of the content with links to the content. The teaser component can also be used in a collection on detail pages to show and link to related content.
Do not use the teaser component as a standalone component. Always use the teaser component in a collection.
A teaser can consist of the following parts:
The entire teaser block is clickable. When clicking the teaser block, the primary teaser link is followed.
The secondary teaser links inside the teaser block are also clickable. When clicking a secondary teaser link, that links is followed. When not clicking on a secondary teaser link but anywhere else in the teaser block, the primary teaser link is followed.
When using teasers without image, either set a body class teaser--no-images or add the no-image class to the teaser element.
Within a teaser grid, always use the same teaser styles.
<!-- Default -->
{% if tags %}
{% set tagList = [] %}
{% for tag in tags %}
{% set tagList = tagList|merge([{text: tag, type: 'span-tag'}]) %}
{% endfor %}
{% endif %}
<li class="teaser{% if type %} {{ type }}{% endif %}{% if modifier %} {{ modifier }}{% endif %}">
<article class="teaser-content">
{# title must be the first element in markup #}
<div class="content__second">
{% if title_icon %}
<i class="icon-{{ title_icon }}" aria-hidden="true"></i>
{% endif %}
{% include '@heading' with {
'heading': 'h3',
'heading_class': 'h4',
'heading_text': title,
'type': 'bg-none'
} %}
{% if tagList and tags_position == 'bottom' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
{% if event_date or published_date %}
{% if event_date %}
{# Events can consist of two timestamps, so we wrap it in a span. #}
<div class="date">
<span>
<time datetime="{{ event_date.datetime_1 }}">{{ event_date.text_1 }}</time>
{% if event_date.datetime_2 and event_date.text_2 %}
<time datetime="{{ event_date.datetime_2 }}">{{ event_date.text_2 }}</time>
{% endif %}
</span>
</div>
{% else %}
<div class="date">
<time class="published" datetime="{{ teaser_datetime }}" pubdate="pubdate">{{ published_date }}</time>
</div>
{% endif %}
{% endif %}
{% if paragraph_text %}
{% include '@paragraph' with {
'text': paragraph_text
} %}
{% endif %}
{% if list %}
<ul class="teaser-links">
{% for list_item in list %}
<li>
{% include '@link' with {
'text': list_item,
'link': '#',
'modifier': 'no-icon'
} %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if link %}
{% include '@link' with {
'text': 'Read more',
'link': link,
'modifier': 'read-more standalone-link',
'hidden_read_more': 'about '~title
} %}
{% endif %}
</div>
<div class="content__first">
<div class="tags-label-wrapper">
{% if label_text %}
{% include '@label' with {
'label': label_text,
'icon': 'icon-tag'
} %}
{% endif %}
{% if tagList and tags_position == 'top' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
</div>
{% if image_src or image_placeholders %}
<div class="figure-wrapper">
{% include '@image' with {
src: image_src,
alt_text: image_alt_text,
ratio: image_ratio
} %}
</div>
{% endif %}
</div>
</article>
<a href="{{ link }}" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">{{ title }}</a>
</li>
<!-- Teaser No Image -->
{% if tags %}
{% set tagList = [] %}
{% for tag in tags %}
{% set tagList = tagList|merge([{text: tag, type: 'span-tag'}]) %}
{% endfor %}
{% endif %}
<li class="teaser{% if type %} {{ type }}{% endif %}{% if modifier %} {{ modifier }}{% endif %}">
<article class="teaser-content">
{# title must be the first element in markup #}
<div class="content__second">
{% if title_icon %}
<i class="icon-{{ title_icon }}" aria-hidden="true"></i>
{% endif %}
{% include '@heading' with {
'heading': 'h3',
'heading_class': 'h4',
'heading_text': title,
'type': 'bg-none'
} %}
{% if tagList and tags_position == 'bottom' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
{% if event_date or published_date %}
{% if event_date %}
{# Events can consist of two timestamps, so we wrap it in a span. #}
<div class="date">
<span>
<time datetime="{{ event_date.datetime_1 }}">{{ event_date.text_1 }}</time>
{% if event_date.datetime_2 and event_date.text_2 %}
<time datetime="{{ event_date.datetime_2 }}">{{ event_date.text_2 }}</time>
{% endif %}
</span>
</div>
{% else %}
<div class="date">
<time class="published" datetime="{{ teaser_datetime }}" pubdate="pubdate">{{ published_date }}</time>
</div>
{% endif %}
{% endif %}
{% if paragraph_text %}
{% include '@paragraph' with {
'text': paragraph_text
} %}
{% endif %}
{% if list %}
<ul class="teaser-links">
{% for list_item in list %}
<li>
{% include '@link' with {
'text': list_item,
'link': '#',
'modifier': 'no-icon'
} %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if link %}
{% include '@link' with {
'text': 'Read more',
'link': link,
'modifier': 'read-more standalone-link',
'hidden_read_more': 'about '~title
} %}
{% endif %}
</div>
<div class="content__first">
<div class="tags-label-wrapper">
{% if label_text %}
{% include '@label' with {
'label': label_text,
'icon': 'icon-tag'
} %}
{% endif %}
{% if tagList and tags_position == 'top' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
</div>
{% if image_src or image_placeholders %}
<div class="figure-wrapper">
{% include '@image' with {
src: image_src,
alt_text: image_alt_text,
ratio: image_ratio
} %}
</div>
{% endif %}
</div>
</article>
<a href="{{ link }}" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">{{ title }}</a>
</li>
<!-- Teaser Background -->
{% if tags %}
{% set tagList = [] %}
{% for tag in tags %}
{% set tagList = tagList|merge([{text: tag, type: 'span-tag'}]) %}
{% endfor %}
{% endif %}
<li class="teaser{% if type %} {{ type }}{% endif %}{% if modifier %} {{ modifier }}{% endif %}">
<article class="teaser-content">
{# title must be the first element in markup #}
<div class="content__second">
{% if title_icon %}
<i class="icon-{{ title_icon }}" aria-hidden="true"></i>
{% endif %}
{% include '@heading' with {
'heading': 'h3',
'heading_class': 'h4',
'heading_text': title,
'type': 'bg-none'
} %}
{% if tagList and tags_position == 'bottom' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
{% if event_date or published_date %}
{% if event_date %}
{# Events can consist of two timestamps, so we wrap it in a span. #}
<div class="date">
<span>
<time datetime="{{ event_date.datetime_1 }}">{{ event_date.text_1 }}</time>
{% if event_date.datetime_2 and event_date.text_2 %}
<time datetime="{{ event_date.datetime_2 }}">{{ event_date.text_2 }}</time>
{% endif %}
</span>
</div>
{% else %}
<div class="date">
<time class="published" datetime="{{ teaser_datetime }}" pubdate="pubdate">{{ published_date }}</time>
</div>
{% endif %}
{% endif %}
{% if paragraph_text %}
{% include '@paragraph' with {
'text': paragraph_text
} %}
{% endif %}
{% if list %}
<ul class="teaser-links">
{% for list_item in list %}
<li>
{% include '@link' with {
'text': list_item,
'link': '#',
'modifier': 'no-icon'
} %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if link %}
{% include '@link' with {
'text': 'Read more',
'link': link,
'modifier': 'read-more standalone-link',
'hidden_read_more': 'about '~title
} %}
{% endif %}
</div>
<div class="content__first">
<div class="tags-label-wrapper">
{% if label_text %}
{% include '@label' with {
'label': label_text,
'icon': 'icon-tag'
} %}
{% endif %}
{% if tagList and tags_position == 'top' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
</div>
{% if image_src or image_placeholders %}
<div class="figure-wrapper">
{% include '@image' with {
src: image_src,
alt_text: image_alt_text,
ratio: image_ratio
} %}
</div>
{% endif %}
</div>
</article>
<a href="{{ link }}" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">{{ title }}</a>
</li>
<!-- Teaser Background No Image -->
{% if tags %}
{% set tagList = [] %}
{% for tag in tags %}
{% set tagList = tagList|merge([{text: tag, type: 'span-tag'}]) %}
{% endfor %}
{% endif %}
<li class="teaser{% if type %} {{ type }}{% endif %}{% if modifier %} {{ modifier }}{% endif %}">
<article class="teaser-content">
{# title must be the first element in markup #}
<div class="content__second">
{% if title_icon %}
<i class="icon-{{ title_icon }}" aria-hidden="true"></i>
{% endif %}
{% include '@heading' with {
'heading': 'h3',
'heading_class': 'h4',
'heading_text': title,
'type': 'bg-none'
} %}
{% if tagList and tags_position == 'bottom' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
{% if event_date or published_date %}
{% if event_date %}
{# Events can consist of two timestamps, so we wrap it in a span. #}
<div class="date">
<span>
<time datetime="{{ event_date.datetime_1 }}">{{ event_date.text_1 }}</time>
{% if event_date.datetime_2 and event_date.text_2 %}
<time datetime="{{ event_date.datetime_2 }}">{{ event_date.text_2 }}</time>
{% endif %}
</span>
</div>
{% else %}
<div class="date">
<time class="published" datetime="{{ teaser_datetime }}" pubdate="pubdate">{{ published_date }}</time>
</div>
{% endif %}
{% endif %}
{% if paragraph_text %}
{% include '@paragraph' with {
'text': paragraph_text
} %}
{% endif %}
{% if list %}
<ul class="teaser-links">
{% for list_item in list %}
<li>
{% include '@link' with {
'text': list_item,
'link': '#',
'modifier': 'no-icon'
} %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if link %}
{% include '@link' with {
'text': 'Read more',
'link': link,
'modifier': 'read-more standalone-link',
'hidden_read_more': 'about '~title
} %}
{% endif %}
</div>
<div class="content__first">
<div class="tags-label-wrapper">
{% if label_text %}
{% include '@label' with {
'label': label_text,
'icon': 'icon-tag'
} %}
{% endif %}
{% if tagList and tags_position == 'top' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
</div>
{% if image_src or image_placeholders %}
<div class="figure-wrapper">
{% include '@image' with {
src: image_src,
alt_text: image_alt_text,
ratio: image_ratio
} %}
</div>
{% endif %}
</div>
</article>
<a href="{{ link }}" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">{{ title }}</a>
</li>
<!-- Teaser Square -->
{% if tags %}
{% set tagList = [] %}
{% for tag in tags %}
{% set tagList = tagList|merge([{text: tag, type: 'span-tag'}]) %}
{% endfor %}
{% endif %}
<li class="teaser{% if type %} {{ type }}{% endif %}{% if modifier %} {{ modifier }}{% endif %}">
<article class="teaser-content">
{# title must be the first element in markup #}
<div class="content__second">
{% if title_icon %}
<i class="icon-{{ title_icon }}" aria-hidden="true"></i>
{% endif %}
{% include '@heading' with {
'heading': 'h3',
'heading_class': 'h4',
'heading_text': title,
'type': 'bg-none'
} %}
{% if tagList and tags_position == 'bottom' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
{% if event_date or published_date %}
{% if event_date %}
{# Events can consist of two timestamps, so we wrap it in a span. #}
<div class="date">
<span>
<time datetime="{{ event_date.datetime_1 }}">{{ event_date.text_1 }}</time>
{% if event_date.datetime_2 and event_date.text_2 %}
<time datetime="{{ event_date.datetime_2 }}">{{ event_date.text_2 }}</time>
{% endif %}
</span>
</div>
{% else %}
<div class="date">
<time class="published" datetime="{{ teaser_datetime }}" pubdate="pubdate">{{ published_date }}</time>
</div>
{% endif %}
{% endif %}
{% if paragraph_text %}
{% include '@paragraph' with {
'text': paragraph_text
} %}
{% endif %}
{% if list %}
<ul class="teaser-links">
{% for list_item in list %}
<li>
{% include '@link' with {
'text': list_item,
'link': '#',
'modifier': 'no-icon'
} %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if link %}
{% include '@link' with {
'text': 'Read more',
'link': link,
'modifier': 'read-more standalone-link',
'hidden_read_more': 'about '~title
} %}
{% endif %}
</div>
<div class="content__first">
<div class="tags-label-wrapper">
{% if label_text %}
{% include '@label' with {
'label': label_text,
'icon': 'icon-tag'
} %}
{% endif %}
{% if tagList and tags_position == 'top' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
</div>
{% if image_src or image_placeholders %}
<div class="figure-wrapper">
{% include '@image' with {
src: image_src,
alt_text: image_alt_text,
ratio: image_ratio
} %}
</div>
{% endif %}
</div>
</article>
<a href="{{ link }}" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">{{ title }}</a>
</li>
<!-- Teaser Square Double -->
{% if tags %}
{% set tagList = [] %}
{% for tag in tags %}
{% set tagList = tagList|merge([{text: tag, type: 'span-tag'}]) %}
{% endfor %}
{% endif %}
<li class="teaser{% if type %} {{ type }}{% endif %}{% if modifier %} {{ modifier }}{% endif %}">
<article class="teaser-content">
{# title must be the first element in markup #}
<div class="content__second">
{% if title_icon %}
<i class="icon-{{ title_icon }}" aria-hidden="true"></i>
{% endif %}
{% include '@heading' with {
'heading': 'h3',
'heading_text': title,
'type': 'bg-none'
} %}
{% if tagList and tags_position == 'bottom' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
{% if event_date or published_date %}
{% if event_date %}
{# Events can consist of two timestamps, so we wrap it in a span. #}
<div class="date">
<span>
<time datetime="{{ event_date.datetime_1 }}">{{ event_date.text_1 }}</time>
{% if event_date.datetime_2 and event_date.text_2 %}
<time datetime="{{ event_date.datetime_2 }}">{{ event_date.text_2 }}</time>
{% endif %}
</span>
</div>
{% else %}
<div class="date">
<time class="published" datetime="{{ teaser_datetime }}" pubdate="pubdate">{{ published_date }}</time>
</div>
{% endif %}
{% endif %}
{% if paragraph_text %}
{% include '@paragraph' with {
'text': paragraph_text
} %}
{% endif %}
{% if list %}
<ul class="teaser-links">
{% for list_item in list %}
<li>
{% include '@link' with {
'text': list_item,
'link': '#',
'modifier': 'no-icon'
} %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if link %}
{% include '@link' with {
'text': 'Read more',
'link': link,
'modifier': 'read-more standalone-link',
'hidden_read_more': 'about '~title
} %}
{% endif %}
</div>
<div class="content__first">
<div class="tags-label-wrapper">
{% if label_text %}
{% include '@label' with {
'label': label_text,
'icon': 'icon-tag'
} %}
{% endif %}
{% if tagList and tags_position == 'top' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
</div>
{% if image_src or image_placeholders %}
<div class="figure-wrapper__mobile">
{% include '@image' with {
src: image_src_mobile,
alt_text: image_alt_text,
ratio: image_ratio_mobile
} %}
</div>
{% endif %}
{% if image_src or image_placeholders %}
<div class="figure-wrapper__desktop">
{% include '@image' with {
src: image_src_desktop,
alt_text: image_alt_text,
ratio: image_ratio_desktop
} %}
</div>
{% endif %}
</div>
</article>
<a href="{{ link }}" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">{{ title }}</a>
</li>
<!-- Teaser Simple -->
{% if tags %}
{% set tagList = [] %}
{% for tag in tags %}
{% set tagList = tagList|merge([{text: tag, type: 'span-tag'}]) %}
{% endfor %}
{% endif %}
<li class="teaser{% if type %} {{ type }}{% endif %}{% if modifier %} {{ modifier }}{% endif %}">
<article class="teaser-content">
{# title must be the first element in markup #}
<div class="content__second">
{% if title_icon %}
<i class="icon-{{ title_icon }}" aria-hidden="true"></i>
{% endif %}
{% include '@heading' with {
'heading': 'h3',
'heading_class': 'h4',
'heading_text': title,
'type': 'bg-none'
} %}
{% if tagList and tags_position == 'bottom' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
{% if event_date or published_date %}
{% if event_date %}
{# Events can consist of two timestamps, so we wrap it in a span. #}
<div class="date">
<span>
<time datetime="{{ event_date.datetime_1 }}">{{ event_date.text_1 }}</time>
{% if event_date.datetime_2 and event_date.text_2 %}
<time datetime="{{ event_date.datetime_2 }}">{{ event_date.text_2 }}</time>
{% endif %}
</span>
</div>
{% else %}
<div class="date">
<time class="published" datetime="{{ teaser_datetime }}" pubdate="pubdate">{{ published_date }}</time>
</div>
{% endif %}
{% endif %}
{% if paragraph_text %}
{% include '@paragraph' with {
'text': paragraph_text
} %}
{% endif %}
{% if list %}
<ul class="teaser-links">
{% for list_item in list %}
<li>
{% include '@link' with {
'text': list_item,
'link': '#',
'modifier': 'no-icon'
} %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if link %}
{% include '@link' with {
'text': 'Read more',
'link': link,
'modifier': 'read-more standalone-link',
'hidden_read_more': 'about '~title
} %}
{% endif %}
</div>
<div class="content__first">
<div class="tags-label-wrapper">
{% if label_text %}
{% include '@label' with {
'label': label_text,
'icon': 'icon-tag'
} %}
{% endif %}
{% if tagList and tags_position == 'top' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
</div>
{% if image_src or image_placeholders %}
<div class="figure-wrapper">
{% include '@image' with {
src: image_src,
alt_text: image_alt_text,
ratio: image_ratio
} %}
</div>
{% endif %}
</div>
</article>
<a href="{{ link }}" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">{{ title }}</a>
</li>
<!-- Teaser Simple No Image -->
{% if tags %}
{% set tagList = [] %}
{% for tag in tags %}
{% set tagList = tagList|merge([{text: tag, type: 'span-tag'}]) %}
{% endfor %}
{% endif %}
<li class="teaser{% if type %} {{ type }}{% endif %}{% if modifier %} {{ modifier }}{% endif %}">
<article class="teaser-content">
{# title must be the first element in markup #}
<div class="content__second">
{% if title_icon %}
<i class="icon-{{ title_icon }}" aria-hidden="true"></i>
{% endif %}
{% include '@heading' with {
'heading': 'h3',
'heading_class': 'h4',
'heading_text': title,
'type': 'bg-none'
} %}
{% if tagList and tags_position == 'bottom' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
{% if event_date or published_date %}
{% if event_date %}
{# Events can consist of two timestamps, so we wrap it in a span. #}
<div class="date">
<span>
<time datetime="{{ event_date.datetime_1 }}">{{ event_date.text_1 }}</time>
{% if event_date.datetime_2 and event_date.text_2 %}
<time datetime="{{ event_date.datetime_2 }}">{{ event_date.text_2 }}</time>
{% endif %}
</span>
</div>
{% else %}
<div class="date">
<time class="published" datetime="{{ teaser_datetime }}" pubdate="pubdate">{{ published_date }}</time>
</div>
{% endif %}
{% endif %}
{% if paragraph_text %}
{% include '@paragraph' with {
'text': paragraph_text
} %}
{% endif %}
{% if list %}
<ul class="teaser-links">
{% for list_item in list %}
<li>
{% include '@link' with {
'text': list_item,
'link': '#',
'modifier': 'no-icon'
} %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if link %}
{% include '@link' with {
'text': 'Read more',
'link': link,
'modifier': 'read-more standalone-link',
'hidden_read_more': 'about '~title
} %}
{% endif %}
</div>
<div class="content__first">
<div class="tags-label-wrapper">
{% if label_text %}
{% include '@label' with {
'label': label_text,
'icon': 'icon-tag'
} %}
{% endif %}
{% if tagList and tags_position == 'top' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
</div>
{% if image_src or image_placeholders %}
<div class="figure-wrapper">
{% include '@image' with {
src: image_src,
alt_text: image_alt_text,
ratio: image_ratio
} %}
</div>
{% endif %}
</div>
</article>
<a href="{{ link }}" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">{{ title }}</a>
</li>
<!-- Teaser Simple Inverted -->
{% if tags %}
{% set tagList = [] %}
{% for tag in tags %}
{% set tagList = tagList|merge([{text: tag, type: 'span-tag'}]) %}
{% endfor %}
{% endif %}
<li class="teaser{% if type %} {{ type }}{% endif %}{% if modifier %} {{ modifier }}{% endif %}">
<article class="teaser-content">
{# title must be the first element in markup #}
<div class="content__second">
{% if title_icon %}
<i class="icon-{{ title_icon }}" aria-hidden="true"></i>
{% endif %}
{% include '@heading' with {
'heading': 'h3',
'heading_class': 'h4',
'heading_text': title,
'type': 'bg-none'
} %}
{% if tagList and tags_position == 'bottom' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
{% if event_date or published_date %}
{% if event_date %}
{# Events can consist of two timestamps, so we wrap it in a span. #}
<div class="date">
<span>
<time datetime="{{ event_date.datetime_1 }}">{{ event_date.text_1 }}</time>
{% if event_date.datetime_2 and event_date.text_2 %}
<time datetime="{{ event_date.datetime_2 }}">{{ event_date.text_2 }}</time>
{% endif %}
</span>
</div>
{% else %}
<div class="date">
<time class="published" datetime="{{ teaser_datetime }}" pubdate="pubdate">{{ published_date }}</time>
</div>
{% endif %}
{% endif %}
{% if paragraph_text %}
{% include '@paragraph' with {
'text': paragraph_text
} %}
{% endif %}
{% if list %}
<ul class="teaser-links">
{% for list_item in list %}
<li>
{% include '@link' with {
'text': list_item,
'link': '#',
'modifier': 'no-icon'
} %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if link %}
{% include '@link' with {
'text': 'Read more',
'link': link,
'modifier': 'read-more standalone-link',
'hidden_read_more': 'about '~title
} %}
{% endif %}
</div>
<div class="content__first">
<div class="tags-label-wrapper">
{% if label_text %}
{% include '@label' with {
'label': label_text,
'icon': 'icon-tag'
} %}
{% endif %}
{% if tagList and tags_position == 'top' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
</div>
{% if image_src or image_placeholders %}
<div class="figure-wrapper">
{% include '@image' with {
src: image_src,
alt_text: image_alt_text,
ratio: image_ratio
} %}
</div>
{% endif %}
</div>
</article>
<a href="{{ link }}" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">{{ title }}</a>
</li>
<!-- Teaser Wide -->
{% if tags %}
{% set tagList = [] %}
{% for tag in tags %}
{% set tagList = tagList|merge([{text: tag, type: 'span-tag'}]) %}
{% endfor %}
{% endif %}
<li class="teaser{% if type %} {{ type }}{% endif %}{% if modifier %} {{ modifier }}{% endif %}">
<article class="teaser-content">
{# title must be the first element in markup #}
<div class="content__second">
{% include '@heading' with {
'heading': 'h3',
'heading_class': 'h4',
'heading_text': title
} %}
{% if tagList %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
{% if address %}
<ul class="icon-list">
<li>
<i class='icon-marker'></i><span><strong> {{ address_location }} </strong> — {{ address }}</span>
</li>
</ul>
{% endif %}
{% if location %}
<div class="location">
<i class="icon-marker" aria-hidden="true"></i><span>{{ location }}</span>
</div>
{% endif %}
{% if list %}
{% include '@list' with {
'type': 'dash-separated-list',
'items': list
} %}
{% endif %}
{% if paragraph_text %}
{% include '@paragraph' with {
'text': paragraph_text
} %}
{% endif %}
{% include '@link' with {
'text': link_text,
'link': link,
'modifier': 'read-more standalone-link',
'title': null,
'hidden_read_more': 'about '~title
} %}
</div>
{% if image_src is defined %}
<div class="content__first">
<div class="tags-label-wrapper">
{% if label_text %}
{% include '@label' with {
'label': label_text,
'icon': 'icon-tag'
} %}
{% endif %}
{% if tagList and tags_position == 'top' %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
</div>
<div class="figure-wrapper">
{% include '@image' with {
src: image_src,
ratio: image_ratio
} %}
</div>
</div>
{% endif %}
</article>
<a href="{{ link }}" class="teaser-overlay-link" tabindex="-1"
aria-hidden="true">{{ title }}</a>
</li>
<!-- Default -->
<li class="teaser">
<article class="teaser-content">
<div class="content__second">
<h3 class="bg-none h4"><span>Teaser title text comes here and can spread over multiple lines</span></h3>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
Optional tag
</span>
</li>
<li>
<span class="tag ">
Optional tag 2
</span>
</li>
</ul>
</div>
<div class="date">
<span>
<time datetime="2023-07-13">13/07/2023</time>
<time datetime="2023-07-15">- 15/07/2023</time>
</span>
</div>
<p>This is an example teaser. Other teasers are also possible but with fewer content for example.</p>
<ul class="teaser-links">
<li>
<a href='#' class="no-icon" title="Teaser title text comes here and can spread over multiple lines">
List item 1 </a>
</li>
<li>
<a href='#' class="no-icon" title="Teaser title text comes here and can spread over multiple lines">
List item 2 is a bit longer </a>
</li>
<li>
<a href='#' class="no-icon" title="Teaser title text comes here and can spread over multiple lines">
List item 3 </a>
</li>
</ul>
<a href='#' class="read-more standalone-link" title="Teaser title text comes here and can spread over multiple lines">
Read more <span class="visually-hidden">
about Teaser title text comes here and can spread over multiple lines
</span>
</a>
</div>
<div class="content__first">
<div class="tags-label-wrapper">
<span class="label "><i class="icon-tag"></i>Optional label</span>
</div>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="alt text" /></div>
</figure>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Teaser title text comes here and can spread over multiple lines</a>
</li>
<!-- Teaser No Image -->
<li class="teaser no-image">
<article class="teaser-content">
<div class="content__second">
<h3 class="bg-none h4"><span>Teasers have a title that looks like this and can be longer too</span></h3>
<div class="tag-list-wrapper">
<ul class="tag-list no-image">
<li>
<span class="tag no-image">
Optional tag
</span>
</li>
<li>
<span class="tag no-image">
Optional tag 2
</span>
</li>
</ul>
</div>
<div class="date">
<span>
<time datetime="2023-07-13">13/07/2023</time>
<time datetime="2023-07-15">- 15/07/2023</time>
</span>
</div>
<p>This is an example teaser. Other teasers are also possible but with fewer content for example.</p>
<ul class="teaser-links">
<li>
<a href='#' class="no-icon" title="Teasers have a title that looks like this and can be longer too">
List item 1 </a>
</li>
<li>
<a href='#' class="no-icon" title="Teasers have a title that looks like this and can be longer too">
List item 2 is a bit longer </a>
</li>
<li>
<a href='#' class="no-icon" title="Teasers have a title that looks like this and can be longer too">
List item 3 </a>
</li>
</ul>
<a href='#' class="read-more standalone-link" title="Teasers have a title that looks like this and can be longer too">
Read more <span class="visually-hidden">
about Teasers have a title that looks like this and can be longer too
</span>
</a>
</div>
<div class="content__first">
<div class="tags-label-wrapper">
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Teasers have a title that looks like this and can be longer too</a>
</li>
<!-- Teaser Background -->
<li class="teaser teaser--background">
<article class="teaser-content">
<div class="content__second">
<h3 class="bg-none h4"><span>Teasers have a title that looks like this</span></h3>
<div class="date">
<span>
<time datetime="2023-07-13">13/07/2023</time>
<time datetime="2023-07-15">- 15/07/2023</time>
</span>
</div>
<p>This is an example teaser. Other teasers are also possible but with fewer content for example.</p>
<a href='#' class="read-more standalone-link" title="Teasers have a title that looks like this">
Read more <span class="visually-hidden">
about Teasers have a title that looks like this
</span>
</a>
</div>
<div class="content__first">
<div class="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure class="teaser--background">
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="alt text" class="teaser--background" /></div>
</figure>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Teasers have a title that looks like this</a>
</li>
<!-- Teaser Background No Image -->
<li class="teaser teaser--background no-image">
<article class="teaser-content">
<div class="content__second">
<h3 class="bg-none h4"><span>Teasers have a title that looks like this</span></h3>
<div class="date">
<span>
<time datetime="2023-07-13">13/07/2023</time>
<time datetime="2023-07-15">- 15/07/2023</time>
</span>
</div>
<p>This is an example teaser. Other teasers are also possible but with fewer content for example.</p>
<a href='#' class="read-more standalone-link" title="Teasers have a title that looks like this">
Read more <span class="visually-hidden">
about Teasers have a title that looks like this
</span>
</a>
</div>
<div class="content__first">
<div class="tags-label-wrapper">
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Teasers have a title that looks like this</a>
</li>
<!-- Teaser Square -->
<li class="teaser teaser--square">
<article class="teaser-content">
<div class="content__second">
<h3 class="bg-none h4"><span>Teasers have a title that looks like this</span></h3>
<div class="date">
<span>
<time datetime="2023-07-13">13/07/2023</time>
<time datetime="2023-07-15">- 15/07/2023</time>
</span>
</div>
<a href='#' class="read-more standalone-link" title="Teasers have a title that looks like this">
Read more <span class="visually-hidden">
about Teasers have a title that looks like this
</span>
</a>
</div>
<div class="content__first">
<div class="tags-label-wrapper">
<span class="label "><i class="icon-tag"></i>Event</span>
<div class="tag-list-wrapper">
<ul class="tag-list teaser--square">
<li>
<span class="tag teaser--square">
Optional tag
</span>
</li>
</ul>
</div>
</div>
<div class="figure-wrapper">
<figure class="teaser--square">
<div class="image-wrapper" data-ratio="1:1"><img src="https://via.placeholder.com/570x570&text=1:1+(570x570)" alt="alt text" class="teaser--square" /></div>
</figure>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Teasers have a title that looks like this</a>
</li>
<!-- Teaser Square Double -->
<li class="teaser teaser--square teaser--square--double">
<article class="teaser-content">
<div class="content__second">
<h3 class="bg-none"><span>First teaser has a title that looks like this and spans over multiple lines</span></h3>
<div class="date">
<span>
<time datetime="2023-07-13">13/07/2023</time>
<time datetime="2023-07-15">- 15/07/2023</time>
</span>
</div>
<a href='#' class="read-more standalone-link" title="First teaser has a title that looks like this and spans over multiple lines">
Read more <span class="visually-hidden">
about First teaser has a title that looks like this and spans over multiple lines
</span>
</a>
</div>
<div class="content__first">
<div class="tags-label-wrapper">
<span class="label "><i class="icon-tag"></i>Event</span>
<div class="tag-list-wrapper">
<ul class="tag-list teaser--square teaser--square--double">
<li>
<span class="tag teaser--square teaser--square--double">
Optional tag
</span>
</li>
</ul>
</div>
</div>
<div class="figure-wrapper__mobile">
<figure class="teaser--square teaser--square--double">
<div class="image-wrapper" data-ratio="1:1"><img src="https://via.placeholder.com/360x360&text=1:1+(360x360)" alt="alt text" class="teaser--square teaser--square--double" /></div>
</figure>
</div>
<div class="figure-wrapper__desktop">
<figure class="teaser--square teaser--square--double">
<div class="image-wrapper" data-ratio="765:360"><img src="https://via.placeholder.com/765x360&text=765:360+(765x360)" alt="alt text" class="teaser--square teaser--square--double" /></div>
</figure>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">First teaser has a title that looks like this and spans over multiple lines</a>
</li>
<!-- Teaser Simple -->
<li class="teaser teaser--simple">
<article class="teaser-content">
<div class="content__second">
<i class="icon-civil-affairs" aria-hidden="true"></i>
<h3 class="bg-none h4"><span>Teaser title text comes here and can spread over multiple lines</span></h3>
<p>This is an example teaser. Other teasers are also possible but with fewer content for example.</p>
<ul class="teaser-links">
<li>
<a href='#' class="no-icon" title="Teaser title text comes here and can spread over multiple lines">
List item 1 </a>
</li>
<li>
<a href='#' class="no-icon" title="Teaser title text comes here and can spread over multiple lines">
List item 2 is a bit longer </a>
</li>
<li>
<a href='#' class="no-icon" title="Teaser title text comes here and can spread over multiple lines">
List item 3 </a>
</li>
</ul>
<a href='#' class="read-more standalone-link" title="Teaser title text comes here and can spread over multiple lines">
Read more <span class="visually-hidden">
about Teaser title text comes here and can spread over multiple lines
</span>
</a>
</div>
<div class="content__first">
<div class="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure class="teaser--simple">
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="alt text" class="teaser--simple" /></div>
</figure>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Teaser title text comes here and can spread over multiple lines</a>
</li>
<!-- Teaser Simple No Image -->
<li class="teaser teaser--simple">
<article class="teaser-content">
<div class="content__second">
<i class="icon-civil-affairs" aria-hidden="true"></i>
<h3 class="bg-none h4"><span>Teaser title text comes here and can spread over multiple lines</span></h3>
<p>This is an example teaser. Other teasers are also possible but with fewer content for example.</p>
<ul class="teaser-links">
<li>
<a href='#' class="no-icon" title="Teaser title text comes here and can spread over multiple lines">
List item 1 </a>
</li>
<li>
<a href='#' class="no-icon" title="Teaser title text comes here and can spread over multiple lines">
List item 2 is a bit longer </a>
</li>
<li>
<a href='#' class="no-icon" title="Teaser title text comes here and can spread over multiple lines">
List item 3 </a>
</li>
</ul>
<a href='#' class="read-more standalone-link" title="Teaser title text comes here and can spread over multiple lines">
Read more <span class="visually-hidden">
about Teaser title text comes here and can spread over multiple lines
</span>
</a>
</div>
<div class="content__first">
<div class="tags-label-wrapper">
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Teaser title text comes here and can spread over multiple lines</a>
</li>
<!-- Teaser Simple Inverted -->
<li class="teaser teaser--simple teaser--inverted">
<article class="teaser-content">
<div class="content__second">
<i class="icon-civil-affairs" aria-hidden="true"></i>
<h3 class="bg-none h4"><span>Teaser title text comes here and can spread over multiple lines</span></h3>
<p>This is an example teaser. Other teasers are also possible but with fewer content for example.</p>
<ul class="teaser-links">
<li>
<a href='#' class="no-icon" title="Teaser title text comes here and can spread over multiple lines">
List item 1 </a>
</li>
<li>
<a href='#' class="no-icon" title="Teaser title text comes here and can spread over multiple lines">
List item 2 is a bit longer </a>
</li>
<li>
<a href='#' class="no-icon" title="Teaser title text comes here and can spread over multiple lines">
List item 3 </a>
</li>
</ul>
<a href='#' class="read-more standalone-link" title="Teaser title text comes here and can spread over multiple lines">
Read more <span class="visually-hidden">
about Teaser title text comes here and can spread over multiple lines
</span>
</a>
</div>
<div class="content__first">
<div class="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure class="teaser--simple teaser--inverted">
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="alt text" class="teaser--simple teaser--inverted" /></div>
</figure>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Teaser title text comes here and can spread over multiple lines</a>
</li>
<!-- Teaser Wide -->
<li class="teaser teaser--wide">
<article class="teaser-content">
<div class="content__second">
<h3 class="h4">This is a wide teaser, usually used with the sidebar layout</h3>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
Optional tag
</span>
</li>
<li>
<span class="tag ">
More optional tags
</span>
</li>
</ul>
</div>
<ul class="icon-list">
<li>
<i class='icon-marker'></i><span><strong> Lakenhalle </strong> — Botermarkt 18A, 9000 Gent</span>
</li>
</ul>
<ul class="dash-separated-list ">
<li>List item 1</li>
<li>List item 2 is a bit longer</li>
<li>List item 3</li>
</ul>
<p>This is a wide teaser, usually used with the sidebar layout. It can contain multiple components and has an optional image.</p>
<a href='#' class="read-more standalone-link">
Read more <span class="visually-hidden">
about This is a wide teaser, usually used with the sidebar layout
</span>
</a>
</div>
<div class="content__first">
<div class="tags-label-wrapper">
<span class="label teaser--wide"><i class="icon-tag"></i>Optional label</span>
</div>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="1:1"><img src="https://via.placeholder.com/570x570&text=1:1+(570x570)" alt="" /></div>
</figure>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">This is a wide teaser, usually used with the sidebar layout</a>
</li>
/* Default */
{
"image_ratio": "8:5",
"paragraph_text": "This is an example teaser. Other teasers are also possible but with fewer content for example.",
"title": "Teaser title text comes here and can spread over multiple lines",
"published_date": "13/07/2023",
"link_text": "Read more",
"link": "#",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"tags": [
"Optional tag",
"Optional tag 2"
],
"tags_position": "bottom",
"event_date": {
"text_1": "13/07/2023",
"datetime_1": "2023-07-13",
"text_2": "- 15/07/2023",
"datetime_2": "2023-07-15"
},
"label_text": "Optional label",
"list": [
"List item 1",
"List item 2 is a bit longer",
"List item 3"
]
}
/* Teaser No Image */
{
"image_ratio": "8:5",
"paragraph_text": "This is an example teaser. Other teasers are also possible but with fewer content for example.",
"title": "Teasers have a title that looks like this and can be longer too",
"published_date": "13/07/2023",
"link_text": "Read more",
"link": "#",
"image_src": null,
"image_alt_text": "alt text",
"tags": [
"Optional tag",
"Optional tag 2"
],
"tags_position": "bottom",
"event_date": {
"text_1": "13/07/2023",
"datetime_1": "2023-07-13",
"text_2": "- 15/07/2023",
"datetime_2": "2023-07-15"
},
"label_text": null,
"list": [
"List item 1",
"List item 2 is a bit longer",
"List item 3"
],
"modifier": "no-image"
}
/* Teaser Background */
{
"image_ratio": "8:5",
"paragraph_text": "This is an example teaser. Other teasers are also possible but with fewer content for example.",
"title": "Teasers have a title that looks like this",
"published_date": "13/07/2023",
"link_text": "Read more",
"link": "#",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"tags": null,
"tags_position": "bottom",
"event_date": {
"text_1": "13/07/2023",
"datetime_1": "2023-07-13",
"text_2": "- 15/07/2023",
"datetime_2": "2023-07-15"
},
"label_text": null,
"list": null,
"modifier": "teaser--background"
}
/* Teaser Background No Image */
{
"image_ratio": "8:5",
"paragraph_text": "This is an example teaser. Other teasers are also possible but with fewer content for example.",
"title": "Teasers have a title that looks like this",
"published_date": "13/07/2023",
"link_text": "Read more",
"link": "#",
"image_src": null,
"image_alt_text": "alt text",
"tags": null,
"tags_position": "bottom",
"event_date": {
"text_1": "13/07/2023",
"datetime_1": "2023-07-13",
"text_2": "- 15/07/2023",
"datetime_2": "2023-07-15"
},
"label_text": null,
"list": null,
"modifier": "teaser--background no-image"
}
/* Teaser Square */
{
"image_ratio": "1:1",
"paragraph_text": "",
"title": "Teasers have a title that looks like this",
"published_date": "13/07/2023",
"link_text": "Read more",
"link": "#",
"image_src": "https://via.placeholder.com/570x570&text=1:1+(570x570)",
"image_alt_text": "alt text",
"tags": [
"Optional tag"
],
"tags_position": "top",
"event_date": {
"text_1": "13/07/2023",
"datetime_1": "2023-07-13",
"text_2": "- 15/07/2023",
"datetime_2": "2023-07-15"
},
"label_text": "Event",
"list": null,
"modifier": "teaser--square"
}
/* Teaser Square Double */
{
"image_ratio": "8:5",
"paragraph_text": "",
"title": "First teaser has a title that looks like this and spans over multiple lines",
"published_date": "13/07/2023",
"link_text": "Read more",
"link": "#",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"tags": [
"Optional tag"
],
"tags_position": "top",
"event_date": {
"text_1": "13/07/2023",
"datetime_1": "2023-07-13",
"text_2": "- 15/07/2023",
"datetime_2": "2023-07-15"
},
"label_text": "Event",
"list": null,
"image_ratio_mobile": "1:1",
"image_src_mobile": "https://via.placeholder.com/360x360&text=1:1+(360x360)",
"image_ratio_desktop": "765:360",
"image_src_desktop": "https://via.placeholder.com/765x360&text=765:360+(765x360)",
"modifier": "teaser--square teaser--square--double"
}
/* Teaser Simple */
{
"image_ratio": "8:5",
"paragraph_text": "This is an example teaser. Other teasers are also possible but with fewer content for example.",
"title": "Teaser title text comes here and can spread over multiple lines",
"published_date": null,
"link_text": "Read more",
"link": "#",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"tags": null,
"tags_position": "bottom",
"event_date": null,
"label_text": null,
"list": [
"List item 1",
"List item 2 is a bit longer",
"List item 3"
],
"modifier": "teaser--simple",
"title_icon": "civil-affairs"
}
/* Teaser Simple No Image */
{
"image_ratio": "8:5",
"paragraph_text": "This is an example teaser. Other teasers are also possible but with fewer content for example.",
"title": "Teaser title text comes here and can spread over multiple lines",
"published_date": null,
"link_text": "Read more",
"link": "#",
"image_src": null,
"image_alt_text": "alt text",
"tags": null,
"tags_position": "bottom",
"event_date": null,
"label_text": null,
"list": [
"List item 1",
"List item 2 is a bit longer",
"List item 3"
],
"modifier": "teaser--simple",
"title_icon": "civil-affairs"
}
/* Teaser Simple Inverted */
{
"image_ratio": "8:5",
"paragraph_text": "This is an example teaser. Other teasers are also possible but with fewer content for example.",
"title": "Teaser title text comes here and can spread over multiple lines",
"published_date": null,
"link_text": "Read more",
"link": "#",
"image_src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"image_alt_text": "alt text",
"tags": null,
"tags_position": "bottom",
"event_date": null,
"label_text": null,
"list": [
"List item 1",
"List item 2 is a bit longer",
"List item 3"
],
"modifier": "teaser--simple teaser--inverted",
"title_icon": "civil-affairs"
}
/* Teaser Wide */
{
"image_ratio": "1:1",
"paragraph_text": "This is a wide teaser, usually used with the sidebar layout. It can contain multiple components and has an optional image.",
"title": "This is a wide teaser, usually used with the sidebar layout",
"published_date": "13/07/2023",
"link_text": "Read more",
"link": "#",
"image_src": "https://via.placeholder.com/570x570&text=1:1+(570x570)",
"image_alt_text": "alt text",
"tags": [
"Optional tag",
"More optional tags"
],
"tags_position": "bottom",
"event_date": {
"text_1": "13/07/2023",
"datetime_1": "2023-07-13",
"text_2": "- 15/07/2023",
"datetime_2": "2023-07-15"
},
"label_text": "Optional label",
"list": [
"List item 1",
"List item 2 is a bit longer",
"List item 3"
],
"type": "teaser--wide",
"address_location": "Lakenhalle",
"address": "Botermarkt 18A, 9000 Gent"
}
//
// Basic teaser theming.
//
.teaser {
position: relative;
list-style: none;
h3.bg-none {
position: relative;
margin: -13px 0 20px;
z-index: 3;
span {
@include theme('background-color', 'color-secondary');
padding: 2.5px 10px;
}
}
.date {
@include small-text();
@include theme('color', 'color-zero', 'help-text-color');
position: relative;
margin: 10px 0;
z-index: 3;
span {
@include icon('calendar');
display: flex;
flex-wrap: wrap;
align-items: center;
line-height: 1;
&::before {
position: relative;
margin-right: 5px;
font-size: 1.2rem;
}
}
}
.tag-list-wrapper {
margin: 15px 0 -5px;
// Override default tag behaviour that has 100% width on mobile.
li {
width: auto;
}
}
ul {
margin: 20px 0 20px 20px;
}
.teaser-links,
ol {
margin: 20px 0;
}
.teaser-links {
list-style-type: none;
}
a.read-more {
@include bold-text();
}
a.teaser-overlay-link {
@include reset-link-background;
@include element-states(transparent, transparent, background-color);
position: absolute;
top: -20px;
right: 0;
bottom: 0;
left: 0;
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
z-index: z('teaser', 'overlay-link');
}
.teaser-content {
@include medium-text();
display: flex;
flex-direction: column;
height: 100%;
a {
position: relative;
z-index: z('teaser', 'content-link');
}
.content__first {
position: relative;
order: 1;
.tags-label-wrapper {
display: flex;
position: absolute;
top: -15px;
left: 20px;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding: 0 20px 0 0;
z-index: 3;
.label {
margin: 0 10px 10px 0;
}
ul {
margin: 0;
> li {
margin: 0 10px 10px 0;
}
}
.tag-list-wrapper {
display: inline-block;
position: relative;
margin: 0;
}
}
}
.content__second {
position: relative;
order: 2;
height: 100%;
padding: 0 20px 20px;
font-size: .9rem;
> i {
float: left;
line-height: 1;
&::before {
display: block;
font-size: 1.9rem;
@include phablet {
margin-bottom: 20px;
}
}
@include phablet {
float: none;
}
+ h3 {
margin-left: 53px;
@include phablet {
margin-left: 0;
}
}
}
}
}
figcaption {
display: none;
}
&.no-image,
.teaser--no-images & {
h3 {
margin: 0 0 20px;
}
.content__second {
padding: 0;
}
// Make sure the image is hidden. But it's better not to load it.
.figure-wrapper {
display: none;
}
}
&.teaser--background {
.content__second {
@include theme('background-color', 'color-none');
padding: 0 20px 20px;
}
&.no-image,
.teaser--no-images & {
h3 {
margin: 0 0 20px;
}
.content__second {
padding: 20px;
}
}
a.teaser-overlay-link {
top: 0;
}
}
&.teaser--square {
.content__first {
order: 2;
}
.content__second {
display: flex;
position: absolute;
bottom: 0;
flex-direction: column;
align-items: flex-start;
order: 1;
width: 100%;
height: auto;
padding: 20px 100px 20px 20px;
h3 {
margin: 0;
span {
@include theme('background-color', 'color-none', 'heading-with-light-bg-background-color');
}
}
.date {
margin: 0;
z-index: 1;
span {
@include theme('background-color', 'color-none', 'heading-with-light-bg-background-color');
padding: 5px 10px;
line-height: 1.2;
box-decoration-break: clone;
}
&::before {
@include theme('background-color', 'color-none', 'heading-with-light-bg-background-color');
}
}
.read-more {
@include read-more-icon-link();
position: absolute;
right: 0;
bottom: 0;
}
}
}
&.teaser--square--double {
.figure-wrapper__mobile {
@include desktop {
display: none;
}
}
.figure-wrapper__desktop {
display: none;
@include desktop {
display: block;
}
}
h3 {
@include desktop-and-below {
font-size: .9rem;
line-height: 1.15rem;
}
}
}
&.teaser--simple {
.content__second {
@include theme('background-color', 'color-none');
position: static;
padding: 20px 60px 20px 20px;
@include phablet {
padding: 30px 60px 30px 30px;
}
h3 {
display: flex;
align-items: center;
height: 100%;
margin: 0;
@include phablet {
display: block;
height: auto;
margin: 0 15px 20px 0;
}
span {
padding: 0;
background-color: transparent;
}
}
p {
display: none;
@include tablet {
display: block;
}
}
.teaser-links {
display: none;
margin: 0;
@include tablet {
display: block;
}
}
.read-more {
@include read-more-icon-link();
position: absolute;
right: 0;
bottom: 0;
}
}
a.teaser-overlay-link {
top: 0;
}
}
&.teaser--inverted {
.content__second {
@include theme('background-color', 'color-tertiary-light');
}
}
&.teaser--wide {
@include theme('border-color', 'color-primary', 'teaser-wide-border-color');
margin: 0 0 40px;
padding: 0 0 30px;
border-bottom: 1px solid color('blue');
h3 {
margin: 0 0 20px;
&.bg-none span {
padding-right: 0;
padding-left: 0;
}
}
.tag-list-wrapper {
margin: 20px 0;
}
.icon-list,
.location {
@include small-text();
@include theme('color', 'help-text-color', 'teaser-location-color');
margin: 0 0 10px;
}
.location {
@include bold-text;
i {
margin-right: 6px;
font-size: 1.5rem;
vertical-align: middle;
}
}
.teaser-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@include tablet {
flex-wrap: nowrap;
}
}
.content__first,
.content__second {
flex-basis: 100%;
}
.content__first {
order: 1;
margin-bottom: $gutter-width;
@include tablet {
flex: 0 0 230px;
margin-right: 30px;
margin-bottom: 0;
}
}
.content__second {
order: 2;
padding: 0;
.dash-separated-list {
@include theme('color', 'default-text-color', 'help-text-color');
@include medium-text();
margin: 10px 0;
li {
margin-bottom: 0;
}
}
p {
@include medium-text();
margin-top: 10px;
}
}
}
}