# Topic Page

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <header class="topic-header bg-image-edition-04">
        <div class="topic-header__body">
            <h3 class="topic-header__type">Schwerpunktthema <span class="topic-header__tag">Microservices</span></h3>
            <div>
                <h2 class="topic-header__title bg-image-edition-04">Downloadbereich</h2>
            </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>
            <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
        </div>
    </header>

    <section class="container-md container-vertical-spacing-xl">
        <div class="download-section-feature">
            <img class="download-section-feature__image" itemprop="photo" src="../../assets/example-content/beispiel-talk.jpg" alt="Eine Vortragsfolie" />
            <h3 class="download-section-feature__title">Titel des Talks</h3>
            <p class="download-section-feature__caption">Dies ist eine lustige Beschreibung des Talks</p>
            <a href="#" class="btn btn--small btn--cta download-section-feature__link" data-label="Download">Download</a>
        </div>
        <p>Data Mesh ist aktuell ein Hypethema, das wir mit <a href="https://www.datamesh-architecture.com/">www.datamesh-architecture.com</a> aus unserer Perspektive
            aufbereitet haben.</p>

        <p>Data Mesh ist ein sozio-technischer dezentraler Ansatz, der es Domänen-Teams ermöglicht, bereichsübergreifende
            Datenanalysen eigenständig durchzuführen. Es führt die Ideen aus Domain-driven Design, Product Thinking,
            Self-contained Systems und Team Topologies fort, und erweitert diese auf analytische Daten. Entwicklungsteams
            können
            damit selbstständig datengetrieben arbeiten und bessere Entscheidungen treffen. Sie bekommen aber auch mehr
            Verantwortung, da zusätzlich zu den Anwendungen und APIs nun auch Datenprodukte betrieben werden müssen. Diese
            Datenprodukte ermöglichen stabile domänenübergreifende Analysen und Reports.</p>

        <p>Für Unternehmen, die ihre Software-Entwicklung nach Domain-driven Design und mit Microservices bzw.
            Self-contained
            Systems ausrichten, könnte Data Mesh eine passende Datenstrategie sein.</p>

        <figure>
            <img src="https://www.datamesh-architecture.com/images/datamesharchitecture.png.webp" alt="" loading="lazy">

        </figure>

        <p>Wir bieten einen 1-Tages-Workshop an, der für dein Unternehmen die zentralen Fragen klärt:</p>

        <check-list>

            <ul class="checklist">
                <li>Was ist Data Mesh wirklich?</li>
                <li>Ist Data Mesh sinnvoll für uns? Sind wir bereit?</li>
                <li>Wie führe ich Data Mesh ein?</li>
            </ul>

        </check-list>

        <p>Die Einführung von Data Mesh ist eine strategische Entscheidung und mit einer Reihe von organisatorischen und
            technischen Voraussetzungen und Konsequenzen sowie entsprechender Chancen verbunden, die im Workshop behandelt
            werden.</p>

        <p>Der Workshop richtet sich an Entscheider:innen und sollte optimalerweise aus 5 bis 8 Teilnehmer:innen aus
            folgenden
            Bereichen bestehen:</p>

        <ul>
            <li>Head of Data</li>
            <li>Head of Software-Engineering</li>
            <li>Head of Product</li>
            <li>Head of Operations/Cloud</li>
            <li>Software Architect</li>
            <li>ggf. CIO/CTO</li>
        </ul>

        <p>Der Workshop wird von zwei erfahrenen INNOQ Berater:innen durchgeführt.</p>

        <long-quote person="Jan Schwake" role="Senior Product Owner Data &amp; Analytics, Interhyp Gruppe" avatar="https://res.cloudinary.com/innoq/image/upload/c_thumb,dpr_2.0,e_grayscale,f_auto,h_85,q_auto,w_85/e_sharpen:100/v1/uploads-production/8o9psa73tat5mxz2pr5bp51qrrwt">

            <blockquote class="longquote">
                <span class="longquote__zigzag"></span>
                <p>Es war ein super Workshop dank eurer kompetenten und flexiblen Moderation! Besonders gut hat mir
                    gefallen,
                    wie wir ganz konkret am Beispiel unserer Produktteams die (technischen und organisatorischen)
                    Veränderungen
                    durch (die Einführung von) Data Mesh durchgespielt haben.</p>
                <div class="longquote__avatar avatar avatar--sm"><img class="avatar__image" src="https://res.cloudinary.com/innoq/image/upload/c_thumb,dpr_2.0,e_grayscale,f_auto,h_85,q_auto,w_85/e_sharpen:100/v1/uploads-production/8o9psa73tat5mxz2pr5bp51qrrwt" alt=""></div>
                <cite class="longquote__author" itemprop="name">Jan Schwake</cite><span class="longquote__role" itemprop="jobTitle">Senior Product Owner Data &amp; Analytics, Interhyp Gruppe</span>
            </blockquote>

        </long-quote>

        <h3><a id="wieläuftdertagab" href="#wiel%C3%A4uftdertagab">Wie läuft der Tag ab?</a></h3>

        <ul>
            <li>
                <strong>10:00</strong> Vorstellung und Erwartungen (30min)
            </li>
            <li>
                <strong>10:30</strong> Was ist Data Mesh wirklich? (90min)
            </li>
            <li>
                <strong>12:00</strong> Mittagspause (60 min)
            </li>
            <li>
                <strong>13:00</strong> Ist Data Mesh sinnvoll für uns? Sind wir bereit? (90min)
            </li>
            <li>
                <strong>14:30</strong> Kaffeepause (30min)
            </li>
            <li>
                <strong>15:00</strong> Wie führe ich Data Mesh ein? (90min)
            </li>
            <li>
                <strong>16:30</strong> Offene Fragen und Feedback (30min)
            </li>
        </ul>
        <p>Die Agenda kann individuell angepasst werden.</p>

        <div>
            <div class="cta-section-long" itemscope itemtype="http://schema.org/Person">
                <a rel="author" class="cta-section-long__head" itemprop="url" href="#">
                    <div class="cta-section-long__image avatar avatar--xl">
                        <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                    </div>
                    <div>
                        <span rel="author" class="cta-section-long__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="cta-section-long__info" itemprop="jobTitle">Senior Consultant</span>
                    </div>
                </a>
                <div class="cta-section-long-body">
                    <p class="lead">Unser Principal Heribert Innoq steht Ihnen bei Fragen mit Rat und Tat zur Seite. Er freut
                        sich, wenn
                        sie sich bei ihm melden...
                    </p>
                    <h3 class="cta-section-long__headline">Termin bei Heribert buchen</h3>
                    <button class="btn btn--cta btn--cta--inverted btn--small" data-label="Termin vereinbaren">Termin
                        vereinbarewn</button>
                    <h3 class="cta-section-long__headline m-t-lg">Kontakt aufnehmen</h3>
                    <form class="form" novalidate="novalidate" accept-charset="UTF-8" method="post" style="width: 100%;">
                        <div class="form-group">
                            <label class="form-label" for="contact_message_company">Firma</label>
                            <input required="required" class="form-control" type="text" name="contact_message[name]" id="contact_message_company">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="contact_message_name">Name</label>
                            <input required="required" class="form-control" type="text" name="contact_message[name]" id="contact_message_name">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="contact_message_email">E-Mail</label>
                            <input required="required" class="form-control" type="email" name="contact_message[email]" id="contact_message_email">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="contact_message_content">Bemerkungen</label>
                            <textarea required="required" class="form-control" rows="5" name="contact_message[content]" id="contact_message_content" placeholder="Nennen Sie uns gerne Ihre Anforderungen, wie etwa Anzahl der Teilnehmer:innen, Ausrichtungsort und Terminwünsche."></textarea>
                        </div>
                        <button name="button" type="submit" class="btn btn--cta btn--cta--inverted btn--small" data-label="Abschicken">Abschicken</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <section class="stripe stripe--gray">
        <div class="container-md container-vertical-spacing-xl">
            <h2 class="teaser-section-heading">Ressourcen und Links</h2>
            <ul class="bold-list">
                <li>
                    <a href="#">Link 1</a>
                </li>
                <li>
                    <a href="#">Link 2</a>
                </li>
                <li>
                    <a href="#">Link 3</a>
                </li>
                <li>
                    <a href="#">Link 4</a>
                </li>
            </ul>
        </div>
    </section>

    <section class="container-xl container-vertical-spacing-xl">
        <h2 class="teaser-section-heading">INNOQ Primer</h2>
        <ul class="resource-list">
            <li class="resource-list-item">
                <img class="resource-list-item__image" itemprop="photo" src="../../assets/example-content/blockchain-primer.jpg" alt="Ein Primer" />
                <div class=" resource-list-item-wrapper">
                    <div class="resource-list-item__body">
                        <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                        <div class="resource-list-item__caption">
                            <p>
                                Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a href="#">Textlink</a>
                            </p>
                        </div>
                        <ul class="resource-list-item__author">
                            <li><a href="#">Autorin Eins</a></li>
                            <li><a href="#">Autor Zwei</a></li>
                            <li><a href="#">Doktor Drei</a></li>
                        </ul>
                    </div>
                    <div class="resource-list-item__footer">
                        <a href="#" class="link-teaser">Download PDF</a>
                        <a href="#" class="link-teaser">Download ebook</a>
                    </div>
                </div>
            </li>
            <li class="resource-list-item">
                <img class="resource-list-item__image" itemprop="photo" src="../../assets/example-content/blockchain-primer.jpg" alt="Ein Primer" />
                <div class=" resource-list-item-wrapper">
                    <div class="resource-list-item__body">
                        <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                        <div class="resource-list-item__caption">
                            <p>
                                Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a href="#">Textlink</a>
                            </p>
                        </div>
                        <ul class="resource-list-item__author">
                            <li><a href="#">Autorin Eins</a></li>
                            <li><a href="#">Autor Zwei</a></li>
                            <li><a href="#">Doktor Drei</a></li>
                        </ul>
                    </div>
                    <div class="resource-list-item__footer">
                        <a href="#" class="link-teaser">Download PDF</a>
                        <a href="#" class="link-teaser">Download ebook</a>
                    </div>
                </div>
            </li>
            <li class="resource-list-item">
                <img class="resource-list-item__image" itemprop="photo" src="../../assets/example-content/blockchain-primer.jpg" alt="Ein Primer" />
                <div class=" resource-list-item-wrapper">
                    <div class="resource-list-item__body">
                        <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                        <div class="resource-list-item__caption">
                            <p>
                                Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a href="#">Textlink</a>
                            </p>
                        </div>
                        <ul class="resource-list-item__author">
                            <li><a href="#">Autorin Eins</a></li>
                            <li><a href="#">Autor Zwei</a></li>
                            <li><a href="#">Doktor Drei</a></li>
                        </ul>
                    </div>
                    <div class="resource-list-item__footer">
                        <a href="#" class="link-teaser">Download PDF</a>
                        <a href="#" class="link-teaser">Download ebook</a>
                    </div>
                </div>
            </li>
            <li class="resource-list-item">
                <img class="resource-list-item__image" itemprop="photo" src="../../assets/example-content/blockchain-primer.jpg" alt="Ein Primer" />
                <div class=" resource-list-item-wrapper">
                    <div class="resource-list-item__body">
                        <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                        <div class="resource-list-item__caption">
                            <p>
                                Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a href="#">Textlink</a>
                            </p>
                        </div>
                        <ul class="resource-list-item__author">
                            <li><a href="#">Autorin Eins</a></li>
                            <li><a href="#">Autor Zwei</a></li>
                            <li><a href="#">Doktor Drei</a></li>
                        </ul>
                    </div>
                    <div class="resource-list-item__footer">
                        <a href="#" class="link-teaser">Download PDF</a>
                        <a href="#" class="link-teaser">Download ebook</a>
                    </div>
                </div>
            </li>
            <li class="resource-list-item">
                <img class="resource-list-item__image" itemprop="photo" src="../../assets/example-content/blockchain-primer.jpg" alt="Ein Primer" />
                <div class=" resource-list-item-wrapper">
                    <div class="resource-list-item__body">
                        <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                        <div class="resource-list-item__caption">
                            <p>
                                Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a href="#">Textlink</a>
                            </p>
                        </div>
                        <ul class="resource-list-item__author">
                            <li><a href="#">Autorin Eins</a></li>
                            <li><a href="#">Autor Zwei</a></li>
                            <li><a href="#">Doktor Drei</a></li>
                        </ul>
                    </div>
                    <div class="resource-list-item__footer">
                        <a href="#" class="link-teaser">Download PDF</a>
                        <a href="#" class="link-teaser">Download ebook</a>
                    </div>
                </div>
            </li>
        </ul>
    </section>

