<main role="main">
    <div class="page-layout-xl--default">
        <h2 class="teaser-section-heading">Magazin</h2>
        <div class="blocks">
            <a href="#" class="topic-teaser bg-image-edition-02">
                <div class="topic-teaser__body">
                    <div class="topic-teaser__caption">Schwerpunktthema</div>
                    <h1 class="topic-teaser__header">
                        Microservices – der aktuelle Stand
                    </h1>
                    <div class="topic-teaser__text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit
                        doloremque culpa minima vero quod, optio itaque nisi deserunt,
                        debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="topic-teaser__cta">
                        Zum Schwerpunktthema<span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <section class="stripe stripe--gray">
        <div class="page-layout-xl--default">
            <h2 class="teaser-section-heading">Artikel</h2>
            <div class="blocks">
                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">Artikel</div>
                        <h2 class="content-teaser__header">Artikel Headline</h2>
                        <p class="content-teaser__text">Artikel Intro Text</p>
                    </div>
                    <div class="content-teaser__footer">
                        <div class="author-bio author-bio--condensed" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--xs">
                                <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="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>
                        </div>
                    </div>
                </a><a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">Artikel</div>
                        <h2 class="content-teaser__header">Artikel Headline</h2>
                        <p class="content-teaser__text">Artikel Intro Text</p>
                    </div>
                    <div class="content-teaser__footer">
                        <div class="author-bio author-bio--condensed" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--xs">
                                <img class="avatar__image" itemprop="photo" 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>
                        </div>
                    </div>
                </a><a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">Artikel</div>
                        <h2 class="content-teaser__header">Artikel Headline</h2>
                        <p class="content-teaser__text">Artikel Intro Text</p>
                    </div>
                    <div class="content-teaser__footer">
                        <div class="author-bio author-bio--condensed" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--xs">
                                <img class="avatar__image" itemprop="photo" 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>
                        </div>
                    </div>
                </a>
            </div>
            <div class="magazine-page--link">
                <a class="link-teaser" href="#">Alle Artikel ansehen</a>
            </div>
            <h2 class="teaser-section-heading">Podcast</h2>
            <div class="blocks">
                <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="
            background-image: url(../../assets/example-content/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>
                        <span class="icon-svg icon-arrow-long-right icon--brand-white"></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" style="
            background-image: url(../../assets/example-content/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>
                        <span class="icon-svg icon-arrow-long-right icon--brand-white"></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" style="
            background-image: url(../../assets/example-content/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>
                        <span class="icon-svg icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                            Heribert Innoq
                        </div>
                    </div>
                </a>
            </div>
            <div class="magazine-page--link">
                <a class="link-teaser" href="#">Alle Podcasts ansehen</a>
            </div>
            <h2 class="teaser-section-heading">News</h2>
            <div class="blocks">
                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">News</div>
                        <h2 class="content-teaser__header">News Headline</h2>
                        <p class="content-teaser__text">News Intro Text</p>
                    </div>
                </a><a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">News</div>
                        <h2 class="content-teaser__header">News Headline</h2>
                        <p class="content-teaser__text">News Intro Text</p>
                    </div>
                </a><a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">News</div>
                        <h2 class="content-teaser__header">News Headline</h2>
                        <p class="content-teaser__text">News Intro Text</p>
                    </div>
                </a>
            </div>
            <div class="magazine-page--link">
                <a class="link-teaser" href="#">Alle News ansehen</a>
            </div>
        </div>
    </section>
    <div class="blocks">
        <div class="case-teaser bg-image-edition-06">
            <div class="case-teaser__wrapper">
                <div class="case-teaser__body">
                    <div class="case-teaser__caption">ARTIST COLLABORATION</div>
                    <div>
                        <div class="case-teaser__header">
                            <h1 class="punch-in bg-image-edition02-06">INNOQ Digital Art</h1>
                        </div>
                    </div>
                    <div class="case-teaser__text">
                        Die Kollaborationsreihe „INNOQ Digital Art“ hat zum Ziel, die
                        Zusammenarbeit mit ausgewählten Medienkünstlern zu fördern.
                        Gemeinsam werden Fragen zu technologischem Fortschritt und dessen
                        gesellschaftlichen Auswirkungen aus verschiedenen Perspektiven
                        betrachtet. Dabei steht die gemeinsame Entwicklung von Kunstwerken
                        und der intensive Austausch zwischen INNOQ-Mitarbeitern und den
                        Künstlern im Fokus.
                    </div>
                    <div class="case-teaser__footer">
                        <a class="link-teaser" href="#">Mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
import { cssRight } from "./components/04-molecules/visual-elements/teaser/tile-teaser/podcast-tile-teaser/config";

<main role="main">
    <div class="page-layout-xl--default">
        <h2 class="teaser-section-heading">Magazin</h2>
        <div class="blocks">
            <a href="#" class="topic-teaser bg-image-edition-02">
                <div class="topic-teaser__body">
                    <div class="topic-teaser__caption">Schwerpunktthema</div>
                    <h1 class="topic-teaser__header">Microservices – der aktuelle Stand</h1>
                    <div class="topic-teaser__text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="topic-teaser__cta">Zum Schwerpunktthema
                        <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <section class="stripe stripe--gray">
        <div class="page-layout-xl--default">
            <h2 class="teaser-section-heading">Artikel</h2>
            <div class="blocks">
                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">Artikel</div>
                        <h2 class="content-teaser__header">Artikel Headline</h2>
                        <p class="content-teaser__text">
                            Artikel Intro Text
                        </p>
                    </div>
                    <div class="content-teaser__footer">
                        <div class="author-bio author-bio--condensed" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--xs">
                                <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/example-content/heribert.jpg")} alt="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>
                        </div>
                    </div>
                </a>

                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">Artikel</div>
                        <h2 class="content-teaser__header">Artikel Headline</h2>
                        <p class="content-teaser__text">
                            Artikel Intro Text
                        </p>
                    </div>
                    <div class="content-teaser__footer">
                        <div class="author-bio author-bio--condensed" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--xs">
                                <img class="avatar__image" itemprop="photo" 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>
                        </div>
                    </div>
                </a>

                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">Artikel</div>
                        <h2 class="content-teaser__header">Artikel Headline</h2>
                        <p class="content-teaser__text">
                            Artikel Intro Text
                        </p>
                    </div>
                    <div class="content-teaser__footer">
                        <div class="author-bio author-bio--condensed" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--xs">
                                <img class="avatar__image" itemprop="photo" 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>
                        </div>
                    </div>
                </a>
            </div>
            <div class="magazine-page--link">
                <a class="link-teaser" href="#">Alle Artikel ansehen</a>
            </div>
            <h2 class="teaser-section-heading">Podcast</h2>
            <div class="blocks">
                <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>
                        <span class="icon-svg icon-arrow-long-right icon--brand-white"></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" 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>
                        <span class="icon-svg icon-arrow-long-right icon--brand-white"></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" 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>
                        <span class="icon-svg icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                            Heribert Innoq
                        </div>
                    </div>
                </a>
            </div>
            <div class="magazine-page--link">
                <a class="link-teaser" href="#">Alle Podcasts ansehen</a>
            </div>
            <h2 class="teaser-section-heading">News</h2>
            <div class="blocks">
                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">News</div>
                        <h2 class="content-teaser__header">News Headline</h2>
                        <p class="content-teaser__text">
                            News Intro Text
                        </p>
                    </div>
                </a>
                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">News</div>
                        <h2 class="content-teaser__header">News Headline</h2>
                        <p class="content-teaser__text">
                            News Intro Text
                        </p>
                    </div>
                </a>
                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">News</div>
                        <h2 class="content-teaser__header">News Headline</h2>
                        <p class="content-teaser__text">
                            News Intro Text
                        </p>
                    </div>
                </a>
            </div>
            <div class="magazine-page--link">
                <a class="link-teaser" href="#">Alle News ansehen</a>
            </div>
        </div>
    </section>
    <div class="blocks">
        <div class="case-teaser bg-image-edition-06">
            <div class="case-teaser__wrapper">
                <div class="case-teaser__body">
                    <div class="case-teaser__caption">ARTIST COLLABORATION</div>
                        <div>
                            <div class="case-teaser__header">
                                <h1 class="punch-in bg-image-edition02-06">INNOQ Digital Art</h1>
                            </div>
                        </div>
                    <div class="case-teaser__text">
                        Die Kollaborationsreihe „INNOQ Digital Art“ hat zum Ziel, die Zusammenarbeit mit ausgewählten Medienkünstlern zu fördern. Gemeinsam werden Fragen zu technologischem Fortschritt und dessen gesellschaftlichen Auswirkungen aus verschiedenen Perspektiven betrachtet. Dabei steht die gemeinsame Entwicklung von Kunstwerken und der intensive Austausch zwischen INNOQ-Mitarbeitern und den Künstlern im Fokus.
                    </div>
                    <div class="case-teaser__footer">
                        <a class="link-teaser" href="#">Mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
/* No context defined. */

No notes defined.