Gallery


<p>
  The gallery component is useful to display a set of large photos. For each photo, you must provide the following information:
</p>
<ul>
  <li>the URL of the full-size version (in the <code>href</code> attribute of the anchor element),
  </li>
  <li>the dimensions of the full-size version (in the <code>data-size</code> attribute of the anchor element),
  </li>
  <li>the URL of the thumbnail version (in the <code>src</code> attribute of the image element),
  </li>
  <li>a caption and/or text alternative (<code>figcaption</code> element or <code>alt</code> attribute).
  </li>
</ul>
<p class="notice notice--info">
  <strong>Note:</strong> Captions and text alternatives have different purposes, make sure you <a href="http://4syllables.com.au/articles/text-alternatives-images-captions/">use them the right way</a>.
</p>
<ul class="image-gallery">
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/1.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/1.jpg" /><figcaption>Lorem ipsum Duis exercitation dolore pariatur dolore.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/11.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/11.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/2.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/2.jpg" /><figcaption>Lorem ipsum Duis exercitation dolore pariatur dolore.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/3.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/3.jpg" /><figcaption>Lorem ipsum Anim non consequat tempor exercitation ad.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/4.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/4.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/12.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/12.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/13.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/13.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/5.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/5.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/14.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/14.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/6.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/6.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/7.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/7.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/8.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/8.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="4000x1000" href="/assets/gallery/21.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/21.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/15.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/15.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/16.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/16.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="4000x1000" href="/assets/gallery/22.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/22.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/17.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/17.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/18.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/18.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
</ul>
      

Small and medium

<ul class="image-gallery image-gallery--small">
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/3.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/3.jpg" /><figcaption>Lorem ipsum Anim non consequat tempor exercitation ad.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/7.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/7.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/12.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/12.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="4000x1000" href="/assets/gallery/21.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/21.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/13.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/13.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/5.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/5.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/14.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/14.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
</ul>
<ul class="image-gallery image-gallery--medium">
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/3.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/3.jpg" /><figcaption>Lorem ipsum Anim non consequat tempor exercitation ad.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/12.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/12.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/4.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/4.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="4000x1000" href="/assets/gallery/21.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/21.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/13.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/13.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/5.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/5.jpg" /><figcaption>Lorem ipsum Proident do aute cupidatat enim.</figcaption>
      </figure>
    </a>
  </li>
</ul>
      

Captions

You may, and should provide a caption for every image with the figcaption element.

  • By default, the caption is shown only in the viewer (cf. first image below).
  • To show it in the gallery as well, use class image-gallery__caption (cf. second image).
  • If you need to show a different caption in the gallery than in the viewer, leave the figcaption as is and add a paragraph before it with class image-gallery__caption (cf. third image).

Note: Captions in the gallery should be concise and consistent—either provide one for every image, or don't provide any at all.

<p>You may, and should provide a caption for every image with the <code>figcaption</code> element.
</p>
<ul>
  <li>
    By default, the caption is shown only in the viewer (cf. first image below).
  </li>
  <li>To show it in the gallery as well, use class <code>image-gallery__caption</code> (cf. second image).
  </li>
  <li>If you need to show a different caption in the gallery than in the viewer, leave the <code>figcaption</code> as is and add a paragraph before it with class <code>image-gallery__caption</code> (cf. third image).
  </li>
</ul>
<p class="notice notice--info">
  <strong>Note:</strong> Captions in the gallery should be <strong>concise</strong> and <strong>consistent</strong>—either provide one for every image, or don't provide any at all.
</p>
<ul class="image-gallery image-gallery--small">
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/12.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/12.jpg" /><figcaption>No caption in gallery, only in viewer.</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1000x1500" href="/assets/gallery/19.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/19.jpg" /><figcaption class="image-gallery__caption">Same caption in gallery as in viewer</figcaption>
      </figure>
    </a>
  </li>
  <li class="item">
    <a data-size="1500x1000" href="/assets/gallery/9.jpg">
      <figure>
        <img alt="" src="/assets/gallery/thumbs/9.jpg" />
        <p class="image-gallery__caption">
          Short caption in gallery
        </p>
        <figcaption>Longer caption in viewer.</figcaption>
      </figure>
    </a>
  </li>
</ul>