City of Ghent Style Guide

Teaser

When to use this component

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.

When not to use this component

Do not use the teaser component as a standalone component. Always use the teaser component in a collection.

How it works

A teaser can consist of the following parts:

  • Teaser image (optional)
  • Label with icon (optional, typically to indicate a special type or category of content in the collection, for instance, events in a news and events overview)
  • Teaser title (required)
  • Tags (optional, one or more, typically to indicate content that is related to a certain subject)
  • Event date (optional, only for events)
  • Teaser summary text or content (optional)
  • List of secondary teaser links (optional)
  • Primary teaser link (required)

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.

Accessibility

  • Do not repeat links, links inside one molecule must have unique destinations.
  • The teaser overlay-link is excluded from the tabindex and invisible to screenreaders (WCAG 2.4.3).
  • The teaser overlay-link has visually hidden text content (WCAG 2.4.9).
  • Teaser content must include exactly one link which has the same destination as the overlay link (WCAG 2.1.3).
  • If a ‘Read more’ link is used: append a visually hidden span to provide screenreader information (WCAG 2.4.4).
{% 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">
      {% include '@heading' with {
        'heading': 'h3',
        'heading_class': 'h4',
        'heading_text': title
      } %}

      {% if tagList %}
        {% include '@tag-list' with {
          tags: tagList,
          link: null
        } %}
      {% endif %}

      {% if address %}
        <ul class="icon-list">
          <li>
            <i class='icon-marker'></i><span><strong> {{ address_location }} </strong> &mdash; {{ address }}</span>
          </li>
        </ul>
      {% endif %}

      {% if location %}
        <div class="location">
          <i class="icon-marker" aria-hidden="true"></i><span>{{ location }}</span>
        </div>
      {% endif %}

      {% if list %}
        {% include '@list' with {
          'type': 'dash-separated-list',
          'items': list
        } %}
      {% endif %}

      {% if paragraph_text %}
        {% include '@paragraph' with {
          'text': paragraph_text
        } %}
      {% endif %}

      {% include '@link' with {
        'text': link_text,
        'link': link,
        'modifier': 'read-more standalone-link',
        'title': null,
        'hidden_read_more': 'about '~title
      } %}
    </div>

    {% if image_src is defined %}
      <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>

        <div class="figure-wrapper">
          {% include '@image' with {
            src: image_src,
            ratio: image_ratio
          } %}
        </div>
      </div>
    {% endif %}
  </article>
  <a href="{{ link }}" class="teaser-overlay-link" tabindex="-1"
     aria-hidden="true">{{ title }}</a>
</li>
<li class="teaser teaser--wide">
                    <article class="teaser-content">

                        <div class="content__second">
                            <h3 class="h4">This is a wide teaser, usually used with the sidebar layout</h3>

                            <div class="tag-list-wrapper">
                                <ul class="tag-list">
                                    <li>

                                        <span class="tag ">
                                            Optional tag
                                        </span>
                                    </li>
                                    <li>

                                        <span class="tag ">
                                            More optional tags
                                        </span>
                                    </li>
                                </ul>
                            </div>

                            <ul class="icon-list">
                                <li>
                                    <i class='icon-marker'></i><span><strong> Lakenhalle </strong> &mdash; Botermarkt 18A, 9000 Gent</span>
                                </li>
                            </ul>

                            <ul class="dash-separated-list ">
                                <li>List item 1</li>
                                <li>List item 2 is a bit longer</li>
                                <li>List item 3</li>
                            </ul>

                            <p>This is a wide teaser, usually used with the sidebar layout. It can contain multiple components and has an optional image.</p>

                            <a href='#' class="read-more standalone-link">
                                Read more <span class="visually-hidden">
                                    about This is a wide teaser, usually used with the sidebar layout
                                </span>
                            </a>

                        </div>

                        <div class="content__first">
                            <div class="tags-label-wrapper">
                                <span class="label teaser--wide"><i class="icon-tag"></i>Optional label</span>

                            </div>

                            <div class="figure-wrapper">
                                <figure>
                                    <div class="image-wrapper" data-ratio="1:1"><img src="https://via.placeholder.com/570x570&text=1:1+(570x570)" alt="" /></div>
                                </figure>
                            </div>
                        </div>
                    </article>
                    <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">This is a wide teaser, usually used with the sidebar layout</a>
                </li>
{
  "image_ratio": "1:1",
  "paragraph_text": "This is a wide teaser, usually used with the sidebar layout. It can contain multiple components and has an optional image.",
  "title": "This is a wide teaser, usually used with the sidebar layout",
  "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",
    "More optional tags"
  ],
  "tags_position": "bottom",
  "event_date": {
    "text_1": "13/07/2023",
    "datetime_1": "2023-07-13",
    "text_2": "- 15/07/2023",
    "datetime_2": "2023-07-15"
  },
  "label_text": "Optional label",
  "list": [
    "List item 1",
    "List item 2 is a bit longer",
    "List item 3"
  ],
  "type": "teaser--wide",
  "address_location": "Lakenhalle",
  "address": "Botermarkt 18A, 9000 Gent"
}
  • Content:
    //
    // 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');
    
          &::before {
            position: relative;
            top: 6px;
            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,
      ol {
        @include medium-text();
    
        a {
          @include normal-text();
        }
      }
    
      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 {
            position: absolute;
            top: -15px;
            left: 20px;
            margin: 0;
            z-index: 3;
    
            .label ~ .tag-list-wrapper {
              top: -4px;
              margin-left: 5px;
            }
    
            .tag-list-wrapper {
              display: inline-block;
              position: relative;
              margin: 0;
            }
          }
        }
    
        .content__second {
          position: relative;
          order: 2;
          height: 100%;
          padding: 0 20px 20px;
    
          > 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;
              }
            }
          }
    
          p,
          ul:not(.tag-list),
          ol {
            @include theme('color', 'default-text-color', 'help-text-color');
    
            font-size: .8rem;
            line-height: 1.4rem;
          }
        }
      }
    
      figcaption {
        display: none;
      }
    
      &.no-image,
      .teaser--no-images & {
        h3 {
          margin: 0;
        }
    
        .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;
          }
    
          .content__second {
            padding: 20px;
          }
        }
    
        a.teaser-overlay-link {
          top: 0;
        }
      }
    
      &.teaser--square {
        .content__first {
          order: 2;
        }
    
        .content__second {
          position: absolute;
          bottom: 0;
          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 {
            display: inline-block;
            margin: -6px 0 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;
          }
        }
      }
    }
    
  • URL: /components/raw/teaser/_teaser.scss
  • Filesystem Path: components/31-molecules/teaser/_teaser.scss
  • Size: 7.3 KB