Teaser

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)
  • Tags (optional, one or more, typically to indicate content that is related to a certain subject)
  • Teaser title (required)
  • 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.

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).
<!-- Default -->
<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 %}
                &nbsp;<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',
          'labeled_by': 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 '@figure' with {
            figure_image_src: image_src,
            figure_image_alt_text: image_alt_text,
            figure_ratio: image_ratio
          } %}

          <div class="accolade-inverse bottom-left"></div>
        </div>
      {% endif %}

      {% if tag %}
        {% include '@tag' with {
          "tag_text": tag,
          "type": 'span-tag'
        } %}
      {% endif %}
      {% if tag2 %}
        {% include '@tag' with {
          "tag_text": tag2,
          "type": 'span-tag'
        } %}
      {% endif %}
    </div>
  </article>
  <a href="{{ link }}" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">{{ title }}</a>
</li>

<!-- Teaser Underlined -->
<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 %}
                &nbsp;<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',
          'labeled_by': 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 '@figure' with {
            figure_image_src: image_src,
            figure_image_alt_text: image_alt_text,
            figure_ratio: image_ratio
          } %}

          <div class="accolade-inverse bottom-left"></div>
        </div>
      {% endif %}

      {% if tag %}
        {% include '@tag' with {
          "tag_text": tag,
          "type": 'span-tag'
        } %}
      {% endif %}
      {% if tag2 %}
        {% include '@tag' with {
          "tag_text": tag2,
          "type": 'span-tag'
        } %}
      {% endif %}
    </div>
  </article>
  <a href="{{ link }}" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">{{ title }}</a>
</li>

<!-- Teaser Simple -->
<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 %}
                &nbsp;<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',
          'labeled_by': 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 '@figure' with {
            figure_image_src: image_src,
            figure_image_alt_text: image_alt_text,
            figure_ratio: image_ratio
          } %}

          <div class="accolade-inverse bottom-left"></div>
        </div>
      {% endif %}

      {% if tag %}
        {% include '@tag' with {
          "tag_text": tag,
          "type": 'span-tag'
        } %}
      {% endif %}
      {% if tag2 %}
        {% include '@tag' with {
          "tag_text": tag2,
          "type": 'span-tag'
        } %}
      {% endif %}
    </div>
  </article>
  <a href="{{ link }}" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">{{ title }}</a>
</li>

<!-- Teaser Inverted -->
<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 %}
                &nbsp;<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',
          'labeled_by': 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 '@figure' with {
            figure_image_src: image_src,
            figure_image_alt_text: image_alt_text,
            figure_ratio: image_ratio
          } %}

          <div class="accolade-inverse bottom-left"></div>
        </div>
      {% endif %}

      {% if tag %}
        {% include '@tag' with {
          "tag_text": tag,
          "type": 'span-tag'
        } %}
      {% endif %}
      {% if tag2 %}
        {% include '@tag' with {
          "tag_text": tag2,
          "type": 'span-tag'
        } %}
      {% endif %}
    </div>
  </article>
  <a href="{{ link }}" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">{{ title }}</a>
</li>

<!-- Teaser Wide -->
<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 tag %}
        {% include '@tag' with {
          "tag_text": tag,
          "type": 'span-tag'
        } %}
      {% endif %}
      {% if tag2 %}
        {% include '@tag' with {
          "tag_text": tag2,
          "type": 'span-tag'
        } %}
      {% 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': 'icon-list',
          'modifier': 'links inline',
          'icon_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,
        'labeled_by': title
      } %}
    </div>

    {% if image_src is defined %}
      <div class="content__first">
        <div class="figure-wrapper">
          {% include '@figure' with {
            "figure_image_src": image_src,
            "figure_ratio": '8:5'
          } %}
          <div class="accolade-inverse right-top"></div>
          <div class="accolade-inverse bottom-left"></div>
        </div>
      </div>
    {% endif %}
  </article>
  <a href="{{ link }}" class="teaser-overlay-link" tabindex="-1"
     aria-hidden="true">{{ title }}</a>
