<header class="standard-header" style="background-image: url(../../assets/bg-images/general/visual-trainings-01.jpg); 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--small">
                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                </div>
                <address class="author-bio__text">
                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                </address>
            </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--small">
                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                </div>
                <address class="author-bio__text">
                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                </address>
            </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--small">
                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                </div>
                <address class="author-bio__text">
                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                </address>
            </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="http://via.placeholder.com/675x369" 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>

        <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="standalone" 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>

        <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="breakout conclusion">
        <div class="breakout__content">
            <h1 class="conclusion-headline">Fazit</h1>
            <h3 class="conclusion-subheadline">Ich bin eine Headline</h3>
            <p class="conclusion-text">
                Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <a href="https://de.wikipedia.org/wiki/Ansatz">Link</a> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
            </p>
            <p class="conclusion-text"><strong>Kurz:</strong> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
    </section>

    <section class="breakout tag-section">
        <h3 class="tag-section__headline">TAGS</h3>
        <div class="tag-section__container">
            <ul class="tag-list">
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag</a></li>
            </ul>
        </div>
    </section>

    <aside class="container-md">
        <section class="blocks">
            <div id="author-bio" class="author-bio author-bio--long" itemscope itemtype="http://schema.org/Person">
                <a rel="author" class="author-bio__head" itemprop="url" href="#">
                    <div class="author-bio__image avatar avatar--base">
                        <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                    </div>
                    <address class="author">
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </a>

                <address class="author-bio__social">
                    <a rel="author" class="author-bio__social-profile" href="#" title="Twitter">
                        <span class="icon 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="share-section">
            <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
            <h3 class="share-section__heading">Share on</h3>
            <ul class="share-section__list">
                <li>
                    <a class="share-section__link" target="_blank" href="">
                        <span class="icon icon-facebook icon--brand-secondary"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" target="_blank" href="">
                        <span class="icon icon-twitter icon--brand-secondary"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" href="">
                        <span class="icon icon-email icon--brand-secondary"></span>
                    </a>
                </li>
            </ul>
        </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>
    </aside>
</main>
<header class="standard-header" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-01.jpg' }}); 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--small">
                    <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
                </div>
                <address class="author-bio__text">
                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                </address>
            </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--small">
                    <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"
                        alt="Portrait von Heribert Innoq" />
                </div>
                <address class="author-bio__text">
                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                </address>
            </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--small">
                    <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"
                        alt="Portrait von Heribert Innoq" />
                </div>
                <address class="author-bio__text">
                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                </address>
            </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="http://via.placeholder.com/675x369" 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>

        <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="standalone" 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>

        <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="breakout conclusion">
        <div class="breakout__content">
            <h1 class="conclusion-headline">Fazit</h1>
            <h3 class="conclusion-subheadline">{{headline}}</h3>
            <p class="conclusion-text">
                {{text_short}} <a href="https://de.wikipedia.org/wiki/Ansatz">Link</a> {{text_short}}
            </p>
            <p class="conclusion-text"><strong>Kurz:</strong> {{text_short}}</p>
        </div>
    </section>

    <section class="breakout tag-section">
        <h3 class="tag-section__headline">TAGS</h3>
        <div class="tag-section__container">
            <ul class="tag-list">
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="#">Tag</a></li>
            </ul>
        </div>
    </section>

    <aside class="container-md">
        <section class="blocks">
            <div id="author-bio" class="author-bio author-bio--long" itemscope itemtype="http://schema.org/Person">
                <a rel="author" class ="author-bio__head" itemprop="url" href="#">
                    <div class="author-bio__image avatar avatar--base">
                        <img itemprop="photo" class="avatar__image" src="{{ 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="share-section">
            <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
            <h3 class="share-section__heading">Share on</h3>
            <ul class="share-section__list">
                <li>
                    <a class="share-section__link" target="_blank" href="">
                        <span class="icon icon-facebook icon--brand-secondary"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" target="_blank" href="">
                        <span class="icon icon-twitter icon--brand-secondary"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" href="">
                        <span class="icon icon-email icon--brand-secondary"></span>
                    </a>
                </li>
            </ul>
        </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>
    </aside>
</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."
}
  • Handle: @article-page-default
  • Preview:
  • Filesystem Path: components/01-pages/article-page-default/article-page-default.html

No notes defined.