Styleguide

Gallery 

<section class="mt-4 gallery-box d-none d-md-block" id="jobs-gallery-benefits">
    <div class="row mr-0 wow fadeIn">
        <div class="col-12 p-0">
            <figure role="figure" class="gallery-row m-0">
                <div class="r1-p1">
                    <img src="/STATIC/binary/images/global/jobs/event-gallery/Brainstorming_Ecke-blur.jpg" data-src="/STATIC/binary/images/global/jobs/event-gallery/Brainstorming_Ecke.jpg" alt="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" loading="lazy" class="img-fluid lazy loaded" title="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" width="100%" />
                    <noscript>
                        <img src="/STATIC/binary/images/global/jobs/event-gallery/Brainstorming_Ecke.jpg" alt="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" class="img-fluid" title="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" width="100%" />
                    </noscript>
                </div>
                <div class="r1-p2">
                    <img src="/STATIC/binary/images/global/jobs/event-gallery/Lauftreff-blur.jpg" data-src="/STATIC/binary/images/global/jobs/event-gallery/Lauftreff.jpg" alt="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" loading="lazy" class="img-fluid lazy loaded" title="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" width="100%" />
                    <noscript>
                        <img src="/STATIC/binary/images/global/jobs/event-gallery/Lauftreff.jpg" alt="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" class="img-fluid" title="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" width="100%" />
                    </noscript>
                </div>
                <div class="r1-p3">
                    <img src="/STATIC/binary/images/global/jobs/event-gallery/Tanzbild-blur.jpg" data-src="/STATIC/binary/images/global/jobs/event-gallery/Tanzbild.jpg" alt="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" loading="lazy" class="img-fluid lazy loaded" title="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" width="100%" />
                    <noscript>
                        <img src="/STATIC/binary/images/global/jobs/event-gallery/Tanzbild.jpg" alt="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" class="img-fluid" title="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" width="100%" />
                    </noscript>
                </div>
            </figure>
        </div>
    </div>
    <div class="row mr-0 wow fadeIn">
        <div class="col-12 p-0">
            <figure role="figure" class="gallery-row m-0">
                <div class="r2-p1">
                    <img src="/STATIC/binary/images/global/jobs/event-gallery/Beachvolleyball-blur.jpg" data-src="/STATIC/binary/images/global/jobs/event-gallery/Beachvolleyball.jpg" alt="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" loading="lazy" class="img-fluid lazy loaded" title="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" width="100%" />
                    <noscript>
                        <img src="/STATIC/binary/images/global/jobs/event-gallery/Beachvolleyball.jpg" alt="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" class="img-fluid" title="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" width="100%" />
                    </noscript>
                </div>
                <div class="r2-p2">
                    <img src="/STATIC/binary/images/global/jobs/event-gallery/Karneval-blur.jpg" data-src="/STATIC/binary/images/global/jobs/event-gallery/Karneval.jpg" alt="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" loading="lazy" class="img-fluid lazy loaded" title="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" width="100%" />
                    <noscript>
                        <img src="/STATIC/binary/images/global/jobs/event-gallery/Karneval.jpg" alt="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" class="img-fluid" title="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" width="100%" />
                    </noscript>
                </div>
                <div class="r2-p3">
                    <img src="/STATIC/binary/images/global/jobs/event-gallery/Obstbild_Fruitful_Office-blur.jpg" data-src="/STATIC/binary/images/global/jobs/event-gallery/Obstbild_Fruitful_Office.jpg" alt="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" loading="lazy" class="img-fluid lazy loaded" title="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" width="100%" />
                    <noscript>
                        <img src="/STATIC/binary/images/global/jobs/event-gallery/Obstbild_Fruitful_Office.jpg" alt="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" class="img-fluid" title="Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein" width="100%" />
                    </noscript>
                </div>
            </figure>
        </div>
    </div>
</section>
 
<section class="mt-4 gallery-box d-none d-md-block" id="jobs-gallery-benefits">
  {{#each row}}
    <div class="row mr-0 wow fadeIn">
      <div class="col-12 p-0">
        <figure role="figure" class="gallery-row m-0">
          {{#each image}}
            <div class="r{{../index}}-p{{index}}">
              <img
                src="{{src}}"
                data-src="{{dataSrc}}"
                alt="{{alt}}"
                loading="lazy"
                class="img-fluid lazy loaded"
                title="{{title}}"
                width="100%"
              />
              <noscript>
                <img
                  src="{{dataSrc}}"
                  alt="{{alt}}"
                  class="img-fluid"
                  title="{{title}}"
                  width="100%"
                />
              </noscript>
            </div>
          {{/each}}
        </figure>
      </div>
    </div>
  {{/each}}
</section>
 
{
  "row": [
    {
      "index": "1",
      "image": [
        {
          "index": "1",
          "src": "/STATIC/binary/images/global/jobs/event-gallery/Brainstorming_Ecke-blur.jpg",
          "dataSrc": "/STATIC/binary/images/global/jobs/event-gallery/Brainstorming_Ecke.jpg",
          "alt": "Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein",
          "title": "Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein"
        },
        {
          "index": "2",
          "src": "/STATIC/binary/images/global/jobs/event-gallery/Lauftreff-blur.jpg",
          "dataSrc": "/STATIC/binary/images/global/jobs/event-gallery/Lauftreff.jpg",
          "alt": "Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein",
          "title": "Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein"
        },
        {
          "index": "3",
          "src": "/STATIC/binary/images/global/jobs/event-gallery/Tanzbild-blur.jpg",
          "dataSrc": "/STATIC/binary/images/global/jobs/event-gallery/Tanzbild.jpg",
          "alt": "Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein",
          "title": "Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein"
        }
      ]
    },
    {
      "index": "2",
      "image": [
        {
          "index": "1",
          "src": "/STATIC/binary/images/global/jobs/event-gallery/Beachvolleyball-blur.jpg",
          "dataSrc": "/STATIC/binary/images/global/jobs/event-gallery/Beachvolleyball.jpg",
          "alt": "Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein",
          "title": "Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein"
        },
        {
          "index": "2",
          "src": "/STATIC/binary/images/global/jobs/event-gallery/Karneval-blur.jpg",
          "dataSrc": "/STATIC/binary/images/global/jobs/event-gallery/Karneval.jpg",
          "alt": "Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein",
          "title": "Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein"
        },
        {
          "index": "3",
          "src": "/STATIC/binary/images/global/jobs/event-gallery/Obstbild_Fruitful_Office-blur.jpg",
          "dataSrc": "/STATIC/binary/images/global/jobs/event-gallery/Obstbild_Fruitful_Office.jpg",
          "alt": "Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein",
          "title": "Eine farbenfrohe Ecke lädt zu kreativen Gedanken ein"
        }
      ]
    }
  ]
}

No notes defined.