City of Ghent Style Guide

Collection

A collection is a list of teasers used to show teasers of content.

When to use this component

Use the collection component with teasers:

  • On overview and filter pages to show the overview of the content with links to the content.
  • On detail pages to show and link to a selection of related content.

When not to use this component

Do not use the collection component with other components than teaser components.

How it works

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.

Accessibility

  • A collection of teasers forms a list (WCAG 1.3.1).
{% 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"
}
  • Content:
    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%;
        }
      }
    }
    
  • URL: /components/raw/collection/_collection.scss
  • Filesystem Path: components/41-organisms/collection/_collection.scss
  • Size: 1.2 KB