<main role="main" class="podcast-detail-page">
    <header class="standard-header podcast-header--avatar--overlay" style="
      background-image: url(../../assets/example-content/heribert-rechts.png),
        url(../../assets/example-content/heribert-links.png);
    ">
        <h3 class="standard-header__type">Podcast</h3>
        <h1 class="standard-header__title">Podcast Titel</h1>
        <h2 class="standard-header__subtitle">Ein Untertitel</h2>
        <div class="standard-header__intro">
            <time class="standard-header__intro__label">01.01.2018</time>
            <div class="standard-header__intro__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>
        </div>
    </header>
    <article class="page-layout--grid">
        <section class="center">
            <script class="podigee-podcast-player" src="https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js" data-configuration="https://innoq.podigee.io/74-new-episode/embed?context=external&amp;token=QiMQwGUlJ2PGRN84ZSThpw"></script>
        </section>
        <section class="center">
            <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>
            <a href="#" class="btn btn--cta" data-label="Weitere Episoden anhören">Weitere Episoden anhören</a>
        </section>
        <section class="center">
            <h3>Shownotes &amp; Links</h3>
            <ul>
                <li><a href="#!">ein klassischer Text Link</a></li>
                <li>
                    Unordered List item
                    <ul>
                        <li><a href="#!">ein klassischer Text Link</a></li>
                        <li>
                            Nested unordered list item
                            <ul>
                                <li><a href="#!">ein klassischer Text Link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>Unordered List item <br />Unordered List item</li>
            </ul>
        </section>
    </article>
    <section class="breakout tag-section">
        <h3 class="tag-section__headline">TAGS</h3>
        <div class="tag-section__container">
            <ul class="tag-list">
                <li class="tag-list__item">
                    <a class="tag-list__link" href="/de/timeline/?tag=microservices">Microservices</a>
                </li>
                <li class="tag-list__item">
                    <a class="tag-list__link" href="/de/timeline/?tag=business+technology">Business Technology</a>
                </li>
                <li class="tag-list__item">
                    <a class="tag-list__link" href="/de/timeline/?tag=architecture">Architecture</a>
                </li>
                <li class="tag-list__item">
                    <a class="tag-list__link" href="/de/timeline/?tag=organization">Organization</a>
                </li>
                <li class="tag-list__item">
                    <a class="tag-list__link" href="/de/timeline/?tag=innovation">Innovation</a>
                </li>
                <li class="tag-list__item">
                    <a class="tag-list__link" href="/de/timeline/?tag=project+management">Project Management</a>
                </li>
            </ul>
        </div>
    </section>
    <aside class="page-layout--grid">
        <section class="center share-section">
            <span class="icon-svg icon-arrow-long-down icon--brand-secondary"></span>
            <h3 class="share-section__heading">Share on</h3>
            <ul class="share-section__list">
                <li>
                    <a class="share-section__link" target="_blank" href=""><span class="icon-svg icon-facebook icon--brand-secondary"></span></a>
                </li>
                <li>
                    <a class="share-section__link" target="_blank" href=""><span class="icon-svg icon-twitter icon--brand-secondary"></span></a>
                </li>
                <li>
                    <a class="share-section__link" href=""><span class="icon-svg icon-email icon--brand-secondary"></span></a>
                </li>
            </ul>
        </section>
        <section class="center">
            <div class="blocks">
                <div id="author-bio" class="author-bio author-bio--long" itemscope itemtype="http://schema.org/Person">
                    <a rel="author" class="author-bio__head" itemprop="url" href="#">
                        <div class="author-bio__image avatar avatar--base">
                            <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                        </div>
                        <address class="author">
                            <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span><span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                        </address>
                    </a>
                    <address class="author-bio__social">
                        <a rel="author" class="author-bio__social-profile" href="#" title="Twitter"><span class="
                  icon-svg icon-svg--small
                  icon-twitter icon--brand-secondary
                "></span></a><a rel="author" class="author-bio__social-profile" href="#" title="GitHub"><span class="
                  icon-svg icon-svg--small
                  icon-github icon--brand-secondary
                "></span></a>
                    </address>
                    <div class="author-bio__text">
                        <p>
                            Heribert Innoq ist Senior Consultant bei INNOQ. Als Berater,
                            Entwickler und Architekt unterstützt er Kunden vor allem mit
                            seinen langjährigen Kenntnissen von Java- und JVM-basierten
                            Systemen. Meist beschäftigt er sich hier mit dem Design, der
                            Evaluierung und Implementierung von Architekturen für moderne
                            Webanwendungen und Microservices in
                            Softwaremodernisierungsprojekten. Sein aktueller Fokus gilt den
                            Themen Team-Organisation und Softwareevolution.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </aside>
