<main role="main" class="podcast-overview-page podcast-overview-page--security">
    <header class="topic-header topic-header-bg-image-koralle">
        <div class="topic-header__body">
            <div>
                <h1 class="topic-header__title topic-header-bg-image-text-box-girl">
                    Der Security Podcast
                </h1>
            </div>
            <div class="topic-header__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.
            </div>
            <ul class="toolbar">
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link"><span class="icon-svg icon-feedback icon--brand-gray"></span>Feedback</a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link"><span class="icon-svg icon-apple-itunes icon--brand-gray"></span>Apple</a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link"><span class="icon-svg icon-spotify icon--brand-gray"></span>Spotify</a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link"><span class="icon-svg icon-rss icon--brand-gray"></span>RSS</a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link"><span class="icon-svg icon-text icon--brand-gray"></span>Transkript</a>
                </li>
            </ul>
            <img src="../../assets/icons/arrow-long-down.svg" />
        </div>
    </header>
    <article class="teaser-page-layout">
        <div class="podcast-grid">
            <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay podcast-teaser--avatar--overlay--security" style="background-image: url(../../assets/heribert-rechts.png)">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Security-Podcast</div>
                    <h2 class="podcast-teaser__headline podcast-teaser__headline--security">
                        Podcast Headline
                    </h2>
                    <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                        Podcast Subheadline
                    </h3>
                    <span class="icon-svg icon-arrow-long-right icon--brand-black"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                </div>
            </a><a href="#" class="podcast-teaser podcast-teaser--default podcast-teaser--default--security">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Security-Podcast</div>
                    <h2 class="podcast-teaser__headline podcast-teaser__headline--security">
                        Podcast Headline
                    </h2>
                    <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                        Podcast Subheadline
                    </h3>
                    <span class="icon-svg icon-arrow-long-right icon--brand-yellow"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                </div>
            </a><a href="#" class="podcast-teaser podcast-teaser--avatar podcast-teaser--avatar--security" style="background-image: url(../../assets/heribert-rechts.png)">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Security-Podcast</div>
                    <h2 class="podcast-teaser__headline podcast-teaser__headline--security">
                        Podcast Headline
                    </h2>
                    <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                        Podcast Subheadline
                    </h3>
                    <span class="icon-svg icon-arrow-long-right icon--brand-black"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                </div>
            </a><a href="#" class="podcast-teaser podcast-teaser--default podcast-teaser--default--security">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Security-Podcast</div>
                    <h2 class="podcast-teaser__headline podcast-teaser__headline--security">
                        Podcast Headline
                    </h2>
                    <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                        Podcast Subheadline
                    </h3>
                    <span class="icon-svg icon-arrow-long-right icon--brand-yellow"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                </div>
            </a><a href="#" class="podcast-teaser podcast-teaser--avatar--overlay--big podcast-teaser--avatar--overlay--big--security" style="
          background-image: url(../../assets/heribert-rechts.png),
            url(../../assets/heribert-links.png);
        ">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Security-Podcast</div>
                    <h2 class="podcast-teaser__headline podcast-teaser__headline--security">
                        Podcast Headline
                    </h2>
                    <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                        Podcast Subheadline
                    </h3>
                    <span class="icon-svg icon-arrow-long-right icon--brand-black"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                    <div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                </div>
            </a><a href="#" class="podcast-teaser podcast-teaser--avatar--overlay podcast-teaser--avatar--overlay--security" style="background-image: url(../../assets/heribert-rechts.png)">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Security-Podcast</div>
                    <h2 class="podcast-teaser__headline podcast-teaser__headline--security">
                        Podcast Headline
                    </h2>
                    <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                        Podcast Subheadline
                    </h3>
                    <span class="icon-svg icon-arrow-long-right icon--brand-black"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                    <div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                </div>
            </a><a href="#" class="podcast-teaser podcast-teaser--default podcast-teaser--default--security">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Security-Podcast</div>
                    <h2 class="podcast-teaser__headline podcast-teaser__headline--security">
                        Podcast Headline
                    </h2>
                    <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                        Podcast Subheadline
                    </h3>
                    <span class="icon-svg icon-arrow-long-right icon--brand-yellow"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                </div>
            </a>
        </div>
    </article>
