Gallery Article

100%
<article role="article" class="t-article t-article--gallery" itemtype="http://schema.org/Article" itemscope="itemscope">
    <div class="grid-container">
        <div class="grid-x grid-padding-x grid-padding-y align-bottom u-fixed-background" style="background-image: url('../../../assets/img/landscape.jpg');">
            <div class="u-fixed-background-gradient"></div>

            <div class="cell large-9 large-offset-3 u-zindex-1">
                <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>
                <aside class="grid-x grid-padding-x grid-padding-y align-middle">
                    <div class="cell small-12 medium-auto">
                        <div class="c-meta">
                            <ul cLass="c-meta__list">
                                <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>
                            </ul>
                        </div>
                    </div>
                    <div class="cell small-12 medium-shrink">
                        <div class="grid-x grid-padding-x grid-padding-y align-middle">
                            <div class="cell small-12 medium-shrink">
                                <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>
                            <div class="cell small-12 medium-auto">
                                <div class="c-social-menu c-social-menu--inverse">
                                    <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>
                    </div>
                </aside>
            </div>
        </div>
        <div class="grid-x grid-padding-x grid-padding-y">
            <div class="cell medium-6 large-3">
                <hr>
                <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>
            </div>
            <div class="cell medium-6 large-9">
                <a href="../../../assets/img/landscape.jpg" class="glightbox" data-gallery="article-gallery-1" 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 class="grid-x grid-padding-x grid-padding-y">
            <div class="cell medium-6 large-3">
                <hr>
                <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>
            </div>
            <div class="cell medium-6 large-9">
                <a href="../../../assets/img/landscape.jpg" class="glightbox" data-gallery="article-gallery-1" 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 class="grid-x grid-padding-x grid-padding-y">
            <div class="cell medium-6 large-3">
                <hr>
                <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>
            </div>
            <div class="cell medium-6 large-9">
                <a href="../../../assets/img/landscape.jpg" class="glightbox" data-gallery="article-gallery-1" 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 class="grid-x grid-padding-x grid-padding-y">
            <div class="cell medium-6 large-3">
                <hr>
                <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>
            </div>
            <div class="cell medium-6 large-9">
                <a href="../../../assets/img/landscape.jpg" class="glightbox" data-gallery="article-gallery-1" 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 class="grid-x grid-padding-x grid-padding-y">
            <div class="cell medium-6 large-3">
                <hr>
                <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>
            </div>
            <div class="cell medium-6 large-9">
                <a href="../../../assets/img/landscape.jpg" class="glightbox" data-gallery="article-gallery-1" 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 class="grid-x grid-padding-x grid-padding-y">
            <div class="cell medium-6 large-3">
                <hr>
                <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>
            </div>
            <div class="cell medium-6 large-9">
                <a href="../../../assets/img/landscape.jpg" class="glightbox" data-gallery="article-gallery-1" 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>
</article>
<article role="article" class="t-article t-article--gallery" itemtype="http://schema.org/Article"
         itemscope="itemscope">
    <div class="grid-container">
        <div class="grid-x grid-padding-x grid-padding-y align-bottom u-fixed-background" style="background-image: url('../../../assets/img/landscape.jpg');">
            <div class="u-fixed-background-gradient"></div>

            <div class="cell large-9 large-offset-3 u-zindex-1">
                {% render '@headline' %}
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci atque aut culpa debitis dolorem dolores doloribus.</p>
                <aside class="grid-x grid-padding-x grid-padding-y align-middle">
                    <div class="cell small-12 medium-auto">
                        {% render '@meta' with {
                            location: false,
                            readingTime: false,
                            visits: false,
                        } %}
                    </div>
                    <div class="cell small-12 medium-shrink">
                        <div class="grid-x grid-padding-x grid-padding-y align-middle">
                            <div class="cell small-12 medium-shrink">
                                {% render '@bookmark' %}
                            </div>
                            <div class="cell small-12 medium-auto">
                                {% render '@social-menu--inverse' with {
                                    skype: false,
                                    linkedin: false,
                                } %}
                            </div>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
        <div class="grid-x grid-padding-x grid-padding-y">
            <div class="cell medium-6 large-3">
                <hr>
                {% render '@paragraph' %}
            </div>
            <div class="cell medium-6 large-9">
                {% render '@media' with { caption: false, gallery: 'article-gallery-1' } %}
            </div>
        </div>
        <div class="grid-x grid-padding-x grid-padding-y">
            <div class="cell medium-6 large-3">
                <hr>
                {% render '@paragraph' %}
            </div>
            <div class="cell medium-6 large-9">
                {% render '@media' with { caption: false, gallery: 'article-gallery-1' } %}
            </div>
        </div>
        <div class="grid-x grid-padding-x grid-padding-y">
            <div class="cell medium-6 large-3">
                <hr>
                {% render '@paragraph' %}
            </div>
            <div class="cell medium-6 large-9">
                {% render '@media' with { caption: false, gallery: 'article-gallery-1' } %}
            </div>
        </div>
        <div class="grid-x grid-padding-x grid-padding-y">
            <div class="cell medium-6 large-3">
                <hr>
                {% render '@paragraph' %}
            </div>
            <div class="cell medium-6 large-9">
                {% render '@media' with { caption: false, gallery: 'article-gallery-1' } %}
            </div>
        </div>
        <div class="grid-x grid-padding-x grid-padding-y">
            <div class="cell medium-6 large-3">
                <hr>
                {% render '@paragraph' %}
            </div>
            <div class="cell medium-6 large-9">
                {% render '@media' with { caption: false, gallery: 'article-gallery-1' } %}
            </div>
        </div>
        <div class="grid-x grid-padding-x grid-padding-y">
            <div class="cell medium-6 large-3">
                <hr>
                {% render '@paragraph' %}
            </div>
            <div class="cell medium-6 large-9">
                {% render '@media' with { caption: false, gallery: 'article-gallery-1' } %}
            </div>
        </div>
    </div>
</article>
/* No context defined for this component. */

There are no notes for this item.