</main>
import { cssRight, cssBoth } from "./components/04-molecules/visual-elements/teaser/tile-teaser/podcast-tile-teaser/config";
<main role="main" class="podcast-detail-page">
    <header class="standard-header podcast-header--avatar--overlay" style={cssBoth}>
        <h3 class="standard-header__type">Podcast</h3>
        <h1 class="standard-header__title">Podcast Titel</h1>
        <h2 class="standard-header__subtitle">Ein Untertitel</h2>
        <div class="standard-header__intro">
            <time class="standard-header__intro__label">
                01.01.2018
            </time>
            <div class="standard-header__intro__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>
        </div>
    </header>
    <article class="page-layout--grid">
        <section class="center">
            <script class="podigee-podcast-player" src="https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js" data-configuration="https://innoq.podigee.io/74-new-episode/embed?context=external&token=QiMQwGUlJ2PGRN84ZSThpw"></script>
        </section>
        <section class="center">
            <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>
            <a href="#" class="btn btn--cta" data-label="Weitere Episoden anhören" >Weitere Episoden anhören</a>
        </section>
        <section class="center">
            <h3>Shownotes & Links</h3>
            <ul>
                <li>
                    <a href="#!">ein klassischer Text Link</a>
                </li>
                <li>
                    Unordered List item
                    <ul>
                        <li>
                            <a href="#!">ein klassischer Text Link</a>
                        </li>
                        <li>
                            Nested unordered list item
                            <ul>
                                <li>
                                    <a href="#!">ein klassischer Text Link</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    Unordered List item <br />
                    Unordered List item
                </li>
            </ul>
        </section>
    </article>

    <section class="breakout tag-section">
        <h3 class="tag-section__headline">TAGS</h3>
        <div class="tag-section__container">
            <ul class="tag-list">
                <li class="tag-list__item"><a class="tag-list__link" href="/de/timeline/?tag=microservices">Microservices</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="/de/timeline/?tag=business+technology">Business Technology</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="/de/timeline/?tag=architecture">Architecture</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="/de/timeline/?tag=organization">Organization</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="/de/timeline/?tag=innovation">Innovation</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="/de/timeline/?tag=project+management">Project Management</a></li>
            </ul>
        </div>
    </section>

    <aside class="page-layout--grid">
        <section class="center share-section">
            <span class="icon-svg icon-arrow-long-down icon--brand-secondary"></span>
            <h3 class="share-section__heading">Share on</h3>
            <ul class="share-section__list">
                <li>
                    <a class="share-section__link" target="_blank" href="">
                        <span class="icon-svg icon-facebook icon--brand-secondary"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" target="_blank" href="">
                        <span class="icon-svg icon-twitter icon--brand-secondary"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" href="">
                        <span class="icon-svg icon-email icon--brand-secondary"></span>
                    </a>
                </li>
            </ul>
        </section>
        <section class="center">
            <div class="blocks">
                <div id="author-bio" class="author-bio author-bio--long" itemscope itemtype="http://schema.org/Person">
                    <a rel="author" class ="author-bio__head" itemprop="url" href="#">
                        <div class="author-bio__image avatar avatar--base">
                            <img itemprop="photo" class="avatar__image" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq"/>
                        </div>
                        <address class="author">
                            <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                            <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                        </address>
                    </a>

                    <address class="author-bio__social">
                        <a rel="author" class="author-bio__social-profile" href="#" title="Twitter">
                            <span class="icon-svg icon-svg--small icon-twitter icon--brand-secondary"></span>
                        </a>
                        <a rel= "author" class="author-bio__social-profile" href="#" title="GitHub">
                            <span class="icon-svg icon-svg--small icon-github icon--brand-secondary"></span>
                        </a>
                    </address>
                    <div class="author-bio__text">
                        <p>Heribert Innoq ist Senior Consultant bei INNOQ.
                            Als Berater, Entwickler und Architekt unterstützt er Kunden vor allem mit seinen langjährigen Kenntnissen von Java- und JVM-basierten Systemen.
                            Meist beschäftigt er sich hier mit dem Design, der Evaluierung und Implementierung von Architekturen für moderne Webanwendungen und Microservices
                            in Softwaremodernisierungsprojekten. Sein aktueller Fokus gilt den Themen Team-Organisation und Softwareevolution.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </aside>
</main>
{
  "code": "pick(:love) do |something|\n    n.times do\n        result = play(something)\n        result.publish\n    end\nend\n"
}
  • Content:
    .podcast-detail-page {
      .podigee-podcast-player,
      .toolbar {
        margin-bottom: $spacer-lg;
        text-align: center;
      }
    
      .btn {
        display: block;
        width: max-content;
        margin: 0 auto $spacer-lg;
      }
    }
    
  • URL: /components/raw/innoq-podcast-detail-page/_innoq-podcast-detail-page.scss
  • Filesystem Path: components/01-pages/podcast-pages/innoq-podcast/innoq-podcast-detail-page/_innoq-podcast-detail-page.scss
  • Size: 213 Bytes
  • Handle: @innoq-podcast-detail-page
  • Preview:
  • Filesystem Path: components/01-pages/podcast-pages/innoq-podcast/innoq-podcast-detail-page/innoq-podcast-detail-page.html

No notes defined.