Article Page Default

<header class="standard-header" style="background-image: url(../../assets/bg-images/general/visual-trainings-01.webp); background-color: var(--overlay-standard-color);">
    <h3 class="standard-header__type">Content Type</h3>
    <h1 class="standard-header__title">Titel</h1>
    <h2 class="standard-header__subtitle">Subtitle</h2>
    <div class="standard-header__intro">
        <time class="standard-header__intro__label">
            01.01.2018
        </time>
        <div class="standard-header__intro__text">
            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
        <div class="content-separator content-seperator--inverted">
            <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
        </div>
    </div>
</header>

<main role="main">
    <article class="article-page-default">
        <section class="author-section">
            <a rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                <div class="author-bio__image avatar avatar--sm">
                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                </div>
                <address>
                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                </address>
            </a>
            <a rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                <div class="author-bio__image avatar avatar--sm">
                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                </div>
                <address>
                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                </address>
            </a>
            <a rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                <div class="author-bio__image avatar avatar--sm">
                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                </div>
                <address>
                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                </address>
            </a>
        </section>

        <aside class="toc">
            <h3 class="toc__heading">Inhalt</h3>
            <ol class="toc__list">
                <li><a class="toc__anchor" href="#">Ich bin ein kleines Listitem</a></li>
                <li><a class="toc__anchor" href="#">Ich bin ein kleines Listitem</a></li>
                <li><a class="toc__anchor" href="#">Ich bin ein kleines Listitem</a></li>
                <li><a class="toc__anchor" href="#">Ich bin ein kleines Listitem</a></li>
                <li><a class="toc__anchor" href="#">Ich bin ein kleines Listitem</a></li>
                <li><a class="toc__anchor" href="#">Ich bin ein kleines Listitem</a></li>
            </ol>
        </aside>

        <h3>Ich bin eine Headline</h3>

        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <pre><code>pick(:love) do |something|
    n.times do
        result &#x3D; play(something)
        result.publish
    end
