<main role="main" class="podcast-overview-page">
    <header class="topic-header topic-header-bg-image-igel">
        <div class="topic-header__body">
            <div>
                <h1 class="topic-header__title topic-header-bg-image-text-box-girl">
                    Der INNOQ 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-secondary"></span>Feedback</a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link"><span class="icon-svg icon-apple-itunes icon--brand-secondary"></span>Apple</a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link"><span class="icon-svg icon-spotify icon--brand-secondary"></span>Spotify</a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link"><span class="icon-svg icon-rss icon--brand-secondary"></span>RSS</a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link"><span class="icon-svg icon-text icon--brand-secondary"></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" style="background-image: url(../../assets/heribert-rechts.png)">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline">Podcast Subheadline</h3>
                    <img src="../../assets/icons/arrow-long-right-white.svg" />
                </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">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline">Podcast Subheadline</h3>
                    <img src="../../assets/icons/arrow-long-right-white.svg" />
                </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" style="background-image: url(../../assets/heribert-rechts.png)">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline">Podcast Subheadline</h3>
                    <img src="../../assets/icons/arrow-long-right-red.svg" />
                </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">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline">Podcast Subheadline</h3>
                    <img src="../../assets/icons/arrow-long-right-white.svg" />
                </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" style="
          background-image: url(../../assets/heribert-rechts.png),
            url(../../assets/heribert-links.png);
        ">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline">Podcast Subheadline</h3>
                    <img src="../../assets/icons/arrow-long-right-white.svg" />
                </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--overlay" style="background-image: url(../../assets/heribert-rechts.png)">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline">Podcast Subheadline</h3>
                    <img src="../../assets/icons/arrow-long-right-white.svg" />
                </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--default">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline">Podcast Subheadline</h3>
                    <img src="../../assets/icons/arrow-long-right-white.svg" />
                </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">
    <header class="topic-header topic-header-bg-image-igel">
        <div class="topic-header__body">
            <div>
                <h1 class="topic-header__title topic-header-bg-image-text-box-girl">Der INNOQ 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-secondary"></span>
                        Feedback
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon-svg icon-apple-itunes icon--brand-secondary"></span>
                        Apple
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon-svg icon-spotify icon--brand-secondary"></span>
                        Spotify
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon-svg icon-rss icon--brand-secondary"></span>
                        RSS
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon-svg icon-text icon--brand-secondary"></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" style={cssRight}>
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline">
                        Podcast Subheadline
                    </h3>
                    <img src={context.app.uri("assets/icons/arrow-long-right-white.svg")} />
                </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">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline">
                        Podcast Subheadline
                    </h3>
                    <img src={context.app.uri("assets/icons/arrow-long-right-white.svg")} />
                </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" style={cssRight}>
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline">
                        Podcast Subheadline
                    </h3>
                    <img src={context.app.uri("assets/icons/arrow-long-right-red.svg")} />
                </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">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline">
                        Podcast Subheadline
                    </h3>
                    <img src={context.app.uri("assets/icons/arrow-long-right-white.svg")} />
                </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" style={cssBoth}>
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline">
                        Podcast Subheadline
                    </h3>
                    <img src={context.app.uri("assets/icons/arrow-long-right-white.svg")} />
                </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--overlay" style={cssRight}>
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline">
                        Podcast Subheadline
                    </h3>
                    <img src={context.app.uri("assets/icons/arrow-long-right-white.svg")} />
                </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--default">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                    <h3 class="podcast-teaser__subheadline">
                        Podcast Subheadline
                    </h3>
                    <img src={context.app.uri("assets/icons/arrow-long-right-white.svg")} />
                </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"
}
  • Handle: @innoq-podcast-overview-page
  • Preview:
  • Filesystem Path: components/04-pages/podcast-pages/innoq-podcast/innoq-podcast-overview-page/innoq-podcast-overview-page.html

No notes defined.