C43 Media gallery

The Media Gallery component allows users to display images and/or videos in an easy-to-digest format with navigation controls for browsing through the content.

Component requirements

Media gallery wrapper

Optional:

• Headline: Text field
• Support copy: Rich text field.
• CTA: Rich text field.

• Should lazy load: Loads content only when needed. Default: unchecked.

• Headline tag: H2/H3/H4/P. Default: H2.

• Content alignment: Dropdown. Left/center. Default: left.

• Background color: Dropdown. White/White Smoke. Default: White.

• Hide thumbnails: Checkbox. Shows or hides the thumbnail row.

• Hide navigation: Checkbox. Shows or hides the gallery navigation.

Media gallery item

Required:

• Image: Required media file for the gallery item (webp or jpg).

Optional:

• Video ID: Allows embedding a YouTube video via its ID.
• Headline: Text field. Styled as a P-Bold.
• Support copy: Rich text field.

Content guidance 

Use this component if you want more than one image and/or video. Use C15 image asset for a single image, C17 side media asset if you want text to wrap around a single image or video, or C16 for a single video. 

• Each image or video can have its own title and support copy. 
• You can also include a wrapper headline, support copy and CTA that unites the images to your broader message.  
• If you include videos in this asset, include a YouTube ID in the copy doc.  

Wrapper headline (optional) 

• Use an optional H2 or H3 if needed.  
• Don’t force it. Only include a headline if it makes sense for the page.  

Wrapper support copy (optional) 

• This will appear below the wrapper headline but above the images/videos.  
• Treat this like you would a caption and drive home your overarching message.  
• Keep support copy to a few sentences. 

Wrapper CTA (optional) 

• For the CTA button copy, use sentence case.   
• CTAs should be descriptive and clearly state what action users should take. Avoid using general phrases such as “click here” or “read more.”   
• CTAs should be kept to 30 characters or fewer.  

Asset title and support copy (optional) 

• Each photo or video in the media gallery can have a title. See examples on the Voices of Hospice page.  
• Consider this title a headline that explains the photo or video. 

Asset support copy (optional)

• Each photo or video in the media gallery can have support copy – much like a caption. See an example on the Kenosha birthing center page. 
• This can be used with or without a title. 
• Support copy is often a nice addition because it helps explain and add value to the photo or video. 
• Don’t force it: If an image title and support copy feels like too much, trust your gut. It’s OK to have one or the other.

Image alt text 

• If using an image, include alt text.
• This descriptive text will explain each photo if the images don't appear or if a person with visual impairment is using a screen reader on the page. 
• For example, if the photo is of a person getting their flu shot, the image alt text might be: “Person getting their flu shot at Advocate Medical Center.” 

ADA requirements

• Each image must have alt text unless marked decorative.
• Embedded videos must include a title and keyboard-accessible controls.
• Autoplaying galleries must provide pause/play functionality.
• Next/previous arrows must be proportionally sized and clearly visible.

Component example

Example: Showing a media gallery component with a combination of both, image and video assets.