</li>
<!-- Default -->
<li class="teaser  ">
    <article class="teaser-content">

        <div class="content__second">
            <h3>Teaser title text comes here.</h3>

            <div class="event">
                <span>
                    <time datetime="2019-01-07">From the 7th</time>
                    &nbsp;<time datetime="2019-01-13">untill the 13th of January 2019</time>
                </span>
            </div>

            <p class="">This is an example teaser. Other teasers are also possible but with fewer content for example.</p>

            <ul class="teaser-links">
                <li>
                    <a href='tel:0123456789' class="no-icon" title="Teaser title text comes here.">
                        0123456789</a>
                </li>
            </ul>

            <a href='#' class="read-more standalone-link" title="Teaser title text comes here.">
                <span class="visually-hidden">
                    Teaser title text comes here.
                </span>
                read more</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>
                    <div class="image-wrapper" data-ratio="8:5">
                        <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="alt text" />
                    </div>

                </figure>

                <div class="accolade-inverse bottom-left"></div>
            </div>

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

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

        </div>
    </article>
    <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Teaser title text comes here.</a>
</li>

<!-- Teaser Underlined -->
<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>
                    &nbsp;<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">
                <span class="visually-hidden">
                    Teasers can also be underlined
                </span>
                read more</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>

            <span class="tag teaser--underlined">
                Optional tag
            </span>

            <span class="tag teaser--underlined">
                Optional tag 2
            </span>

        </div>
    </article>
    <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Teasers can also be underlined</a>
</li>

<!-- Teaser Simple -->
<li class="teaser  ">
    <article class="teaser-content">

        <div class="content__second">
            <h3>Teaser title text comes here.</h3>

            <time class="published" datetime="" pubdate="pubdate">Gepost op Zaterdag 7 januari 2019</time>

            <p class="">This is an example teaser. Other teasers are also possible but with fewer content for example.</p>

            <a href='#' class="read-more standalone-link" title="Teaser title text comes here.">
                <span class="visually-hidden">
                    Teaser title text comes here.
                </span>
                read more</a>
        </div>
        <div class="content__first">

            <div class="figure-wrapper">
                <figure>
                    <div class="image-wrapper" data-ratio="8:5">
                        <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="alt text" />
                    </div>

                </figure>

                <div class="accolade-inverse bottom-left"></div>
            </div>

        </div>
    </article>
    <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Teaser title text comes here.</a>
</li>

<!-- Teaser Inverted -->
<li class="teaser   teaser--inverted ">
    <article class="teaser-content">

        <div class="content__second">
            <h3>Teaser with inverted styling</h3>

            <div class="event">
                <span>
                    <time datetime="2019-01-07">From the 7th</time>
                    &nbsp;<time datetime="2019-01-13">untill the 13th of January 2019</time>
                </span>
            </div>

            <p class="teaser--inverted">This is an example teaser but on a background. These kind of teasers need some padding on their content otherwise the content would visually stick to the sides.</p>

            <ul class="teaser-links">
                <li>
                    <a href='tel:0123456789' class="no-icon" title="Teaser with inverted styling">
                        0123456789</a>
                </li>
            </ul>

            <a href='#' class="read-more standalone-link" title="Teaser with inverted styling">
                <span class="visually-hidden">
                    Teaser with inverted styling
                </span>
                read more</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--inverted">
                    <div class="image-wrapper" data-ratio="8:5">
                        <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="alt text" class="teaser--inverted" />
                    </div>

                </figure>

                <div class="accolade-inverse bottom-left"></div>
            </div>

            <span class="tag teaser--inverted">
                Optional tag
            </span>

            <span class="tag teaser--inverted">
                Optional tag 2
            </span>

        </div>
    </article>
    <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Teaser with inverted styling</a>
</li>

<!-- Teaser Wide -->
<li class="teaser  teaser--wide  ">
    <article class="teaser-content">

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

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

            <span class="tag ">
                More optional tags
            </span>

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

            <ul class="icon-list links inline">
                <li>List item 1</li>
                <li>List item 2 is a bit longer</li>
                <li>List item 3</li>
                <li>List item 4</li>
            </ul>

            <p class="">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">
                <span class="visually-hidden">
                    This is a wide teaser, usually used with the sidebar layout
                </span>
                read more</a>
        </div>

        <div class="content__first">
            <div class="figure-wrapper">
                <figure>
                    <div class="image-wrapper" data-ratio="8:5">
                        <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="" />
                    </div>

                </figure>
                <div class="accolade-inverse right-top"></div>
                <div class="accolade-inverse bottom-left"></div>
            </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>