end
</code></pre>

        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <blockquote class="pullquote">Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</blockquote>

        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <ul>
            <li>Ich bin ein kleines Listitem</li>
            <li>Ich bin ein kleines Listitem</li>
            <li>Ich bin ein kleines Listitem</li>
        </ul>

        <ol>
            <li>Ich bin ein kleines Listitem</li>
            <li>Ich bin ein kleines Listitem</li>
            <li>Ich bin ein kleines Listitem</li>
        </ol>

        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <ul class="checklist">
            <li>Ich bin ein kleines Listitem</li>
            <li>Ich bin ein kleines Listitem</li>
            <li>Ich bin ein kleines Listitem</li>
        </ul>

        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <figure>
            <img src="../../assets/bg-images/edition-02/edition02-canyon-01.webp" alt="Bild Groß" />
            <figcaption>
                Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
            </figcaption>
        </figure>

        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <blockquote class="superquote">
            <span class="superquote__zigzag"></span>
            <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
            <div itemscope itemtype="http://schema.org/Person">
                <cite class="superquote__author" itemprop="name">Heribert Innoq</cite>
                <span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
            </div>
        </blockquote>

        <long-quote>
            <blockquote class="longquote" itemscope itemtype="http://schema.org/Person">
                <span class="longquote__zigzag"></span>
                <p>
                    Mit INNOQ Schweiz haben wir einen innovativen Partner gefunden, der uns mit seiner kompetenten Beratung und
                    professionellen Umsetzung eine wichtige Stütze unseres Geschäfts ist. Die Mitarbeiter zeichnen sich durch
                    hohe
                    Flexibilität und Agilität aus. Gepaart mit fundiertem Fachwissen ist es ihnen möglich, auch in hektischen
                    Situationen
                    pragmatische und zielführende Lösungen zu finden.
                </p>
                <cite class="longquote__author" itemprop="name">Heribert Innoq</cite>
                <span class="longquote__role" itemprop="jobTitle">Senior Consultant</span>
            </blockquote>
        </long-quote>

        <long-quote>
            <blockquote class="longquote" itemscope itemtype="http://schema.org/Person">
                <span class="longquote__zigzag"></span>
                <p>
                    Mit INNOQ Schweiz haben wir einen innovativen Partner gefunden, der uns mit seiner kompetenten Beratung und
                    professionellen Umsetzung eine wichtige Stütze unseres Geschäfts ist. Die Mitarbeiter zeichnen sich durch
                    hohe Flexibilität und Agilität aus. Gepaart mit fundiertem Fachwissen ist es ihnen möglich, auch in
                    hektischen Situationen pragmatische und zielführende Lösungen zu finden.
                </p>
                <div class="longquote__avatar avatar avatar--sm">
                    <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                </div>
                <cite class="longquote__author" itemprop="name">Heribert Innoq</cite>
                <span class="longquote__role" itemprop="jobTitle">Senior Consultant</span>
            </blockquote>
        </long-quote>

        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <wall-of-consent>
            <template>
                <blockquote class="twitter-tweet" data-conversation="none" data-lang="en" data-dnt="true">
                    <p lang="en" dir="ltr">Doge spelled backwards is Egod</p>&mdash; Elon Musk (@elonmusk) <a href="https://twitter.com/elonmusk/status/1368058884837928970?ref_src=twsrc%5Etfw">March 6, 2021</a>
                </blockquote>
                <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
            </template>
            <p class="wall-of-consent__text" data-hide-if-consent>An dieser Stelle befindet sich ein Tweet. Um ihn zu sehen, musst Du dem Laden von Fremdinhalten zustimmen.</p>
            <div class="custom-form-control checkbox">
                <input id="custom-checkbox-1" type="checkbox" class="form-control__input" />
                <label for="custom-checkbox-1" class="form-label">Tweets erlauben (<a href="https://www.innoq.com/datenschutz/">Datenschutzhinweise</a>)</label>
            </div>
        </wall-of-consent>

        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <blockquote class="blockquote">
            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.<a href="http://www.arc42.de/template/struktur.html">Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</a> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
        </blockquote>

        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <info-box>
            <details>
                <summary class="infobox__teaser">
                    <div class="infobox__teaser__left">
                        <span class="infobox__teaser__heading">Ich bin eine Infobox</span>
                        <span class="icon icon-info"></span>
                    </div>
                    <div class="infobox__teaser__right">
                        <span class="icon icon-chevron-down icon--small"></span>
                    </div>
                </summary>
                <div class="infobox__content">
                    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
            </details>
        </info-box>

        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <div class="centered-content">
            <button class="btn btn--cta" data-label="Call To Action Button">Call To Action Button</button>
        </div>

        <div class="centered-content-75">
            <figure>
                <img src="../../assets/bg-images/edition-02/edition02-canyon-01.webp" alt="Bild Groß" />
                <figcaption>
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                </figcaption>
            </figure>
        </div>

        <p>Footnote Inline<a href="#fn:1" id="fnref:1" title="see footnote" class="footnote">[1]</a>.Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <figure>
            <table class="table">
                <thead>
                    <tr>
                        <th>Titel 1</th>
                        <th>Titel 2</th>
                        <th>Titel 3</th>
                        <th>Titel 4</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</td>
                        <td>Text</td>
                    </tr>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</td>
                        <td>Text</td>
                    </tr>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</td>
                        <td>Text</td>
                    </tr>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</td>
                        <td>Text</td>
                    </tr>
                </tbody>
            </table>
            <figcaption>
                Dies ist eine Tabelle mit wichtigem Inhalt
            </figcaption>
        </figure>
        <section class="footnote-section">
            <div class="footnote-section__headline__container">
                <h3 class="footnote-section__headline">Quellenangaben</h3>
            </div>

            <div class="footnotes">
                <ol class="footnotes__list">
                    <li id="fn:1">
                        <p>
                            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                            <a href="#fnref:1" title="return to article">&nbsp;↩</a>
                        </p>
                    </li>
                    <li id="fn:2">
                        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                            <a href="#fnref:2" title="return to article">&nbsp;↩</a>
                        </p>
                    </li>
                    <li id="fn:3">
                        <p>
                            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                            <a href="#fnref:3" title="return to article">&nbsp;↩</a>
                        </p>
                    </li>
                    <li id="fn:4">
                        <p><a href="#">Linktext</a> <a href="#fnref:1" title="return to body" class="reversefootnote">&nbsp;↩</a></p>
                    </li>
                </ol>
            </div>
        </section>
    </article>

    <section class="conclusion">
        <div class="conclusion-wrapper">
            <h2 class="conclusion-headline">Fazit</h2>
            <h3 class="conclusion-subheadline">Kurz auf den Punkt gebracht</h3>
            <div class="conclusion-text">
                <p>Bacon ipsum dolor amet andouille <a href="https://de.wikipedia.org/wiki/Ansatz">Ansatz</a> prosciutto alcatra tenderloin. <code>Code</code>Pork loin meatball short ribs ham chuck meatloaf sausage jerky, pastrami short loin. Ham hock kielbasa kevin boudin fatback sausage. Porchetta meatball ball tip, tri-tip alcatra venison tenderloin.</p>
                <ul>
                    <li>
                        Unordered List item
                    </li>
                    <li>
                        Unordered List item with nested unordered list
                        <ul>
                            <li>
                                Nested unordered list item
                            </li>
                            <li>
                                Nested unordered list item with a nested unordered list
                                <ul>
                                    <li>
                                        Another Nested unordered list item
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <p>industrial grade voodoo god papier-mache tanto free-market tower futurity jeans nodality singularity alcohol industrial
                            grade tank-traps engine vehicle tattoo. nano- claymore mine fluidity BASE jump boat otaku uplink tower sentient pistol
                            cartel advert vehicle bridge voodoo god Legba. realism film artisanal neural tower plastic ablative claymore mine media
                            garage pre- math- man neon decay media.</p>
                    </li>
                </ul>
            </div>
            <a class="btn btn--large btn--inverted" data-label="Sprechen Sie mit uns" href="#">Sprechen Sie mit uns</a>
        </div>
    </section>

    <section class="stripe stripe--gray">
        <div class="tag-section">
            <h3 class="tag-section__headline">TAGS</h3>
            <ul class="tag-list">
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 1</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 2</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 3</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 4</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 5</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 6</a></li>
            </ul>
        </div>
    </section>

    <div class="container-md container-vertical-spacing-lg">
        <section class="tile-grid-sm">
            <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 icon--small icon-twitter icon--brand-secondary"></span>
                    </a>
                    <a rel="author" class="author-bio__social-profile" href="#" title="GitHub">
                        <span class="icon icon--small icon-github icon--brand-secondary"></span>
                    </a>
                </address>
                <div class="author-bio__text">
                    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
            </div>

            <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 icon--small icon-twitter icon--brand-secondary"></span>
                    </a>
                    <a rel="author" class="author-bio__social-profile" href="#" title="GitHub">
                        <span class="icon icon--small icon-github icon--brand-secondary"></span>
                    </a>
                </address>
                <div class="author-bio__text">
                    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </section>

        <section class="reference">
            <a href="#" class="reference__link">
                <img class="reference__image" src="../../assets/example-content/heribert.jpg" alt="Heribert INNOQ" />
            </a>
            <p class="reference__description">
                Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
        </section>
    </div>

    <div class="stripe stripe--gray">
        <div class="container-md container-vertical-spacing-lg">
            <h2 class="teaser-section-heading">Empfohlen</h2>
            <div class="one-column-grid">
                <a href="#" class="list-teaser">
                    <div class="list-teaser__body">
                        <div class="list-teaser__caption">Artikel</div>
                        <h2 class="list-teaser__headline">Artikel Headline</h2>
                        <h3 class="list-teaser__subheadline">
                            Artikel Subheadline
                            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                        </h3>
                    </div>
                    <div class="list-teaser__footer">
                        <div rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--sm">
                                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                            </div>
                            <address>
                                <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="list-teaser">
                    <div class="list-teaser__body">
                        <div class="list-teaser__caption">Artikel</div>
                        <h2 class="list-teaser__headline">Artikel Headline</h2>
                        <h3 class="list-teaser__subheadline">
                            Artikel Subheadline
                            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                        </h3>
                    </div>
                    <div class="list-teaser__footer">
                        <div rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--sm">
                                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                            </div>
                            <address>
                                <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 rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--sm">
                                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                            </div>
                            <address>
                                <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 rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--sm">
                                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                            </div>
                            <address>
                                <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="list-teaser-abstract primary">
                    <div class="list-teaser__body">
                        <div class="list-teaser-abstract__caption">Artikel</div>
                        <h2 class="list-teaser-abstract__headline">Artikel Headline</h2>
                        <p class="list-teaser-abstract__text">
                            Lorem gibson dermatrodes boy nodality neural office sprawl futurity Lado-Acheson count zero interrupt Night
                            City tanto papier-mache kanji corporation meta-lights neurosurgery.
                            Lorem gibson Chiba neon neon motion Mycotoxin Metro Holografix boat RAM AI disposable lights saturation
                            point stimulate boat systemic vehicle.
                            <span class="icon icon-arrow-long-right icon--brand-white"></span>
                        </p>
                    </div>
                    <div class="list-teaser__footer">
                        <div rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--sm">
                                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                            </div>
                            <address>
                                <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>
            <h2 class="teaser-section-heading">Upcoming</h2>
            <div class="one-column-grid">
                <a href="#" class="list-teaser-event">
                    <div class="event-date-section">
                        <div class="label talk">Vortrag</div>
                        <time class="event-date" datetime="2017-06-23">
                            <span class="event-day-month">
                                <span class='event-day'>23</span>
                                <span class='event-month'>Jun</span>
                            </span>
                            <span class='event-year'>2017</span>
                        </time>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label talk">Vortrag</div>
                            <div class="label slides">Folien verfügbar</div>
                            <h2 class="list-teaser-event__headline">Vortrag Titel</h2>
                            <h3 class="list-teaser-event__subheadline">
                                Vortragsort / 10-12 Uhr
                                <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser__footer">
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--sm">
                                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                                </div>
                                <address>
                                    <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>
                    </div>
                </a>

                <a href="#" class="list-teaser-event">
                    <div class="event-date-section">
                        <div class="label talk">Training</div>
                        <div class="event-date-wrapper">
                            <time class="event-date" datetime="2017-06-23">
                                <span class="event-day-month">
                                    <span class='event-day'>23</span>
                                    <span class='event-month'>Jun</span>
                                </span>
                            </time>
                            <hr class="event-date-separator" />
                            <time class="event-date" datetime="2017-06-24">
                                <span class="event-day-month">
                                    <span class='event-day'>24</span>
                                    <span class='event-month'>Jun</span>
                                </span>
                                <span class='event-year'>2017</span>
                            </time>
                        </div>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label training">Training</div>
                            <h2 class="list-teaser-event__headline">Training Titel</h2>
                            <h3 class="list-teaser-event__subheadline">
                                Trainingsort
                                <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser-event__footer">
                            <div class="link-teaser">Mehr erfahren</div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</main>