A collection is a list of teasers used to show teasers of content.
Use the collection component with teasers:
Do not use the collection component with other components than teaser components.
A collection is a list of teaser components that can be shown in a grid of maximum 2, 3, 4 or 5 columns. Depending on the screen resolution, less columns are shown.
On overview and filter pages, pagination can be used to divide the content on overview pages with a big amount of content into multiple pages.
On detail pages, an optional “Show more” link can be included, as seen in the example, to link to more related content. The “Show more” always links to another page where more content is shown in an overview, typically an overview or filter page.
Pagination and the “Show more” link can never be used together. Either the teaser collection already shows all content there is and pagination is used to divide the content into multiple pages, or the teaser collection is used to show a selection of related content and a “Show more” link is used to link to all related content.
{% include '@collection--grid-4' %}
<div class="grid__show-more">
{% include '@link' with {
'link': null,
'text': 'Show all news articles',
'modifier': 'standalone-link',
'title': null
} %}
</div>
<div class="grid-wrapper">
<ul class="grid-4">
<li class="teaser teaser-underlined ">
<article class="teaser-content">
<div class="content__second">
<h3>Title text </h3>
<p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>
<a href='#' class="read-more standalone-link" title="Title text ">
Read more <span class="visually-hidden">
about Title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure><img src="https://via.placeholder.com/528x330&text=16:10+(528x330)" alt="alt text" /></figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
</li>
<li class="teaser teaser-underlined ">
<article class="teaser-content">
<div class="content__second">
<h3>Title text </h3>
<p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>
<a href='#' class="read-more standalone-link" title="Title text ">
Read more <span class="visually-hidden">
about Title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure><img src="https://via.placeholder.com/528x330&text=16:10+(528x330)" alt="alt text" /></figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
</li>
<li class="teaser teaser-underlined ">
<article class="teaser-content">
<div class="content__second">
<h3>Title text </h3>
<p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>
<a href='#' class="read-more standalone-link" title="Title text ">
Read more <span class="visually-hidden">
about Title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure><img src="https://via.placeholder.com/528x330&text=16:10+(528x330)" alt="alt text" /></figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
</li>
<li class="teaser teaser-underlined ">
<article class="teaser-content">
<div class="content__second">
<h3>Title text </h3>
<p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>
<a href='#' class="read-more standalone-link" title="Title text ">
Read more <span class="visually-hidden">
about Title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure><img src="https://via.placeholder.com/528x330&text=16:10+(528x330)" alt="alt text" /></figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
</li>
<li class="teaser teaser-underlined ">
<article class="teaser-content">
<div class="content__second">
<h3>Title text </h3>
<p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>
<a href='#' class="read-more standalone-link" title="Title text ">
Read more <span class="visually-hidden">
about Title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure><img src="https://via.placeholder.com/528x330&text=16:10+(528x330)" alt="alt text" /></figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
</li>
<li class="teaser teaser-underlined ">
<article class="teaser-content">
<div class="content__second">
<h3>Title text </h3>
<p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>
<a href='#' class="read-more standalone-link" title="Title text ">
Read more <span class="visually-hidden">
about Title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure><img src="https://via.placeholder.com/528x330&text=16:10+(528x330)" alt="alt text" /></figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
</li>
<li class="teaser teaser-underlined ">
<article class="teaser-content">
<div class="content__second">
<h3>Title text </h3>
<p class="">Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>
<a href='#' class="read-more standalone-link" title="Title text ">
Read more <span class="visually-hidden">
about Title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure><img src="https://via.placeholder.com/528x330&text=16:10+(528x330)" alt="alt text" /></figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
</li>
</ul>
</div>
<div class="grid__show-more">
<a href='' class="standalone-link">
Show all news articles </a>
</div>
{
"image_src": "https://via.placeholder.com/528x330&text=16:10+(528x330)",
"image_alt_text": "alt text",
"paragraph_text": "Teaser text, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.",
"title": "Title text ",
"teaser_uid": "uid",
"link_text": "Read more",
"link": "#",
"grid": "grid-4"
}
ul.grid-2,
ul.grid-3,
ul.grid-4,
ul.grid-5 {
@extend %list-no-style;
display: flex;
flex-wrap: wrap;
width: calc(100% + #{gutter()});
margin: 0 -#{gutter()*.5} -1.2rem;
> li {
flex-basis: 100%;
flex-shrink: 1;
margin-bottom: 1.2rem;
padding: 0 gutter()*.5;
}
}
.grid__show-more {
margin: 1.2rem 0;
font-size: .9rem;
text-align: center;
}
ul.grid-5 {
> li {
@include phablet {
flex-basis: 50%;
max-width: 50%;
}
@include tablet {
flex-basis: 25%;
max-width: 25%;
}
@include desktop {
flex-basis: 20%;
max-width: 20%;
}
}
}
ul.grid-4 {
> li {
@include phablet {
flex-basis: 50%;
max-width: 50%;
}
@include tablet {
flex-basis: 33.3333%;
max-width: 33.3333%;
}
@include desktop {
flex-basis: 25%;
max-width: 25%;
}
}
}
ul.grid-3 {
> li {
@include phablet {
flex-basis: 50%;
max-width: 50%;
}
@include desktop {
flex-basis: 33.3333%;
max-width: 33.3333%;
}
}
}
ul.grid-2 {
> li {
@include phablet {
flex-basis: 50%;
max-width: 50%;
}
}
}