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.
{% 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>
<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>
{
"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"
}
//
// 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;
}
}
}
}