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.
The old grid system (which still works) was based on the .grid-* class. The new grid (without Susy), works with row and col classes, like so:
<ul class="row">
<li class="col-sm-6 col-lg-4">
...
</li>
</ul>This example replaces the grid-3 collection (not grid-4) since the old system counted the number of teasers instead of the number of columns they span. So .col-lg-6 means that at the lg (desktop) breakpoint 2 teasers of each 6 columns wide (in a 12 column setup).
Breakpoints can be found in 11-base/grid/flexbox-grid/variables/_grid-variables.
<div class="grid-wrapper">
<ul class="{{ grid }}">
{% for i in 0..6 %}
{% include '@teaser--teaser--simple' with {
"type": 'teaser-underlined',
"paragraph_text": paragraph_text,
"title": title,
"teaser_uid": teaser_uid ~ i,
"link_text": link_text,
"link": link,
"image_src": image_src,
"image_alt_text": image_alt_text
} %}
{% endfor %}
</ul>
</div>
<div class="grid-wrapper">
<ul class="grid-2-1">
<li class="teaser teaser-underlined">
<article class="teaser-content">
<div class="content__second">
<h3 class="bg-none h4"><span>Title text </span></h3>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure><img src="https://via.placeholder.com/528x330&text=16:10+(528x330)" alt="alt text" /></figure>
</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 class="bg-none h4"><span>Title text </span></h3>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure><img src="https://via.placeholder.com/528x330&text=16:10+(528x330)" alt="alt text" /></figure>
</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 class="bg-none h4"><span>Title text </span></h3>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure><img src="https://via.placeholder.com/528x330&text=16:10+(528x330)" alt="alt text" /></figure>
</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 class="bg-none h4"><span>Title text </span></h3>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure><img src="https://via.placeholder.com/528x330&text=16:10+(528x330)" alt="alt text" /></figure>
</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 class="bg-none h4"><span>Title text </span></h3>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure><img src="https://via.placeholder.com/528x330&text=16:10+(528x330)" alt="alt text" /></figure>
</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 class="bg-none h4"><span>Title text </span></h3>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure><img src="https://via.placeholder.com/528x330&text=16:10+(528x330)" alt="alt text" /></figure>
</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 class="bg-none h4"><span>Title text </span></h3>
<p>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="tags-label-wrapper">
</div>
<div class="figure-wrapper">
<figure><img src="https://via.placeholder.com/528x330&text=16:10+(528x330)" alt="alt text" /></figure>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Title text </a>
</li>
</ul>
</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-2-1"
}
// Dynamic system with different gutters and items spanning multiple columns.
// Calculation at the bottom.
ul[class^=grid-] {
@include row();
> li {
width: 100%;
list-style: none;
}
}
.grid__show-more {
margin: 20px 0;
font-size: .9rem;
text-align: center;
}
// Grid-2-1 is an irregular grid with non-equal columns.
ul.grid-2-1 {
> li {
@include col(12);
@include tablet {
@include col(6);
}
@include desktop {
@include col(4);
}
&:first-child {
@include desktop {
flex-basis: calc(((100% - ($grid-gutter-width * 2)) / 3 * 2) + $grid-gutter-width);
width: calc(((100% - ($grid-gutter-width * 2)) / 3 * 2) + $grid-gutter-width);
}
}
}
}
//// GENERIC CODE FOR COLUMN WIDTH CALCULATION ON PHABLET. ////
@for $col from 1 through $grid-columns {
ul.grid-#{$col} {
> li {
@include phablet {
@include col(6);
}
}
}
}
// Tablet version has a deviating nr of columns for grid 5 and 4.
ul.grid-5 {
> li {
@include tablet {
@include col(3);
}
}
}
ul.grid-4 {
> li {
@include tablet {
@include col(4);
}
}
}
// GENERIC CODE FOR COLUMN WIDTH CALCULATION ON DESKTOP. //
@for $col from 1 through $grid-columns {
ul.grid-#{$col} {
> li {
@include desktop {
@include col(calc($grid-columns/$col));
}
}
}
}