</main>
import { cssRight, cssBoth } from "./components/02-molecules/visual-elements/teaser/tile-teaser/podcast-tile-teaser/config";
<main role="main" class="podcast-overview-page podcast-overview-page--security">
    <header class="topic-header topic-header-bg-image-koralle">
        <div class="topic-header__body">
            <div>
                <h1 class="topic-header__title topic-header-bg-image-text-box-girl">Der Security Podcast</h1>
            </div>
            <div class="topic-header__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.
            </div>
            <ul class="toolbar">
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon-svg icon-feedback icon--brand-gray"></span>
                        Feedback
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon-svg icon-apple-itunes icon--brand-gray"></span>
                        Apple
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon-svg icon-spotify icon--brand-gray"></span>
                        Spotify
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon-svg icon-rss icon--brand-gray"></span>
                        RSS
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon-svg icon-text icon--brand-gray"></span>
                        Transkript
                    </a>
                </li>
            </ul>
            <img src={context.app.uri('assets/icons/arrow-long-down.svg')} />
        </div>
    </header>

    <article class="teaser-page-layout">
        <div class="podcast-grid">
            <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay podcast-teaser--avatar--overlay--security" style={cssRight}>
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Security-Podcast</div>
                    <h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                        Podcast Subheadline
                    </h3>
                    <span class="icon-svg icon-arrow-long-right icon--brand-black"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person" >
                        Heribert Innoq
                    </div>
                </div>
            </a>

            <a href="#" class="podcast-teaser podcast-teaser--default podcast-teaser--default--security">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Security-Podcast</div>
                    <h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                        Podcast Subheadline
                    </h3>
                    <span class="icon-svg icon-arrow-long-right icon--brand-yellow"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                        Heribert Innoq
                    </div>
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                        Heribert Innoq
                    </div>
                </div>
            </a>

            <a href="#" class="podcast-teaser podcast-teaser--avatar podcast-teaser--avatar--security" style={cssRight}>
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Security-Podcast</div>
                    <h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                        Podcast Subheadline
                    </h3>
                    <span class="icon-svg icon-arrow-long-right icon--brand-black"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                        Heribert Innoq
                    </div>
                </div>
            </a>

            <a href="#" class="podcast-teaser podcast-teaser--default podcast-teaser--default--security">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Security-Podcast</div>
                    <h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                        Podcast Subheadline
                    </h3>
                    <span class="icon-svg icon-arrow-long-right icon--brand-yellow"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                        Heribert Innoq
                    </div>
                </div>
            </a>

            <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay--big podcast-teaser--avatar--overlay--big--security" style={cssBoth}>
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Security-Podcast</div>
                    <h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                        Podcast Subheadline
                    </h3>
                    <span class="icon-svg icon-arrow-long-right icon--brand-black"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person" >
                        Heribert Innoq
                    </div>
                    <div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person" >
                        Heribert Innoq
                    </div>
                </div>
            </a>

            <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay podcast-teaser--avatar--overlay--security" style={cssRight}>
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Security-Podcast</div>
                    <h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                        Podcast Subheadline
                    </h3>
                    <span class="icon-svg icon-arrow-long-right icon--brand-black"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person" >
                        Heribert Innoq
                    </div>
                    <div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person" >
                        Heribert Innoq
                    </div>
                </div>
            </a>

            <a href="#" class="podcast-teaser podcast-teaser--default podcast-teaser--default--security">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Security-Podcast</div>
                    <h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
                        Podcast Subheadline
                    </h3>
                    <span class="icon-svg icon-arrow-long-right icon--brand-yellow"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                        Heribert Innoq
                    </div>
                </div>
            </a>
        </div>
    </article>
</main>
{
  "code": "pick(:love) do |something|\n    n.times do\n        result = play(something)\n        result.publish\n    end\nend\n"
}
  • Content:
    .podcast-overview-page--security {
      .topic-header {
        background-color: $brand-gray-75;
        background-blend-mode: multiply;
    
        .toolbar__link {
          color: $brand-gray;
    
          &:hover,
          &:focus {
            color: $brand-gray;
          }
    
          .icon-svg:hover,
          .icon-svg:focus {
            background: $brand-gray;
          }
        }
      }
    }
    
  • URL: /components/raw/security-podcast-overview-page/_security-podcast-overview-page.scss
  • Filesystem Path: components/04-pages/podcast-pages/security-podcast/security-podcast-overview-page/_security-podcast-overview-page.scss
  • Size: 345 Bytes
  • Handle: @security-podcast-overview-page
  • Preview:
  • Filesystem Path: components/04-pages/podcast-pages/security-podcast/security-podcast-overview-page/security-podcast-overview-page.html

No notes defined.