/* Default */
{
  "image_ratio": "8:5",
  "paragraph_text": "This is an example teaser. Other teasers are also possible but with fewer content for example.",
  "title": "Teaser title text comes here.",
  "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",
  "tag": "Optional tag",
  "tag2": "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"
}

/* Teaser Underlined */
{
  "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",
  "tag": "Optional tag",
  "tag2": "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"
}

/* Teaser Simple */
{
  "image_ratio": "8:5",
  "paragraph_text": "This is an example teaser. Other teasers are also possible but with fewer content for example.",
  "title": "Teaser title text comes here.",
  "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",
  "tag": null,
  "tag2": null,
  "event_date": null,
  "label_text": null,
  "telephone": null,
  "opening_hours_service": "2690"
}

/* Teaser Inverted */
{
  "image_ratio": "8:5",
  "paragraph_text": "This is an example teaser but on a background. These kind of teasers need some padding on their content otherwise the content would visually stick to the sides.",
  "title": "Teaser with inverted styling",
  "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",
  "tag": "Optional tag",
  "tag2": "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--inverted"
}

/* Teaser Wide */
{
  "image_ratio": "8:5",
  "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": "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",
  "tag": "Optional tag",
  "tag2": "More optional tags",
  "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",
  "type": "teaser--wide",
  "address_location": "Lakenhalle",
  "address": "Botermarkt 18A, 9000 Gent",
  "list": [
    "List item 1",
    "List item 2 is a bit longer",
    "List item 3",
    "List item 4"
  ]
}

  • Content:
    //
    // Basic teaser theming.
    //
    .teaser {
      position: relative;
      list-style: none;
    
      &.teaser-programme, /// @deprecated
      &.teaser--inverted {
        .teaser-content {
          @include theme('background-color', 'color-secondary');
        }
    
        .content__top, /// @deprecated
        .content__first {
          padding: 0 .8rem;
    
          .figure-wrapper {
            width: calc(100% + 1.6rem);
            margin-left: -.8rem;
          }
        }
    
        .content__bottom, /// @deprecated
        .content__second {
          padding: 0 .8rem .8rem;
        }
      }
    
      &.teaser-topic, /// @deprecated
      &.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__bottom, /// @deprecated
        .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__bottom, /// @deprecated
          .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 {
        font-weight: 700;
      }
    
      .teaser-content {
        display: flex;
        flex-direction: column;
    
        .teaser-topic-links, /// @deprecated
        .teaser-contact-info, /// @deprecated
        .teaser-links {
          @extend %list-no-style;
    
          margin-top: -$link-padding;
          margin-bottom: .4rem;
    
          a {
            font-weight: normal;
          }
        }
    
        .content__top, /// @deprecated
        .content__first {
          position: relative;
          order: 1;
          overflow: hidden;
        }
    
        .content__bottom, /// @deprecated
        .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: .2em;
            font-size: 1.1rem;
          }
        }
    
        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: center;
    
          &::before {
            padding-right: .5rem;
            font-size: 1.2rem;
          }
        }
    
        time.published {
          color: color('dark-gray', -1);
          font-style: italic;
          line-height: 2;
        }
      }
    
      .content__top, /// @deprecated
      .content__first {
        > * {
          margin-bottom: .8rem;
        }
      }
    }
    
    //
    // Teaser wide variant.
    //
    .teaser.teaser-search, /// @deprecated
    .teaser.teaser-search-wide, /// @deprecated
    .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__left, /// @deprecated
      .content__first,
      .content__right,  /// @deprecated
      .content__second {
        flex-basis: 100%;
      }
    
      .content__left, /// @deprecated
      .content__first {
        order: 1;
        margin-bottom: gutter();
    
        @include phablet {
          flex-basis: span(2 of 9);
          margin-right: gutter();
          margin-bottom: 0;
        }
      }
    
      .content__right, /// @deprecated
      .content__second {
        order: 2;
    
        @include phablet {
          flex-basis: span(7 of 9);
        }
    
        .location {
          font-weight: 700;
    
          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: '';
            }
          }
        }
      }
    }
    
  • URL: /components/raw/teaser/_teaser.scss
  • Filesystem Path: components/31-molecules/teaser/_teaser.scss
  • Size: 5.6 KB