Search

Display groups of images consistently, with proper stacking and captions, instead of inserting inline media.

Images support storytelling and highlight key people, places, and events. But if handled poorly, they can confuse, slow down, or even exclude users.

Keep pages fast and sharp by exporting images at the right size and file type for each component.

Make sure hero images are cropped and composed so the most important parts stay visible across screen sizes.

Display groups of images consistently, with proper stacking and captions, instead of inserting inline media.

Avoid cut-off faces, black bars, or distorted covers by preparing images to match card aspect ratios.

Provide context with captions and handle image credits consistently until a dedicated field is available.

Alt text supports screen reader users and helps images carry meaning when used thoughtfully. This guide shows when to write it, how to write it well, and when to leave it out.

Lead stories deserve visual emphasis. This guide shows how to use 50/50 or Vertical Cards to anchor a section and guide readers into the content.

A Hero component is a banner element that displays an image and information at the top of a page.

A Vertical Card is a vertical element that displays an image on top and information below. 

A 50/50 Card is a horizontal element that displays an image on one side and information on the other.