`
`

    <header class="topic-header bg-image-edition-04">
        <div class="topic-header__body">
            <h3 class="topic-header__type">Schwerpunktthema <span class="topic-header__tag">Microservices</span></h3>
            <div>
                <h2 class="topic-header__title bg-image-edition-04">Downloadbereich</h2>
            </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>
            <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
        </div>
    </header>

    <section class="container-md container-vertical-spacing-xl">
        <div class="download-section-feature">
            <img class="download-section-feature__image" itemprop="photo" src="{{ path '/assets/example-content/beispiel-talk.jpg'}}" alt="Eine Vortragsfolie" />
            <h3 class="download-section-feature__title">Titel des Talks</h3>
            <p class="download-section-feature__caption">Dies ist eine lustige Beschreibung des Talks</p>
            <a href="#" class="btn btn--small btn--cta download-section-feature__link" data-label="Download">Download</a>
        </div>
        <p>Data Mesh ist aktuell ein Hypethema, das wir mit <a
                href="https://www.datamesh-architecture.com/">www.datamesh-architecture.com</a> aus unserer Perspektive
            aufbereitet haben.</p>

        <p>Data Mesh ist ein sozio-technischer dezentraler Ansatz, der es Domänen-Teams ermöglicht, bereichsübergreifende
            Datenanalysen eigenständig durchzuführen. Es führt die Ideen aus Domain-driven Design, Product Thinking,
            Self-contained Systems und Team Topologies fort, und erweitert diese auf analytische Daten. Entwicklungsteams
            können
            damit selbstständig datengetrieben arbeiten und bessere Entscheidungen treffen. Sie bekommen aber auch mehr
            Verantwortung, da zusätzlich zu den Anwendungen und APIs nun auch Datenprodukte betrieben werden müssen. Diese
            Datenprodukte ermöglichen stabile domänenübergreifende Analysen und Reports.</p>

        <p>Für Unternehmen, die ihre Software-Entwicklung nach Domain-driven Design und mit Microservices bzw.
            Self-contained
            Systems ausrichten, könnte Data Mesh eine passende Datenstrategie sein.</p>

        <figure>
            <img src="https://www.datamesh-architecture.com/images/datamesharchitecture.png.webp" alt="" loading="lazy">

        </figure>

        <p>Wir bieten einen 1-Tages-Workshop an, der für dein Unternehmen die zentralen Fragen klärt:</p>

        <check-list>

            <ul class="checklist">
                <li>Was ist Data Mesh wirklich?</li>
                <li>Ist Data Mesh sinnvoll für uns? Sind wir bereit?</li>
                <li>Wie führe ich Data Mesh ein?</li>
            </ul>

        </check-list>

        <p>Die Einführung von Data Mesh ist eine strategische Entscheidung und mit einer Reihe von organisatorischen und
            technischen Voraussetzungen und Konsequenzen sowie entsprechender Chancen verbunden, die im Workshop behandelt
            werden.</p>

        <p>Der Workshop richtet sich an Entscheider:innen und sollte optimalerweise aus 5 bis 8 Teilnehmer:innen aus
            folgenden
            Bereichen bestehen:</p>

        <ul>
            <li>Head of Data</li>
            <li>Head of Software-Engineering</li>
            <li>Head of Product</li>
            <li>Head of Operations/Cloud</li>
            <li>Software Architect</li>
            <li>ggf. CIO/CTO</li>
        </ul>

        <p>Der Workshop wird von zwei erfahrenen INNOQ Berater:innen durchgeführt.</p>

        <long-quote person="Jan Schwake" role="Senior Product Owner Data &amp; Analytics, Interhyp Gruppe"
            avatar="https://res.cloudinary.com/innoq/image/upload/c_thumb,dpr_2.0,e_grayscale,f_auto,h_85,q_auto,w_85/e_sharpen:100/v1/uploads-production/8o9psa73tat5mxz2pr5bp51qrrwt">

            <blockquote class="longquote">
                <span class="longquote__zigzag"></span>
                <p>Es war ein super Workshop dank eurer kompetenten und flexiblen Moderation! Besonders gut hat mir
                    gefallen,
                    wie wir ganz konkret am Beispiel unserer Produktteams die (technischen und organisatorischen)
                    Veränderungen
                    durch (die Einführung von) Data Mesh durchgespielt haben.</p>
                <div class="longquote__avatar avatar avatar--sm"><img class="avatar__image"
                        src="https://res.cloudinary.com/innoq/image/upload/c_thumb,dpr_2.0,e_grayscale,f_auto,h_85,q_auto,w_85/e_sharpen:100/v1/uploads-production/8o9psa73tat5mxz2pr5bp51qrrwt"
                        alt=""></div>
                <cite class="longquote__author" itemprop="name">Jan Schwake</cite><span class="longquote__role"
                    itemprop="jobTitle">Senior Product Owner Data &amp; Analytics, Interhyp Gruppe</span>
            </blockquote>

        </long-quote>

        <h3><a id="wieläuftdertagab" href="#wiel%C3%A4uftdertagab">Wie läuft der Tag ab?</a></h3>

        <ul>
            <li>
                <strong>10:00</strong> Vorstellung und Erwartungen (30min)
            </li>
            <li>
                <strong>10:30</strong> Was ist Data Mesh wirklich? (90min)
            </li>
            <li>
                <strong>12:00</strong> Mittagspause (60 min)
            </li>
            <li>
                <strong>13:00</strong> Ist Data Mesh sinnvoll für uns? Sind wir bereit? (90min)
            </li>
            <li>
                <strong>14:30</strong> Kaffeepause (30min)
            </li>
            <li>
                <strong>15:00</strong> Wie führe ich Data Mesh ein? (90min)
            </li>
            <li>
                <strong>16:30</strong> Offene Fragen und Feedback (30min)
            </li>
        </ul>
        <p>Die Agenda kann individuell angepasst werden.</p>

        <div>
            <div class="cta-section-long" itemscope itemtype="http://schema.org/Person">
                <a rel="author" class="cta-section-long__head" itemprop="url" href="#">
                    <div class="cta-section-long__image avatar avatar--xl">
                        <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"
                            alt="Portrait von Heribert Innoq" />
                    </div>
                    <div>
                        <span rel="author" class="cta-section-long__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="cta-section-long__info" itemprop="jobTitle">Senior Consultant</span>
                    </div>
                </a>
                <div class="cta-section-long-body">
                    <p class="lead">Unser Principal Heribert Innoq steht Ihnen bei Fragen mit Rat und Tat zur Seite. Er freut
                        sich, wenn
                        sie sich bei ihm melden...
                    </p>
                    <h3 class="cta-section-long__headline">Termin bei Heribert buchen</h3>
                    <button class="btn btn--cta btn--cta--inverted btn--small" data-label="Termin vereinbaren">Termin
                        vereinbarewn</button>
                    <h3 class="cta-section-long__headline m-t-lg">Kontakt aufnehmen</h3>
                    <form class="form" novalidate="novalidate" accept-charset="UTF-8" method="post" style="width: 100%;">
                        <div class="form-group">
                            <label class="form-label" for="contact_message_company">Firma</label>
                            <input required="required" class="form-control" type="text" name="contact_message[name]"
                                id="contact_message_company">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="contact_message_name">Name</label>
                            <input required="required" class="form-control" type="text" name="contact_message[name]"
                                id="contact_message_name">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="contact_message_email">E-Mail</label>
                            <input required="required" class="form-control" type="email" name="contact_message[email]"
                                id="contact_message_email">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="contact_message_content">Bemerkungen</label>
                            <textarea required="required" class="form-control" rows="5" name="contact_message[content]"
                                id="contact_message_content"
                                placeholder="Nennen Sie uns gerne Ihre Anforderungen, wie etwa Anzahl der Teilnehmer:innen, Ausrichtungsort und Terminwünsche."></textarea>
                        </div>
                        <button name="button" type="submit" class="btn btn--cta btn--cta--inverted btn--small"
                            data-label="Abschicken">Abschicken</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <section class="stripe stripe--gray">
        <div class="container-md container-vertical-spacing-xl">
            <h2 class="teaser-section-heading">Ressourcen und Links</h2>
            <ul class="bold-list">
                <li>
                    <a href="#">Link 1</a>
                </li>
                <li>
                    <a href="#">Link 2</a>
                </li>
                <li>
                    <a href="#">Link 3</a>
                </li>
                <li>
                    <a href="#">Link 4</a>
                </li>
            </ul>
        </div>
    </section>

    <section class="container-xl container-vertical-spacing-xl">
        <h2 class="teaser-section-heading">INNOQ Primer</h2>
        <ul class="resource-list">
            <li class="resource-list-item">
                <img class="resource-list-item__image" itemprop="photo"
                    src="{{ path '/assets/example-content/blockchain-primer.jpg'}}" alt="Ein Primer" />
                <div class=" resource-list-item-wrapper">
                    <div class="resource-list-item__body">
                        <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                        <div class="resource-list-item__caption">
                            <p>
                                Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a
                                    href="#">Textlink</a>
                            </p>
                        </div>
                        <ul class="resource-list-item__author">
                            <li><a href="#">Autorin Eins</a></li>
                            <li><a href="#">Autor Zwei</a></li>
                            <li><a href="#">Doktor Drei</a></li>
                        </ul>
                    </div>
                    <div class="resource-list-item__footer">
                        <a href="#" class="link-teaser">Download PDF</a>
                        <a href="#" class="link-teaser">Download ebook</a>
                    </div>
                </div>
            </li>
            <li class="resource-list-item">
                <img class="resource-list-item__image" itemprop="photo"
                    src="{{ path '/assets/example-content/blockchain-primer.jpg'}}" alt="Ein Primer" />
                <div class=" resource-list-item-wrapper">
                    <div class="resource-list-item__body">
                        <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                        <div class="resource-list-item__caption">
                            <p>
                                Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a
                                    href="#">Textlink</a>
                            </p>
                        </div>
                        <ul class="resource-list-item__author">
                            <li><a href="#">Autorin Eins</a></li>
                            <li><a href="#">Autor Zwei</a></li>
                            <li><a href="#">Doktor Drei</a></li>
                        </ul>
                    </div>
                    <div class="resource-list-item__footer">
                        <a href="#" class="link-teaser">Download PDF</a>
                        <a href="#" class="link-teaser">Download ebook</a>
                    </div>
                </div>
            </li>
            <li class="resource-list-item">
                <img class="resource-list-item__image" itemprop="photo"
                    src="{{ path '/assets/example-content/blockchain-primer.jpg'}}" alt="Ein Primer" />
                <div class=" resource-list-item-wrapper">
                    <div class="resource-list-item__body">
                        <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                        <div class="resource-list-item__caption">
                            <p>
                                Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a
                                    href="#">Textlink</a>
                            </p>
                        </div>
                        <ul class="resource-list-item__author">
                            <li><a href="#">Autorin Eins</a></li>
                            <li><a href="#">Autor Zwei</a></li>
                            <li><a href="#">Doktor Drei</a></li>
                        </ul>
                    </div>
                    <div class="resource-list-item__footer">
                        <a href="#" class="link-teaser">Download PDF</a>
                        <a href="#" class="link-teaser">Download ebook</a>
                    </div>
                </div>
            </li>
            <li class="resource-list-item">
                <img class="resource-list-item__image" itemprop="photo"
                    src="{{ path '/assets/example-content/blockchain-primer.jpg'}}" alt="Ein Primer" />
                <div class=" resource-list-item-wrapper">
                    <div class="resource-list-item__body">
                        <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                        <div class="resource-list-item__caption">
                            <p>
                                Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a
                                    href="#">Textlink</a>
                            </p>
                        </div>
                        <ul class="resource-list-item__author">
                            <li><a href="#">Autorin Eins</a></li>
                            <li><a href="#">Autor Zwei</a></li>
                            <li><a href="#">Doktor Drei</a></li>
                        </ul>
                    </div>
                    <div class="resource-list-item__footer">
                        <a href="#" class="link-teaser">Download PDF</a>
                        <a href="#" class="link-teaser">Download ebook</a>
                    </div>
                </div>
            </li>
            <li class="resource-list-item">
                <img class="resource-list-item__image" itemprop="photo"
                    src="{{ path '/assets/example-content/blockchain-primer.jpg'}}" alt="Ein Primer" />
                <div class=" resource-list-item-wrapper">
                    <div class="resource-list-item__body">
                        <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                        <div class="resource-list-item__caption">
                            <p>
                                Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a
                                    href="#">Textlink</a>
                            </p>
                        </div>
                        <ul class="resource-list-item__author">
                            <li><a href="#">Autorin Eins</a></li>
                            <li><a href="#">Autor Zwei</a></li>
                            <li><a href="#">Doktor Drei</a></li>
                        </ul>
                    </div>
                    <div class="resource-list-item__footer">
                        <a href="#" class="link-teaser">Download PDF</a>
                        <a href="#" class="link-teaser">Download ebook</a>
                    </div>
                </div>
            </li>
        </ul>
    </section>

`
`

    /* No context defined. */

`
File:

- Content:
  `

  `
- URL: /components/raw/topic-page/_topic-page.scss
- Filesystem Path: components/01-pages/topic-page/_topic-page.scss
- Size: 0 Byte

- Handle: @topic-page
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/01-pages/topic-page/topic-page.html

No notes defined.