<a href="#" class="image-list-teaser">
    <h3 class="image-list-teaser__title image-list-teaser__title--01">
        Vertigo in the Face of the Infinite
    </h3>
    <p class="image-list-teaser__subtitle">Matthew Plummer-Fernandez</p>
    <figure>
        <img class="content__image__big" src="../../assets/bg-images/edition-01/visual-header-heads.jpg" alt="Tower" />
        <figcaption>Erste INNOQ-Medienkunst-Edition</figcaption>
    </figure>
</a>
<a href="#" class="image-list-teaser">
    <h3 class="image-list-teaser__title image-list-teaser__title--01">Vertigo in the Face of the Infinite</h3>
    <p class="image-list-teaser__subtitle">Matthew Plummer-Fernandez</p>
    <figure>
        <img class="content__image__big" src={context.app.uri("assets/bg-images/edition-01/visual-header-heads.jpg")} alt="Tower" />
        <figcaption>
            Erste INNOQ-Medienkunst-Edition
        </figcaption>
    </figure>
</a>
/* No context defined. */
  • Content:
    .image-list-teaser {
      @extend %link-unstyled;
    
      display: block;
      margin-bottom: $spacer-xxl;
    }
    
    .image-list-teaser__title {
      @extend %heading-font-heavy;
    
      margin-bottom: 0;
      text-align: center;
      font-size: $font-size-lg;
    
      &--01 {
        color: $brand-red;
      }
    
      &--02 {
        color: $brand-apricot;
      }
    }
    
    .image-list-teaser__subtitle {
      @extend %body-font-italic;
    
      text-align: center;
      font-size: $font-size-base;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .image-list-teaser__title {
        font-size: $font-size-xxl;
      }
    
      .image-list-teaser__subtitle {
        font-size: $font-size-sm;
      }
    }
    
  • URL: /components/raw/image-list-teaser/_image-list-teaser.scss
  • Filesystem Path: components/02-molecules/visual-elements/teaser/list-teaser/image-list-teaser/_image-list-teaser.scss
  • Size: 616 Bytes
  • Handle: @image-list-teaser
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/teaser/list-teaser/image-list-teaser/image-list-teaser.html

No notes defined.