Image List Teaser 

<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.