51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Listicle Article

100% 
<article role="article" class="t-article t-article--listicle" itemtype="http://schema.org/Article" itemscope="itemscope">
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell large-10 large-offset-2">
                <div class="grid-x grid-margin-x">
                    <div class="cell large-9">
                        <header class="c-headline">
                            <div class="c-headline__kicker">
                                <span class="c-headline__kicker-item">
            Hildesheim
            </span>
                                <span class="c-headline__kicker-item">
            Sport
            </span>
                            </div>
                            <div class="c-headline__title">
                                <h1 itemprop="headline">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
                            </div>
                        </header>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci atque aut culpa debitis dolorem dolores doloribus.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid-x grid-margin-x">
            <div class="cell large-2 small-order-2 large-order-1">
                <aside class="grid-x grid-margin-x">
                    <div class="cell small-12 medium-6 large-12">
                        <div class="c-meta">
                            <ul cLass="c-meta__list">
                                <li class="c-meta__item"><strong>Hildesheim</strong></li>
                                <li class="c-meta__item"><strong>von Johanna Elster</strong></li>
                                <li class="c-meta__item"><time title="Veröffentlicht am" itemprop="datePublished" datetime="28.04.2019">28.04.2019</time></li>
                                <li class="c-meta__item">Aktualisiert <span class="js-last-updated" data-tstamp="1566213446">
    19.08.2019 - 13:17 Uhr
</span>
                                </li>
                                <li class="c-meta__item"><span title="Lesezeit"><i class="fa fa-book-open"></i> 10 Min.</span></li>
                                <li class="c-meta__item"> 9.523 Aufrufe</li>
                            </ul>
                        </div>
                    </div>
                    <div class="cell small-9 medium-3 large-12">
                        <div class="c-social-menu c-social-menu">
                            <ul class="c-social-menu__list">
                                <li class="c-social-menu__item">
                                    <a class="c-social-menu__link c-social-menu__link--facebook" href="#"></a>
                                </li>
                                <li class="c-social-menu__item">
                                    <a class="c-social-menu__link c-social-menu__link--whatsapp" href="#"></a>
                                </li>
                                <li class="c-social-menu__item">
                                    <a class="c-social-menu__link c-social-menu__link--mail" href="#"></a>
                                </li>
                                <li class="c-social-menu__item">
                                    <a class="c-social-menu__link c-social-menu__link--twitter" href="#"></a>
                                </li>
                                <li class="c-social-menu__item">
                                    <a class="c-social-menu__link c-social-menu__link--instagram" href="#"></a>
                                </li>
                                <li class="c-social-menu__item">
                                    <a class="c-social-menu__link c-social-menu__link--youtube" href="#"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="cell small-3 medium-3 large-12">
                        <button class="c-bookmark" title="Artikel merken">
    <i class="far fa-bookmark c-bookmark__icon"></i>
    <span class="c-bookmark__label">Artikel merken</span></button>
                    </div>
                </aside>
            </div>
            <div class="cell large-10 small-order-1 large-order-2">
                <figure class="c-media has-caption">
                    <div class="c-media__content">
                        <picture class="c-media__picture">
                            <img class="c-media__image" src="../../../assets/img/landscape.jpg" alt="altText" title="Nulla vitae elit libero, a pharetra augue. Cras Etiam Commodo Lorem Ridiculus">
                        </picture>
                    </div>
                    <figcaption class="c-media__caption">
                        <span class="c-media__title">Nulla vitae elit libero, a pharetra augue. Cras Etiam Commodo Lorem Ridiculus</span>
                        <span class="c-media__credit">Foto: Max Mustermann</span>
                    </figcaption>
                </figure>
            </div>
        </div>
        <div class="grid-x grid-margin-x">
            <div class="cell large-5 large-offset-2 small-order-2 large-order-1">
                <section itemprop="articleBody" class="t-article-body t-article-body--listicle">
                    <h3>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                    <h3>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                    <h3>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                    <h3>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                    <h3>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </section>
            </div>
            <div class="cell large-5 small-order-1 large-order-2">
                <div id="oms_gpt_standard" class="c-ad js-ad-stroeer c-ad--rectangle"></div>

            </div>
        </div>
    </div>
</article>
 
<article role="article" class="t-article t-article--listicle" itemtype="http://schema.org/Article"
         itemscope="itemscope">
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell large-10 large-offset-2">
                <div class="grid-x grid-margin-x">
                    <div class="cell large-9">
                        {% render '@headline' %}
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci atque aut
                            culpa debitis dolorem dolores doloribus.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid-x grid-margin-x">
            <div class="cell large-2 small-order-2 large-order-1">
                <aside class="grid-x grid-margin-x">
                    <div class="cell small-12 medium-6 large-12">
                        {% render '@meta' %}
                    </div>
                    <div class="cell small-9 medium-3 large-12">
                        {% render '@social-menu' with {skype: false, linkedin: false} %}
                    </div>
                    <div class="cell small-3 medium-3 large-12">
                        {% render '@bookmark' %}
                    </div>
                </aside>
            </div>
            <div class="cell large-10 small-order-1 large-order-2">
                {% render '@media' %}
            </div>
        </div>
        <div class="grid-x grid-margin-x">
            <div class="cell large-5 large-offset-2 small-order-2 large-order-1">
                <section itemprop="articleBody" class="t-article-body t-article-body--listicle">
                    {% render '@heading--h3' %}
                    {% render '@paragraph' %}
                    {% render '@heading--h3' %}
                    {% render '@paragraph' %}
                    {% render '@heading--h3' %}
                    {% render '@paragraph' %}
                    {% render '@heading--h3' %}
                    {% render '@paragraph' %}
                    {% render '@heading--h3' %}
                    {% render '@paragraph' %}
                </section>
            </div>
            <div class="cell large-5 small-order-1 large-order-2">
                {% render '@ad--rectangle' %}
            </div>
        </div>
    </div>
</article>
 
/* No context defined for this component. */

There are no notes for this item.