# Artist Collabo Page

Ready

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

`

    <main role="main" class="artist-collabo-page">
        <header class="standard-header bg-image-art-01">
            <span class="standard-header__type">Artist Collaboration</span>
            <h1 class="standard-header__title">Artist-in-Residence Program by INNOQ</h1>
            <div class="standard-header__intro">
                <h3>Wir glauben an die bewusste Reflektion zwischen Technik und Gesellschaft.</h3>
                <p class="standard-header__intro__text">
                    Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
                    ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
                    prosciutto buffalo drumstick strip steak capicola short loin.
                    Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
                    chuck doner. Pig venison pork chop shoulder corned beef capicola
                    meatball.
                </p>
            </div>
        </header>

        <section class="container-xl">
            <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-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>
        </section>
    </main>

`
`

    <main role="main" class="artist-collabo-page">
        <header class="standard-header bg-image-art-01">
            <span class="standard-header__type">Artist Collaboration</span>
            <h1 class="standard-header__title">Artist-in-Residence Program by INNOQ</h1>
            <div class="standard-header__intro">
                <h3>Wir glauben an die bewusste Reflektion zwischen Technik und Gesellschaft.</h3>
                <p class="standard-header__intro__text">
                    Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
                    ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
                    prosciutto buffalo drumstick strip steak capicola short loin.
                    Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
                    chuck doner. Pig venison pork chop shoulder corned beef capicola
                    meatball.
                </p>
            </div>
        </header>

        <section class="container-xl">
            <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-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>
        </section>
    </main>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .artist-collabo-page {
        background-color: $brand-gray-10;

        .standard-header__type {
          font-size: $font-size-sm;
        }

        .standard-header__intro {
          background-color: $brand-white;

          h3 {
            color: $brand-gray;
          }
        }

        .standard-header__intro__text {
          color: $brand-gray;
        }

        .artist-list-teaser {
          margin-top: $spacer-xl;
        }

        @media screen and (min-width: $grid-breakpoint-md) {
          .standard-header {
            margin-bottom: ms(20);
          }
        }
      }

  `
- URL: /components/raw/artist-collabo-page/_artist-collabo-page.scss
- Filesystem Path: components/01-pages/artist-collabo-page/_artist-collabo-page.scss
- Size: 472 Bytes

- Handle: @artist-collabo-page
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/01-pages/artist-collabo-page/artist-collabo-page.html

No notes defined.