# Artist List Teaser

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div class="demo">
        <a href="#" class="artist-list-teaser">
            <div class="artist-list-teaser__edition">
                <hr class="artist-list-teaser__edition__separator" />
                <div class="artist-list-teaser__edition__type">Edition</div>
                <span class="artist-list-teaser__edition__date artist-list-teaser__edition__date--edition-1">18
                    <hr class="artist-list-teaser__edition__date__separator artist-list-teaser__edition__date__separator--edition-1" />
                    21
                </span>
            </div>
            <h3 class="artist-list-teaser__title artist-list-teaser__title--edition-1">Vertigo in the Face of the Infinite</h3>
            <p class="artist-list-teaser__subtitle">Matthew Plummer-Fernandez</p>
            <figure class="artist-list-teaser__image">
                <img src="../../assets/bg-images/edition-02/edition02-data-04.webp" alt="Tower" />
                <figcaption>
                    Erste INNOQ-Medienkunst-Edition
                </figcaption>
            </figure>
        </a>

        <a href="#" class="artist-list-teaser">
            <div class="artist-list-teaser__edition">
                <hr class="artist-list-teaser__edition__separator" />
                <div class="artist-list-teaser__edition__type">Edition</div>
                <span class="artist-list-teaser__edition__date artist-list-teaser__edition__date--edition-2">18
                    <hr class="artist-list-teaser__edition__date__separator artist-list-teaser__edition__date__separator--edition-2" />
                    21
                </span>
            </div>
            <h3 class="artist-list-teaser__title artist-list-teaser__title--edition-2">Vertigo in the Face of the Infinite</h3>
            <p class="artist-list-teaser__subtitle">Matthew Plummer-Fernandez</p>
            <figure class="artist-list-teaser__image">
                <img src="../../assets/bg-images/edition-02/edition02-data-04.webp" alt="Tower" />
                <figcaption>
                    Erste INNOQ-Medienkunst-Edition
                </figcaption>
            </figure>
        </a>
    </div>

`
`

    <div class="demo">
        <a href="#" class="artist-list-teaser">
            <div class="artist-list-teaser__edition">
                <hr class="artist-list-teaser__edition__separator" />
                <div class="artist-list-teaser__edition__type">Edition</div>
                <span class="artist-list-teaser__edition__date artist-list-teaser__edition__date--edition-1">18
                    <hr class="artist-list-teaser__edition__date__separator artist-list-teaser__edition__date__separator--edition-1"/>
                    21
                </span>
            </div>
            <h3 class="artist-list-teaser__title artist-list-teaser__title--edition-1">Vertigo in the Face of the Infinite</h3>
            <p class="artist-list-teaser__subtitle">Matthew Plummer-Fernandez</p>
            <figure class="artist-list-teaser__image">
                <img src="{{ path '/assets/bg-images/edition-02/edition02-data-04.webp'}}" alt="Tower" />
                <figcaption>
                    Erste INNOQ-Medienkunst-Edition
                </figcaption>
            </figure>
        </a>

        <a href="#" class="artist-list-teaser">
            <div class="artist-list-teaser__edition">
                <hr class="artist-list-teaser__edition__separator" />
                <div class="artist-list-teaser__edition__type">Edition</div>
                <span class="artist-list-teaser__edition__date artist-list-teaser__edition__date--edition-2">18
                    <hr class="artist-list-teaser__edition__date__separator artist-list-teaser__edition__date__separator--edition-2" />
                    21
                </span>
            </div>
            <h3 class="artist-list-teaser__title artist-list-teaser__title--edition-2">Vertigo in the Face of the Infinite</h3>
            <p class="artist-list-teaser__subtitle">Matthew Plummer-Fernandez</p>
            <figure class="artist-list-teaser__image">
                <img src="{{ path '/assets/bg-images/edition-02/edition02-data-04.webp'}}" alt="Tower" />
                <figcaption>
                    Erste INNOQ-Medienkunst-Edition
                </figcaption>
            </figure>
        </a>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .artist-list-teaser {
        @extend %link-unstyled;

        display: block;
        padding-top: $spacer-base;
      }

      $edition-font-size: $font-size-base;

      //Edition Label for Artist Collabo
      .artist-list-teaser__edition {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        text-align: center;
      }

      .artist-list-teaser__edition__separator {
        transform: rotate(90deg);

        min-width: $spacer-xl;
        height: 2px;

        background-color: $brand-gray;
        border: 0;
      }

      .artist-list-teaser__edition__type {
        @extend %heading-font-bold;

        margin-top: $spacer-base;
        font-size: $font-size-md;
        color: $brand-gray;
        text-transform: uppercase;
      }

      .artist-list-teaser__edition__date {
        @extend %heading-font-heavy;

        display: flex;
        flex-direction: column;
        align-items: center;

        margin-top: $spacer-xs;

        font-size: $font-size-xxl;

        &--edition-1 {
          color: $brand-blue;
        }

        &--edition-2 {
          color: $brand-petrol;
        }
      }

      .artist-list-teaser__edition__date__separator {
        transform: rotate(90deg);

        min-width: $spacer-base;
        height: 5px;
        margin: $spacer-sm 0;

        background-color: $brand-red;
        border: 0;

        &--edition-1 {
          background-color: $brand-red;
        }

        &--edition-2 {
          background-color: $brand-apricot;
        }
      }

      .artist-list-teaser__title {
        @extend %heading-font-heavy;

        margin-top: $spacer-sm;
        font-size: $font-size-lg;
        text-align: center;

        &--edition-1 {
          color: $brand-red;
        }

        &--edition-2 {
          color: $brand-apricot;
        }
      }

      .artist-list-teaser__subtitle {
        @extend %body-font-italic;

        font-size: $font-size-base;
        text-align: center;
      }

      .artist-list-teaser__image {
        margin-top: $spacer-sm;
      }

      // Breakpoints
      @media screen and (min-width: $grid-breakpoint-md) {
        .artist-list-teaser__edition__-separator {
          width: ms(20);
          margin-bottom: $spacer-xl;
        }

        .artist-list-teaser__edition__date {
          flex-direction: row;
          font-size: $font-size-3xl;
        }

        .artist-list-teaser__edition__date__separator {
          transform: rotate(0deg);
          height: 8px;
          margin: 0 $spacer-xxs;
        }

        .artist-list-teaser__title {
          font-size: $font-size-xxl;
        }

        .artist-list-teaser__subtitle {
          font-size: $font-size-sm;
        }
      }

  `
- URL: /components/raw/artist-list-teaser/_artist-list-teaser.scss
- Filesystem Path: components/04-molecules/teaser/list-teaser/artist-list-teaser/_artist-list-teaser.scss
- Size: 2.2 KB

- Handle: @artist-list-teaser
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/teaser/list-teaser/artist-list-teaser/artist-list-teaser.html

No notes defined.