A gallery is simply a row of square thumbnails whose modal popups are linked together. More complicated galleries can use a grid layout to create a two-, three- or four-column layout and add c-gallery-item components to each grid box.

If a collection of items on a page all have the js-modal--gallery class, then they will automatically be scrollable when popped up in a modal window.

 
<a class="c-gallery-item c-gallery-item--landscape js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1120/840/?image=992">
  <figure class="c-gallery-item__thumbnail">
    <img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/374/280/?image=992" alt="">
  </figure>
</a><a class="c-gallery-item c-gallery-item--landscape js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1920/640/?image=993" data-caption="<p>The University is in the middle of an unprecedented period of expansion and renewal.</p>">
  <figure class="c-gallery-item__thumbnail">
    <img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/374/280/?image=993" alt="">
  </figure>
</a><a class="c-gallery-item c-gallery-item--portrait js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/840/1120/?image=994" data-caption="<p>The University is in the middle of an unprecedented period of expansion and renewal.</p>">
  <figure class="c-gallery-item__thumbnail">
    <img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/374/?image=994" alt="">
  </figure>
</a><a class="c-gallery-item c-gallery-item--portrait js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/640/1920/?image=995">
  <figure class="c-gallery-item__thumbnail">
    <img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/374/?image=995" alt="">
  </figure>
</a><a class="c-gallery-item c-gallery-item--portrait js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1920/1920/?image=996" data-caption="<p>Our investment in new colleges mean it has never been a better time to join our student body or research groups at York.</p>">
  <figure class="c-gallery-item__thumbnail">
    <img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/374/?image=996" alt="">
  </figure>
</a>

Galleries can also be created by using a grid layout, which gives you more control over the layout, especially at changing screen sizes.

 
<div class="o-grid">
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--third o-grid__box--full@medium">
      <a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=997" data-caption="<h3>Berrick Saul building </h3><p>Our £11m Berrick Saul building houses the Humanities Research Centre, interdisciplinary research centres, seminar rooms and the 150-seat Bowland Auditorium.</p>">
        <figure class="c-gallery-item__thumbnail">
          <img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=997" alt="">
        </figure>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third o-grid__box--half@medium">
      <a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=998">
        <figure class="c-gallery-item__thumbnail">
          <img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=998" alt="">
        </figure>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third o-grid__box--half@medium">
      <a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=999" data-caption="<p>Our investment in new colleges mean it has never been a better time to join our student body or research groups at York.</p>">
        <figure class="c-gallery-item__thumbnail">
          <img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=999" alt="">
        </figure>
      </a>
    </div>
  </div>
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--third o-grid__box--half@medium">
      <a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=998">
        <figure class="c-gallery-item__thumbnail">
          <img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=998" alt="">
        </figure>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third o-grid__box--quarter@medium">
      <a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=999" data-caption="<p>Our investment in new colleges mean it has never been a better time to join our student body or research groups at York.</p>">
        <figure class="c-gallery-item__thumbnail">
          <img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=999" alt="">
        </figure>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third o-grid__box--quarter@medium">
      <a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=997" data-caption="<h3>Berrick Saul building </h3><p>Our £11m Berrick Saul building houses the Humanities Research Centre, interdisciplinary research centres, seminar rooms and the 150-seat Bowland Auditorium.</p>">
        <figure class="c-gallery-item__thumbnail">
          <img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=997" alt="">
        </figure>
      </a>
    </div>
  </div>
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--third o-grid__box--half@medium">
      <a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=999" data-caption="<p>Our investment in new colleges mean it has never been a better time to join our student body or research groups at York.</p>">
        <figure class="c-gallery-item__thumbnail">
          <img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=999" alt="">
        </figure>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third o-grid__box--half@medium">
      <a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=998">
        <figure class="c-gallery-item__thumbnail">
          <img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=998" alt="">
        </figure>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third o-grid__box--full@medium">
      <a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=997" data-caption="<h3>Berrick Saul building </h3><p>Our £11m Berrick Saul building houses the Humanities Research Centre, interdisciplinary research centres, seminar rooms and the 150-seat Bowland Auditorium.</p>">
        <figure class="c-gallery-item__thumbnail">
          <img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=997" alt="">
        </figure>
      </a>
    </div>
  </div>
</div>

Options

Molecules

  • gallery-item
    • link: the URL of the picture for the gallery
    • thumbnail: the URL of the image thumbnail
    • caption: the stuff that goes in the box under the picture. Should be an HTML string.