An image group can be used where there are 2 or more images to display. An image and alt text must be provided and the url is optional for cases where a link is required.

Image group

<div class="c-image-group">

  <img class="c-image-group__item" src="https://picsum.photos/800/400/?image=973" alt="" />


  <img class="c-image-group__item" src="https://picsum.photos/800/400/?image=653" alt="" />


  <img class="c-image-group__item" src="https://picsum.photos/800/400/?image=573" alt="" />


  <img class="c-image-group__item" src="https://picsum.photos/800/400/?image=643" alt="" />


  <img class="c-image-group__item" src="https://picsum.photos/800/400/?image=773" alt="" />

</div>

Image group with links

An example of using an image group with links is when there is a need to have a group of partner logos that require a link to the brand website.

<div class="c-image-group">
  <a href="https://www.york.ac.uk" class="c-image-group__link">
    <img class="c-image-group__item" src="https://picsum.photos/800/400/?image=973" alt="test" />
  </a>
  <a href="https://www.york.ac.uk" class="c-image-group__link">
    <img class="c-image-group__item" src="https://picsum.photos/800/400/?image=653" alt="test" />
  </a>
  <a href="https://www.york.ac.uk" class="c-image-group__link">
    <img class="c-image-group__item" src="https://picsum.photos/800/400/?image=773" alt="test" />
  </a>
</div>

Options

Atoms

• Image-group
  • image: the URL of an image (required)
  • alt: the alt text (string) (required)
  • url: target URL for an image that is a link