Default Article

100%
<article role="article" class="t-article">
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell large-10 large-offset-2">
                <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 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">
                <a href="../../../assets/img/landscape.jpg" class="glightbox" data-gallery="default-article-gallery" data-glightbox="description: Nulla vitae elit libero, a pharetra augue. Cras Etiam Commodo Lorem Ridiculus">
                    <figure class="c-media has-caption">
                        <div class="c-media__content">
                            <span class="c-media__icon"></span>
                            <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>
                </a>
            </div>
        </div>
        <div class="grid-x grid-margin-x">
            <div class="cell large-5 large-offset-2 small-order-2 large-order-1">
                <section>
                    <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>
                    <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>
                    <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>
                    <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>
                    <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>
                    <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 class="grid-x grid-margin-x">
            <div class="cell large-2">
                <h3>Galerie</h3>
            </div>
            <div class="cell large-10">
                <div class="grid-x grid-margin-x grid-padding-y small-up-2 medium-up-3 large-up-4">
                    <div class="cell">
                        <a href="../../../assets/img/landscape.jpg" class="glightbox" data-gallery="default-article-gallery" data-glightbox="description: Nulla vitae elit libero, a pharetra augue. Cras Etiam Commodo Lorem Ridiculus">
                            <figure class="c-media">
                                <div class="c-media__content">
                                    <span class="c-media__icon"></span>
                                    <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>
                            </figure>
                        </a>
                    </div>
                    <div class="cell">
                        <a href="../../../assets/img/landscape.jpg" class="glightbox" data-gallery="default-article-gallery" data-glightbox="description: Nulla vitae elit libero, a pharetra augue. Cras Etiam Commodo Lorem Ridiculus">
                            <figure class="c-media">
                                <div class="c-media__content">
                                    <span class="c-media__icon"></span>
                                    <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>
                            </figure>
                        </a>
                    </div>
                    <div class="cell">
                        <a href="../../../assets/img/landscape.jpg" class="glightbox" data-gallery="default-article-gallery" data-glightbox="description: Nulla vitae elit libero, a pharetra augue. Cras Etiam Commodo Lorem Ridiculus">
                            <figure class="c-media">
                                <div class="c-media__content">
                                    <span class="c-media__icon"></span>
                                    <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>
                            </figure>
                        </a>
                    </div>
                    <div class="cell">
                        <a href="../../../assets/img/landscape.jpg" class="glightbox" data-gallery="default-article-gallery" data-glightbox="description: Nulla vitae elit libero, a pharetra augue. Cras Etiam Commodo Lorem Ridiculus">
                            <figure class="c-media">
                                <div class="c-media__content">
                                    <span class="c-media__icon"></span>
                                    <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>
                            </figure>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>
<article role="article" class="t-article">
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell large-10 large-offset-2">
                {% render '@headline' %}
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci atque aut culpa debitis dolorem dolores doloribus.</p>
            </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' with { gallery: gallery } %}
            </div>
        </div>
        <div class="grid-x grid-margin-x">
            <div class="cell large-5 large-offset-2 small-order-2 large-order-1">
                <section>
                    {% render '@paragraph' %}
                    {% render '@paragraph' %}
                    {% render '@paragraph' %}
                    {% render '@paragraph' %}
                    {% render '@paragraph' %}
                    {% render '@paragraph' %}
                </section>
            </div>
            <div class="cell large-5 small-order-1 large-order-2">
                {% render '@ad--rectangle' %}
            </div>
        </div>
        <div class="grid-x grid-margin-x">
            <div class="cell large-2">
                <h3>Galerie</h3>
            </div>
            <div class="cell large-10">
                {% render '@gallery' with { gallery: gallery } %}
            </div>
        </div>
    </div>
</article>
{
  "gallery": "default-article-gallery"
}

There are no notes for this item.