Joran design system

Gallery 

<div class="o-container o-container--large c-gallery">

    <div>
        <h2 class="c-gallery__heading-text">Bro ipsum dolor sit amet gaper backside single track, many Bike epic clipless</h2>
    </div>

    <div class="o-grid c-gallery-grid">
        <div>
            <figure class="c-figure">

                <img class="c-figure__media" src="https://source.unsplash.com/QDHhz4lPnkU" alt="Des basket et des fleurs" srcset="https://source.unsplash.com/QDHhz4lPnkU/320x210 320w,https://source.unsplash.com/QDHhz4lPnkU/540x360 540w,https://source.unsplash.com/QDHhz4lPnkU/720x480 720w,https://source.unsplash.com/QDHhz4lPnkU/960x640 960w,https://source.unsplash.com/QDHhz4lPnkU/1140x760 1140w,">

                <figcaption class="c-figure__caption">
                    This is the caption
                </figcaption>
            </figure>

        </div>
        <div>
            <figure class="c-figure">

                <img class="c-figure__media" src="https://source.unsplash.com/QDHhz4lPnkU" alt="Des basket et des fleurs" srcset="https://source.unsplash.com/QDHhz4lPnkU/320x210 320w,https://source.unsplash.com/QDHhz4lPnkU/540x360 540w,https://source.unsplash.com/QDHhz4lPnkU/720x480 720w,https://source.unsplash.com/QDHhz4lPnkU/960x640 960w,https://source.unsplash.com/QDHhz4lPnkU/1140x760 1140w,">

                <figcaption class="c-figure__caption">
                    This is the caption
                </figcaption>
            </figure>

        </div>
        <div>
            <figure class="c-figure">

                <img class="c-figure__media" src="https://source.unsplash.com/QDHhz4lPnkU" alt="Des basket et des fleurs" srcset="https://source.unsplash.com/QDHhz4lPnkU/320x210 320w,https://source.unsplash.com/QDHhz4lPnkU/540x360 540w,https://source.unsplash.com/QDHhz4lPnkU/720x480 720w,https://source.unsplash.com/QDHhz4lPnkU/960x640 960w,https://source.unsplash.com/QDHhz4lPnkU/1140x760 1140w,">

                <figcaption class="c-figure__caption">
                    This is the caption
                </figcaption>
            </figure>

        </div>
        <div>
            <figure class="c-figure">

                <img class="c-figure__media" src="https://source.unsplash.com/QDHhz4lPnkU" alt="Des basket et des fleurs" srcset="https://source.unsplash.com/QDHhz4lPnkU/320x210 320w,https://source.unsplash.com/QDHhz4lPnkU/540x360 540w,https://source.unsplash.com/QDHhz4lPnkU/720x480 720w,https://source.unsplash.com/QDHhz4lPnkU/960x640 960w,https://source.unsplash.com/QDHhz4lPnkU/1140x760 1140w,">

                <figcaption class="c-figure__caption">
                    This is the caption
                </figcaption>
            </figure>

        </div>
        <div>
            Lorem ipsum dolor amet mustache knausgaard +1, blue bottle waistcoat tbh semiotics artisan synth stumptown gastropub cornhole celiac swag. Brunch raclette vexillologist post-ironic glossier ennui XOXO mlkshk godard pour-over blog tumblr humblebrag. Blue bottle put a bird on it twee prism biodiesel brooklyn. Blue bottle ennui tbh succulents.
        </div>
    </div>
</div>
 
<div class="o-container o-container--large c-gallery">
    {% if heading %}
        <div>
            <h2 class="c-gallery__heading-text">{{ heading }}</h2>
        </div>
    {% endif %}
    <div class="o-grid c-gallery-grid">
        <div>
            {% render '@figure' %}
        </div>
        <div>
            {% render '@figure' %}
        </div>
        <div>
            {% render '@figure' %}
        </div>
        <div>
            {% render '@figure' %}
        </div>
        <div>
            Lorem ipsum dolor amet mustache knausgaard +1, blue bottle waistcoat tbh semiotics artisan synth stumptown gastropub cornhole celiac swag. Brunch raclette vexillologist post-ironic glossier ennui XOXO mlkshk godard pour-over blog tumblr humblebrag. Blue bottle put a bird on it twee prism biodiesel brooklyn. Blue bottle ennui tbh succulents.
        </div>
    </div>
</div>
 
{
  "heading": "Bro ipsum dolor sit amet gaper backside single track, many Bike epic clipless"
}
  • Content: 
    /* ======================================================================
   # _objects.grid-css
   ====================================================================== */

.c-gallery__heading-text {
  @extend %h2;

  @apply
    mb-8
    ;
}
  • URL: /components/raw/gallery/_components.gallery.css
  • Filesystem Path: src/components/04-Components/gallery/_components.gallery.css
  • Size: 244 Bytes

No notes defined.