# Article Page Default

Ready

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

`

    <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>

`
`

    <header class="standard-header" style="background-image: url({{ path '/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">
                {{text}}
            </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="{{ path '/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="{{ path '/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="{{ path '/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="#">{{listitem}}</a></li>
                    <li><a class="toc__anchor" href="#">{{listitem}}</a></li>
                    <li><a class="toc__anchor" href="#">{{listitem}}</a></li>
                    <li><a class="toc__anchor" href="#">{{listitem}}</a></li>
                    <li><a class="toc__anchor" href="#">{{listitem}}</a></li>
                    <li><a class="toc__anchor" href="#">{{listitem}}</a></li>
                </ol>
            </aside>

            <h3>{{headline}}</h3>

            <p>{{text}}</p>

            <pre><code>{{ code }}</code></pre>

            <p>{{text}}</p>

            <blockquote class="pullquote">{{quote}}</blockquote>

            <p>{{text}}</p>

            <ul>
                <li>{{listitem}}</li>
                <li>{{listitem}}</li>
                <li>{{listitem}}</li>
            </ul>

            <ol>
                <li>{{listitem}}</li>
                <li>{{listitem}}</li>
                <li>{{listitem}}</li>
            </ol>

            <p>{{text}}</p>

            <ul class="checklist">
                <li>{{listitem}}</li>
                <li>{{listitem}}</li>
                <li>{{listitem}}</li>
            </ul>

            <p>{{text}}</p>

            <figure>
                <img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}" alt="Bild Groß" />
                <figcaption>
                    {{quote}}
                </figcaption>
            </figure>

            <p>{{text}}</p>

            <blockquote class="superquote">
                <span class="superquote__zigzag"></span>
                <p>{{quote}}</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="{{ path '/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>{{text}}</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>{{text}}</p>

            <blockquote class="blockquote">
                {{quote}}<a href="http://www.arc42.de/template/struktur.html">{{quote}}</a> {{quote}}
            </blockquote>

            <p>{{text}}</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>{{text}}</p>
                        <p>{{text}}</p>
                    </div>
                </details>
            </info-box>

            <p>{{text}}</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="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}" alt="Bild Groß" />
                    <figcaption>
                        {{quote}}
                    </figcaption>
                </figure>
            </div>

            <p>Footnote Inline<a href="#fn:1" id="fnref:1" title="see footnote" class="footnote">[1]</a>.{{text}}</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>{{text_short}}</td>
                            <td>Text</td>
                        </tr>
                        <tr>
                            <td>Text</td>
                            <td>Text</td>
                            <td>{{text_short}}</td>
                            <td>Text</td>
                        </tr>
                        <tr>
                            <td>Text</td>
                            <td>Text</td>
                            <td>{{text_short}}</td>
                            <td>Text</td>
                        </tr>
                        <tr>
                            <td>Text</td>
                            <td>Text</td>
                            <td>{{text_short}}</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>
                                {{text}}
                                <a href="#fnref:1" title="return to article" >&nbsp;↩</a>
                            </p>
                        </li>
                        <li id="fn:2">
                            <p>{{text}}</p>
                            <p>{{text}}
                                <a href="#fnref:2" title="return to article" >&nbsp;↩</a>
                            </p>
                        </li>
                        <li id="fn:3">
                            <p>
                                {{text}}
                                <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="{{ path '/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>{{text}}</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="{{ path '/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>{{text}}</p>
                    </div>
                </div>
            </section>

            <section class="reference">
                <a href="#" class="reference__link">
                    <img class="reference__image" src="{{ path '/assets/example-content/heribert.jpg' }}" alt="Heribert INNOQ" />
                </a>
                <p class="reference__description">
                    {{text}}
                </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="{{ path '/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="{{ path '/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="{{ path '/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="{{ path '/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="{{ path '/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="{{ path '/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>

`
`

    {
      "code": "pick(:love) do |something|\n    n.times do\n        result = play(something)\n        result.publish\n    end\nend\n",
      "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.",
      "text_short": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
      "headline": "Ich bin eine Headline",
      "listitem": "Ich bin ein kleines Listitem",
      "quote": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
    }

`
File:

- Content:
  `

      .article-page-default {
        @extend %article-layout;

        > * {
          margin-top: $spacer-md;
        }
      }

  `
- URL: /components/raw/article-page-default/_article-page-default.scss
- Filesystem Path: components/01-pages/article-page-default/_article-page-default.scss
- Size: 94 Bytes

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

No notes defined.