<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--small">
                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                </div>
                <address class="author-bio__text">
                    <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--small">
                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                </div>
                <address class="author-bio__text">
                    <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>
import { cssBoth } from "./components/03-organisms/header/standard-header/config";
<div class="cover cover__avatar-overlay" style={cssBoth}>
    <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={context.app.uri("assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg")} />
    </div>
</div>

<div class="cover cover__avatar-overlay cover__avatar-overlay--security" style={cssBoth}>
    <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={context.app.uri("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--small">
                    <img itemprop="photo" class="avatar__image" src={context.app.uri("assets/example-content/heribert.jpg")}
                        alt="Portrait von Heribert Innoq" />
                </div>
                <address class="author-bio__text">
                    <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--small">
                    <img itemprop="photo" class="avatar__image" src={context.app.uri("assets/example-content/heribert.jpg")}
                        alt="Portrait von Heribert Innoq" />
                </div>
                <address class="author-bio__text">
                    <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={context.app.uri("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={context.app.uri("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={context.app.uri("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={context.app.uri("assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg")} />
        <img itemprop="photo" class="cover__logo--right"
            src={context.app.uri("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={context.app.uri("assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg")} />
        <img itemprop="photo" class="cover__logo--right"
            src={context.app.uri("assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg")} />
    </div>
</div>
/* No context defined. */
  • Content:
    .cover {
      display: flex;
      overflow: hidden;
      width: 1600px;
      height: 800px;
      flex-direction: column;
      justify-content: space-between;
      background-blend-mode: multiply;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .cover__avatar-overlay {
      background-color: $podcast-teaser-overlay-color;
      background-position: top right, top left;
      background-repeat: no-repeat;
      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;
      display: flex;
      overflow: hidden;
      height: 790px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    
      /* stylelint-disable-next-line selector-max-compound-selectors */
      > * + * {
        margin-top: $spacer-md;
      }
    }
    
    .cover__type {
      @extend %heading-font-bold;
    
      color: $standard-header-type-color;
      font-size: $font-size-base;
      text-transform: uppercase;
    }
    
    .cover__title {
      font-size: $font-size-xxxxl;
    }
    
    .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;
      width: 100%;
      max-width: $default-page-layout-content-width-md;
      justify-content: space-evenly;
      color: $brand-white;
    }
    
    .cover__author {
      @extend %heading-font-bold;
    
      font-size: $font-size-base;
      text-transform: uppercase;
    }
    
    .cover__footer {
      display: flex;
      overflow: hidden;
      width: 100%;
      height: 110px;
      align-items: center;
      justify-content: space-between;
      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 {
      height: 80px;
    }
    
    .cover__logo--right {
      height: 50px;
    }
    
    .cover__people {
      @extend %list-unstyled;
    
      display: flex;
      height: 100px;
      margin-bottom: 0;
    
      .author-bio {
        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.