# Cover

WIP

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

`

    <div class="cover cover__avatar-overlay" style="background-image: url(../../assets/example-content/heribert-rechts.png), url(../../assets/example-content/heribert-links.png) ">
        <div class="cover__body">
            <h3 class="cover__type">Podcast</h3>
            <h1 class="cover__title">Podcast wirklich langer langer laaaaanger Titel</h1>
            <h2 class="cover__subtitle">Ein Untertitel</h2>
            <div class="cover__authors">
                <div class="cover__author" itemscope itemtype="http://schema.org/Person">
                    Heribert Innoq
                </div>
                <div class="cover__author" itemscope itemtype="http://schema.org/Person">
                    Heribert Innoq
                </div>
            </div>
        </div>
        <div class="cover__footer cover__footer--white cover__footer--single">
            <img itemprop="photo" class="cover__logo--right" src="../../assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg" />
        </div>
    </div>

    <div class="cover cover__avatar-overlay cover__avatar-overlay--security" style="background-image: url(../../assets/example-content/heribert-rechts.png), url(../../assets/example-content/heribert-links.png) ">
        <div class="cover__body">
            <h3 class="cover__type">Podcast</h3>
            <h1 class="cover__title">Podcast Titel</h1>
            <h2 class="cover__subtitle">Ein Untertitel</h2>
            <div class="cover__authors">
                <div class="cover__author" itemscope itemtype="http://schema.org/Person">
                    Heribert Innoq
                </div>
                <div class="cover__author" itemscope itemtype="http://schema.org/Person">
                    Heribert Innoq
                </div>
            </div>
        </div>
        <div class="cover__footer cover__footer--white cover__footer--single">
            <img itemprop="photo" class="cover__logo--right" src="../../assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg" />
        </div>
    </div>

    <div class="cover bg-image-edition-18">
        <div class="cover__body">
            <h1 class="cover__title">Ein wirklich langer langer laaaaanger Titel</h1>
            <h2 class="cover__subtitle">Ich bin ein Untertitel</h2>
        </div>
        <div class="cover__footer cover__footer--primary">
            <ul class="cover__people">
                <li rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--sm">
                        <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                    </div>
                    <address>
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </li>
                <li rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--sm">
                        <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                    </div>
                    <address>
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </li>
            </ul>
            <img itemprop="photo" class="cover__logo--right" src="../../assets/logos/edition-02/svg/innoq-logo--whitepetrol.svg" />
        </div>
    </div>

    <div class="cover bg-image-edition-18">
        <div class="cover__body">
            <h1 class="cover__type">Content-type</h1>
            <h1 class="cover__title">Ich bin ein Titel</h1>
            <h2 class="cover__subtitle">Ich bin ein Untertitel</h2>
        </div>
        <div class="cover__footer cover__footer--white cover__footer--single">
            <img itemprop="photo" class="cover__logo--right" src="../../assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg" />
        </div>
    </div>

    <div class="cover bg-image-edition-18">
        <div class="cover__body">
            <h1 class="cover__title">Ich bin ein Titel</h1>
            <h2 class="cover__subtitle">Ich bin ein Untertitel</h2>
        </div>
        <div class="cover__footer cover__footer--secondary cover__footer--single">
            <img itemprop="photo" class="cover__logo--right" src="../../assets/logos/edition-02/svg/innoq-logo--whiteapricot.svg" />
        </div>
    </div>

    <div class="cover bg-image-edition-18">
        <div class="cover__body">
            <h1 class="cover__title">Ich bin ein Titel</h1>
            <h2 class="cover__subtitle">Ich bin ein Untertitel</h2>
        </div>
        <div class="cover__footer cover__footer--white">
            <img itemprop="photo" class="cover__logo--left" src="../../assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg" />
            <img itemprop="photo" class="cover__logo--right" src="../../assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg" />
        </div>
    </div>

    <div class="cover bg-image-edition-18">
        <div class="cover__body">
            <h1 class="cover__title">Ich bin ein Titel</h1>
            <h2 class="cover__subtitle">Ich bin ein Untertitel</h2>
        </div>
        <div class="cover__footer cover__footer--white">
            <img itemprop="photo" class="cover__logo--left" src="../../assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg" />
            <img itemprop="photo" class="cover__logo--right" src="../../assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg" />
        </div>
    </div>

`
`

    <div class="cover cover__avatar-overlay" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }}), url({{ path '/assets/example-content/heribert-links.png' }}) ">
        <div class="cover__body">
            <h3 class="cover__type">Podcast</h3>
            <h1 class="cover__title">Podcast wirklich langer langer laaaaanger Titel</h1>
            <h2 class="cover__subtitle">Ein Untertitel</h2>
            <div class="cover__authors">
                <div class="cover__author" itemscope itemtype="http://schema.org/Person">
                    Heribert Innoq
                </div>
                <div class="cover__author" itemscope itemtype="http://schema.org/Person">
                    Heribert Innoq
                </div>
            </div>
        </div>
        <div class="cover__footer cover__footer--white cover__footer--single">
            <img itemprop="photo" class="cover__logo--right"
                src="{{ path '/assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg'}}" />
        </div>
    </div>

    <div class="cover cover__avatar-overlay cover__avatar-overlay--security" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }}), url({{ path '/assets/example-content/heribert-links.png' }}) ">
        <div class="cover__body">
            <h3 class="cover__type">Podcast</h3>
            <h1 class="cover__title">Podcast Titel</h1>
            <h2 class="cover__subtitle">Ein Untertitel</h2>
            <div class="cover__authors">
                <div class="cover__author" itemscope itemtype="http://schema.org/Person">
                    Heribert Innoq
                </div>
                <div class="cover__author" itemscope itemtype="http://schema.org/Person">
                    Heribert Innoq
                </div>
            </div>
        </div>
        <div class="cover__footer cover__footer--white cover__footer--single">
            <img itemprop="photo" class="cover__logo--right"
                src="{{ path '/assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg'}}" />
        </div>
    </div>

    <div class="cover bg-image-edition-18">
        <div class="cover__body">
            <h1 class="cover__title">Ein wirklich langer langer laaaaanger Titel</h1>
            <h2 class="cover__subtitle">Ich bin ein Untertitel</h2>
        </div>
        <div class="cover__footer cover__footer--primary">
            <ul class="cover__people">
                <li rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--sm">
                        <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"
                            alt="Portrait von Heribert Innoq" />
                    </div>
                    <address>
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </li>
                <li rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--sm">
                        <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"
                            alt="Portrait von Heribert Innoq" />
                    </div>
                    <address>
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </li>
            </ul>
            <img itemprop="photo" class="cover__logo--right"
                src="{{ path '/assets/logos/edition-02/svg/innoq-logo--whitepetrol.svg'}}" />
        </div>
    </div>

    <div class="cover bg-image-edition-18">
        <div class="cover__body">
            <h1 class="cover__type">Content-type</h1>
            <h1 class="cover__title">Ich bin ein Titel</h1>
            <h2 class="cover__subtitle">Ich bin ein Untertitel</h2>
        </div>
        <div class="cover__footer cover__footer--white cover__footer--single">
            <img itemprop="photo" class="cover__logo--right"
                src="{{ path '/assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg'}}" />
        </div>
    </div>

    <div class="cover bg-image-edition-18">
        <div class="cover__body">
            <h1 class="cover__title">Ich bin ein Titel</h1>
            <h2 class="cover__subtitle">Ich bin ein Untertitel</h2>
        </div>
        <div class="cover__footer cover__footer--secondary cover__footer--single">
            <img itemprop="photo" class="cover__logo--right"
                src="{{ path '/assets/logos/edition-02/svg/innoq-logo--whiteapricot.svg'}}" />
        </div>
    </div>

    <div class="cover bg-image-edition-18">
        <div class="cover__body">
            <h1 class="cover__title">Ich bin ein Titel</h1>
            <h2 class="cover__subtitle">Ich bin ein Untertitel</h2>
        </div>
        <div class="cover__footer cover__footer--white">
            <img itemprop="photo" class="cover__logo--left"
                src="{{ path '/assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg'}}" />
            <img itemprop="photo" class="cover__logo--right"
                src="{{ path '/assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg'}}" />
        </div>
    </div>

    <div class="cover bg-image-edition-18">
        <div class="cover__body">
            <h1 class="cover__title">Ich bin ein Titel</h1>
            <h2 class="cover__subtitle">Ich bin ein Untertitel</h2>
        </div>
        <div class="cover__footer cover__footer--white">
            <img itemprop="photo" class="cover__logo--left"
                src="{{ path '/assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg'}}" />
            <img itemprop="photo" class="cover__logo--right"
                src="{{ path '/assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg'}}" />
        </div>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .cover {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        width: 1600px;
        height: 800px;

        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
      }

      .cover__avatar-overlay {
        background-color: $podcast-teaser-overlay-color;
        background-repeat: no-repeat;
        background-position:
          top right,
          top left;
        background-size: contain;

        .cover__title,
        .cover__subtitle,
        .cover__type,
        .cover__author {
          color: $podcast-teaser-default-color;
        }
      }

      .cover__avatar-overlay--security {
        background-color: $podcast-teaser-overlay-color-sec;

        .cover__title,
        .cover__subtitle,
        .cover__type,
        .cover__author {
          color: $brand-gray;
        }
      }

      .cover__body {
        position: relative;

        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        height: 790px;

        /* stylelint-disable-next-line selector-max-compound-selectors */
        > * + * {
          margin-top: $spacer-md;
        }
      }

      .cover__type {
        @extend %heading-font-bold;

        font-size: $font-size-base;
        color: $standard-header-type-color;
        text-transform: uppercase;
      }

      .cover__title {
        font-size: $font-size-3xl;
      }

      .cover_subtitle {
        font-size: $font-size-lg;
      }

      .cover__title,
      .cover__subtitle,
      .cover__type {
        max-width: $default-page-layout-content-width-md;
        margin-bottom: 0;
        color: $brand-white;
        text-align: center;
      }

      .cover__authors {
        position: absolute;
        bottom: $spacer-md;

        display: flex;
        justify-content: space-evenly;

        width: 100%;
        max-width: $default-page-layout-content-width-md;

        color: $brand-white;
      }

      .cover__author {
        @extend %heading-font-bold;

        font-size: $font-size-base;
        text-transform: uppercase;
      }

      .cover__footer {
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        height: 110px;
        padding: $spacer-xxs $spacer-xl;
      }

      .cover__footer--primary {
        background-color: $brand-primary;
      }

      .cover__footer--secondary {
        background-color: $brand-secondary;
      }

      .cover__footer--white {
        background-color: $brand-white;
      }

      .cover__footer--single {
        justify-content: flex-end;
      }

      .cover__logo--left {
        width: auto;
        height: 80px;
      }

      .cover__logo--right {
        width: auto;
        height: 50px;
      }

      .cover__people {
        @extend %list-unstyled;

        display: flex;
        height: 100px;
        margin-bottom: 0;

        .author-bio--short {
          margin-top: 0;
        }

        > :first-child {
          margin-right: $spacer-md;
        }
      }

  `
- URL: /components/raw/cover/_cover.scss
- Filesystem Path: components/03-organisms/cover/_cover.scss
- Size: 2.5 KB

- Handle: @cover
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/03-organisms/cover/cover.html

No notes defined.