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.
{% 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">
<h3>{{ title }}</h3>
{% if event_date or published_date %}
{% if event_date %}
{# Events can consist of two timestamps, so we wrap it in a span. #}
<div class="event">
<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 %}
<time class="published" datetime="{{ teaser_datetime }}" pubdate="pubdate">{{ published_date }}</time>
{% endif %}
{% endif %}
{% if paragraph_text %}
{% include '@paragraph' with {
'text': paragraph_text
} %}
{% endif %}
{% if telephone or teaser_email %}
<ul class="teaser-links">
{% if telephone %}
<li>
{% include '@link' with {
'text': telephone,
'link': 'tel:'~telephone,
'modifier': 'no-icon'
} %}
</li>
{% endif %}
{% if teaser_email %}
<li>
{% include '@link' with {
'text': teaser_email,
'link': 'mailto:'~teaser_email,
'modifier': 'no-icon'
} %}
</li>
{% endif %}
</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">
{% if label_text %}
<span class="teaser-label">
<i class="icon-calendar"></i>
<span>{{ label_text }}</span>
</span>
{% endif %}
{% 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 class="accolade-inverse bottom-left"></div>
</div>
{% endif %}
{% if tagList %}
{% include '@tag-list' with {
tags: tagList,
link: null
} %}
{% endif %}
</div>
</article>
<a href="{{ link }}" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">{{ title }}</a>
</li>
<li class="teaser teaser--underlined ">
<article class="teaser-content">
<div class="content__second">
<h3>Teasers can also be underlined</h3>
<div class="event">
<span>
<time datetime="2019-01-07">From the 7th</time>
<time datetime="2019-01-13">untill the 13th of January 2019</time>
</span>
</div>
<p class="teaser--underlined">This is another example teaser. Other teasers are also possible but with more or fewer content for example.</p>
<ul class="teaser-links">
<li>
<a href='tel:0123456789' class="no-icon" title="Teasers can also be underlined">
0123456789 </a>
</li>
</ul>
<a href='#' class="read-more standalone-link" title="Teasers can also be underlined">
Read more <span class="visually-hidden">
about Teasers can also be underlined
</span>
</a>
</div>
<div class="content__first">
<span class="teaser-label">
<i class="icon-calendar"></i>
<span>Optional label</span>
</span>
<div class="figure-wrapper">
<figure class="teaser--underlined">
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="alt text" class="teaser--underlined" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
<div class="tag-list-wrapper">
<ul class="tag-list teaser--underlined">
<li>
<span class="tag teaser--underlined">
Optional tag
</span>
</li>
<li>
<span class="tag teaser--underlined">
Optional tag 2
</span>
</li>
</ul>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Teasers can also be underlined</a>
</li>
{
"image_ratio": "8:5",
"paragraph_text": "This is another example teaser. Other teasers are also possible but with more or fewer content for example.",
"title": "Teasers can also be underlined",
"published_date": "Gepost op Zaterdag 7 januari 2019",
"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"
],
"event_date": {
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "untill the 13th of January 2019",
"datetime_2": "2019-01-13"
},
"label_text": "Optional label",
"telephone": "0123456789",
"opening_hours_service": "2690",
"modifier": "teaser--underlined"
}
//
// Basic teaser theming.
//
.teaser {
position: relative;
list-style: none;
&.teaser--inverted {
.teaser-content {
@include theme('background-color', 'color-secondary');
}
.content__first {
padding: 0 .8rem;
.figure-wrapper {
width: calc(100% + 1.6rem);
margin-left: -.8rem;
}
}
.content__second {
padding: 0 .8rem .8rem;
}
}
&.teaser--underlined {
.teaser-content {
@include theme('border-color', 'color-primary--lighten-4', 'teaser-contact-border');
height: 100%;
padding-bottom: .7rem;
border-bottom: 2px solid;
}
// @TODO: Move to other layer.
.ol-popup & {
padding-bottom: 0;
border-bottom: 0;
}
.content__second {
display: flex;
flex-direction: column;
align-items: stretch;
> *:last-child {
margin-bottom: 0;
}
}
.teaser-title-link {
margin-bottom: .8rem;
font-size: .8rem;
line-height: 1.2rem;
}
.read-more {
margin-top: auto;
}
// @TODO: Move to other layer.
.grid-3 & {
.content__second {
flex-grow: 1;
}
}
}
figure {
figcaption {
display: none;
}
}
a.teaser-overlay-link {
@include reset-link-background;
@include element-states(transparent, transparent, background-color);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
z-index: z('teaser', 'overlay-link');
}
a.read-more {
@include bold-text
}
.teaser-content {
display: flex;
flex-direction: column;
.teaser-links {
@extend %list-no-style;
margin-top: -$link-padding;
margin-bottom: .4rem;
a {
font-weight: normal;
}
}
.content__first {
position: relative;
order: 1;
overflow: hidden;
}
.content__second {
order: 2;
}
.figure-wrapper {
position: relative;
}
h3 {
margin-bottom: .4rem;
}
a {
position: relative;
z-index: z('teaser', 'content-link');
}
span.teaser-label {
@include theme('background-color', 'color-primary--lighten-5', 'teaser-label-background-color');
display: flex;
position: absolute;
top: .8rem;
left: .8rem;
align-items: center;
padding: 0 .5em;
border-radius: border-radius('radius-1');
line-height: 2;
z-index: z('teaser', 'label');
i {
margin-right: .4rem;
font-size: 1.2rem;
}
}
p {
margin-bottom: .4rem;
line-height: 1.7;
}
div.event,
time.published {
display: inline-block;
margin: 0 0 .4rem;
line-height: 1.5;
}
div.event {
@include icon('calendar');
display: flex;
align-items: flex-start;
&::before {
padding-right: .4rem;
font-size: 1.2rem;
line-height: 1;
}
}
time.published {
color: color('dark-gray', -1);
font-style: italic;
line-height: 2;
}
}
.content__first {
> * {
margin-bottom: .8rem;
}
}
}
//
// Teaser wide variant.
//
.teaser.teaser--wide {
@include tablet {
dt,
dd {
display: inline;
}
}
@include theme('border-color', 'color-primary--lighten-4', 'view-heading-2-border-color');
padding-top: $gutter-width;
padding-bottom: $gutter-width;
border-bottom: 2px solid;
&:first-of-type {
@include theme('border-color', 'color-primary--lighten-4', 'view-heading-2-border-color');
margin-top: $gutter-width;
border-top: 2px solid;
}
dl dd {
margin: 0;
padding-left: .5rem;
}
.tag,
.icon-list {
margin-bottom: .4rem;
}
.teaser-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@include tablet {
flex-wrap: nowrap;
}
}
.accolade-inverse.bottom-left {
display: block;
@include phablet {
display: none;
}
}
.accolade-inverse.right-top {
display: none;
@include phablet {
display: block;
}
}
.content__first,
.content__second {
flex-basis: 100%;
}
.content__first {
order: 1;
margin-bottom: gutter();
@include phablet {
flex-basis: span(5 of 18);
margin-right: gutter();
margin-bottom: 0;
}
}
.content__second {
order: 2;
@include phablet {
flex-basis: span(13 of 18);
}
.location {
@include bold-text;
i {
margin-right: .3rem;
font-size: 1.5em;
vertical-align: middle;
}
}
.links {
margin-bottom: .4rem;
li {
margin-right: 0;
&::after {
margin-right: .4rem;
margin-left: .4rem;
content: '—';
}
&:last-of-type::after {
content: '';
}
}
}
}
}