A gallery adds a group of images to a page in a gallery format.

Example


Design Considerations

The images we use create an emotional impression and tell a story about our values, people, campus and personality. Make sure to select images that are relevant and add value to your message.

Use fewer, better and larger images. Most users don’t look at any individual image when there are too many on a page.

The caption text size is 16px so that it takes up less space at the bottom of the image. The text is white on top of a dark gradient overlay at the bottom of the photo so that the text is readable and accessible on all images.

Read our image guidelines for further information on images.

Best Practices

  • Avoid adding more than three columns in a gallery to keep images from appearing too small.
  • Images will default to being cropped. It is recommend to keep this feature turned on so that all images are the same aspect ratio.
  • Captions can be added to provide details for each image.
  • Avoid adding long captions to images. Longer captions can cause scrollbars to appear over images.
  • Descriptive alt text should be added to all images for accessibility compliance.

Related Components