<div class="teaser">
    <a href="javascript:void(0);" class="teaser__overlay-link" tabindex="-1" aria-hidden="true">Title text</a>
    <div class="teaser__content teaser__content--topic">
        <h3 id="uid">Title text</h3>

        <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.</p>

        <a href='javascript:void(0);' aria-labelledby="uid" title="">read more</a>
    </div>
</div>
<div class="teaser">
  <a href="{{ teaser_link_link }}" class="teaser__overlay-link" tabindex="-1"
     aria-hidden="true">{{ teaser_h3_title }}</a>
  <div class="teaser__content teaser__content--topic">
    <h3 id="{{ teaser_uid }}">{{ teaser_h3_title }}</h3>

    {% include '@paragraph' with {
      'text': teaser_paragraph_text
    } %}

    {% include '@link' with {
      'text': teaser_link_text,
      'aria_labelledby': teaser_uid,
      'link': teaser_link_link
    } %}
  </div>
</div>
{
  "teaser_uid": "uid",
  "teaser_paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, suscipit.",
  "teaser_h3_title": "Title text",
  "teaser_link_text": "read more",
  "teaser_link_link": "javascript:void(0);",
  "teaser_image_src": "https://loremflickr.com/1360/800/ghent",
  "teaser_image_alt_text": "alt text"
}
  • Content:
    .teaser {
      position: relative;
    
      &__overlay-link {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        text-indent: 200%;
        white-space: nowrap;
        overflow: hidden;
        z-index: 1;
      }
    
      &__content {
        margin: 0;
    
        h3 {
          margin-top: 0;
        }
    
        a,
        button {
          position: relative;
          z-index: 2;
        }
    
        &--section {
          @extend %island;
          @extend %section--default;
        }
      }
    
      &__image {
        width: 100%;
      }
    }
    
  • URL: /components/raw/teaser/_teaser.scss
  • Filesystem Path: components/31-molecules/teaser/_teaser.scss
  • Size: 481 Bytes

Teaser

Functionality

  • The entire teaser block is clickable.
  • Links and buttons inside the teaser are clickable.

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: use aria-label or aria-labelledby to provide screenreader information (WCAG 2.4.4).