Cover 

<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. */
  • 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

No notes defined.