#  Media Gallery 

 



 ##  

  expand\_more  

 
  

 

Purpose of the Media Gallery

### Display a collection of images or media for visual browsing 

 

This component supports storytelling and exploration by presenting multiple visual assets in a structured gallery layout.



 



      ![Media Gallery Component in page layout](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2026-02/Media%20Gallery.png?itok=igVsCwXh) 

 

 

 *Example page context showing where a Media Gallery is typically used*

   

 



 

 

 

##  ✓ Use this component when: 

 



- You have multiple related images or media assets
- Visual content is central to the page’s purpose
- Users benefit from browsing or viewing media sequentially
- Images provide meaningful context or documentation



 

 

##  ✕ Avoid using this component when: 

 



- A single image is sufficient (use Image instead)
- Images are decorative and not content-bearing
- Users must read detailed text alongside each item
- The page requires dense or task-focused layout



 

 

 

 

##  Choosing Between Similar Components 

If your goal is…

SortYour goalUse this componentDisplay multiple images for browsing

Media Gallery

Show a single image

Image

Feature one story, event, or initiative

50/50 Card

Provide quick links or actions

Button-Style Cards







 

##  Media Gallery Overview 

A Media Gallery component displays a curated collection of media items (images, audio, video, or externally hosted media). Media Galleries help highlight visual stories, showcase collections, or present multiple related assets in one place.



 

##  Example: Showcasing exhibit photography 

This example shows a Media Gallery used to present event photography, allowing users to browse images within a cohesive visual collection.

 

 



 [   ![Fragment from a Brocaded Furnishing Textile](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/1892.4.3_1.jpeg?itok=E9BZlyAz) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">Fragment from a Brocaded Furnishing Textile</p><div class="hwp-text-block"><p><span>An approximately diamond-shaped cutting from a brocaded textile furnishing or wall hanging. A red star-shaped design with a blue-green center was created with supplementary (i.e. nonstructural) wefts on a tabby ground weave. Dark blue supplementary wefts</span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/1892.4.3_1.jpeg) Fragment from a Brocaded Furnishing Textile

 



 [   ![Roundel with Vases and Vines](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/1892.4.4_2.jpeg?itok=ccE6aBJw) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">Roundel with Vases and Vines</p><div class="hwp-text-block"><p><span>Monochrome tapestry-woven roundel containing a design of vases and vines. The dark blue wefts are wool; the rest of the textile is linen.</span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/1892.4.4_2.jpeg) Roundel with Vases and Vines

 



 [   ![Cartonnage Mummy Case of Padimut](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/1901.9.1-12.jpeg?itok=-z3gO-Dq) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">Cartonnage Mummy Case of Padimut</p><div class="hwp-text-block"><p><span>This case originally held the mummy of Padimut, a wab-priest and metal engraver in the Temple of Amun-Re at Thebes during the 22nd Dynasty (945-712 BCE). </span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/1901.9.1-12.jpeg) Cartonnage Mummy Case of Padimut

 



 [   ![Cushion Cover with Kantharos](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/1892.4.6_1.jpeg?itok=dZ8T9skB) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">Cushion Cover with Kantharos</p><div class="hwp-text-block"><p><span>A large gold tapestry-woven square with a vase/kantharos in a medallion at its center. An eight-pointed gold starburst with a thick dark border surrounds this central medallion, with four of its points extending to the edge of the square.</span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/1892.4.6_1.jpeg) Cushion Cover with Kantharos

 



 [   ![Fragment of a Roundel with Interlace](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/1892.4.7_1.jpeg?itok=kUWlADkw) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">Fragment of a Roundel with Interlace</p><div class="hwp-text-block"><p><span>This is approximately half of a weft-faced purple roundel decorated with geometric interlace. Purple wool wefts are woven on linen warps.</span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/1892.4.7_1.jpeg) Fragment of a Roundel with Interlace

 



 [   ![Coffin of Mut-iy-iy](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/1902.50.10-3.jpeg?itok=u5lsqFOe) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">Coffin of Mut-iy-iy</p></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/1902.50.10-3.jpeg) Coffin of Mut-iy-iy

 



 [   ![False Door of Nebet, Priestess of Hathor](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/1902.17.34-1.jpeg?itok=27XfgL2b) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">False Door of Nebet, Priestess of Hathor</p><div class="hwp-text-block"><p><span>Egyptians believed that the spirit of the deceased could leave the netherworld through a recessed niche, which we call a “false door,” to enjoy items left by the living.</span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/1902.17.34-1.jpeg) False Door of Nebet, Priestess of Hathor

 



 [   ![Group Statue of King Menkaure and Two Godesses](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/6000.2.1-1.jpeg?itok=zvUEHEnK) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">Group Statue of King Menkaure and Two Godesses</p><div class="hwp-text-block"><p><span>Menkaure built the smallest of the three Gaza Pyramids. In 1908, at the Harvard University–Boston Museum of Fine Arts sponsored excavations at the Pyramids, expedition director George Reisner found four complete group statues (or triads) in the king's nea</span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/6000.2.1-1.jpeg) Group Statue of King Menkaure and Two Godesses

 



 

 



##  Elements of a Media Gallery 

SortElementPurposeHeading

Provides the title for the media item

Media item

Shows a preview that users can select to view larger

Caption

Adds brief context or credit below the media in full-screen view

Media grid

Displays all gallery items in a browsable grid

Full-screen view

Shows a larger version of the selected media item

Modal navigation

Lets users move between media items in full-screen view







 

##  Guidance on using a Media Gallery 

- **Use to showcase visual collections.** Add a Media Gallery when users benefit from seeing multiple related images or media items together.
- **Support exploration.** Present media in a clear grid layout so users can quickly browse and discover items of interest.
- **Enable focused viewing.** Full-screen view allows users to examine details without distraction; encourage use of high-resolution media.
- **Write concise, meaningful captions.** Use captions to provide context or credit that helps users interpret the media.
- **Ensure accessible descriptions.** Provide accurate alternative text for each media item to support nonvisual users.
- **Avoid overload.** Include only the most relevant media and keep galleries at a manageable size for easy scanning.



 

##  Content guidelines 

 



**Ensure image quality**  
Use high-resolution images appropriate for display size.

**Avoid redundant imagery**  
Do not include multiple images that convey the same information.



 

 

**Write concise captions**  
Keep captions short and informative.



 

 

 

 

##  Accessibility considerations 

- Provide descriptive alternative text for all meaningful images
- Ensure navigation controls are keyboard accessible
- Avoid using images that contain critical text without alternatives
- Maintain sufficient contrast for captions



 

##  Media Gallery features 

SortFeaturesStandardsImages displayed in a consistent grid layout

Minimum Contrast

Left-aligned headings and text

Text Block Alignment

Background color, icons, and underlining used to indicate links

Link Indicators

Full-screen modal supports keyboard navigation and logical focus order

Focus Order







 

 



 

 See also:- [ Components ](/page-categories/components)
 
 

 

 

 

##  Media Gallery Showcase 

 





###    Media Gallery with caption in grid view  expand\_more  

This example shows the Media Gallery component set to display a collections of images

 

 [   ![Fragment from a Brocaded Furnishing Textile](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/1892.4.3_1.jpeg?itok=E9BZlyAz) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">Fragment from a Brocaded Furnishing Textile</p><div class="hwp-text-block"><p><span>An approximately diamond-shaped cutting from a brocaded textile furnishing or wall hanging. A red star-shaped design with a blue-green center was created with supplementary (i.e. nonstructural) wefts on a tabby ground weave. Dark blue supplementary wefts</span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/1892.4.3_1.jpeg) Fragment from a Brocaded Furnishing Textile

An approximately diamond-shaped cutting from a brocaded textile furnishing or wall hanging. A red star-shaped design with a blue-green center was created with supplementary (i.e. nonstructural) wefts on a tabby ground weave. Dark blue supplementary wefts

 

 



 [   ![Roundel with Vases and Vines](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/1892.4.4_2.jpeg?itok=ccE6aBJw) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">Roundel with Vases and Vines</p><div class="hwp-text-block"><p><span>Monochrome tapestry-woven roundel containing a design of vases and vines. The dark blue wefts are wool; the rest of the textile is linen.</span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/1892.4.4_2.jpeg) Roundel with Vases and Vines

Monochrome tapestry-woven roundel containing a design of vases and vines. The dark blue wefts are wool; the rest of the textile is linen.

 

 



 [   ![Cartonnage Mummy Case of Padimut](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/1901.9.1-12.jpeg?itok=-z3gO-Dq) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">Cartonnage Mummy Case of Padimut</p><div class="hwp-text-block"><p><span>This case originally held the mummy of Padimut, a wab-priest and metal engraver in the Temple of Amun-Re at Thebes during the 22nd Dynasty (945-712 BCE). </span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/1901.9.1-12.jpeg) Cartonnage Mummy Case of Padimut

This case originally held the mummy of Padimut, a wab-priest and metal engraver in the Temple of Amun-Re at Thebes during the 22nd Dynasty (945-712 BCE).

 

 



 [   ![Cushion Cover with Kantharos](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/1892.4.6_1.jpeg?itok=dZ8T9skB) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">Cushion Cover with Kantharos</p><div class="hwp-text-block"><p><span>A large gold tapestry-woven square with a vase/kantharos in a medallion at its center. An eight-pointed gold starburst with a thick dark border surrounds this central medallion, with four of its points extending to the edge of the square.</span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/1892.4.6_1.jpeg) Cushion Cover with Kantharos

A large gold tapestry-woven square with a vase/kantharos in a medallion at its center. An eight-pointed gold starburst with a thick dark border surrounds this central medallion, with four of its points extending to the edge of the square.

 

 



 [   ![Fragment of a Roundel with Interlace](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/1892.4.7_1.jpeg?itok=kUWlADkw) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">Fragment of a Roundel with Interlace</p><div class="hwp-text-block"><p><span>This is approximately half of a weft-faced purple roundel decorated with geometric interlace. Purple wool wefts are woven on linen warps.</span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/1892.4.7_1.jpeg) Fragment of a Roundel with Interlace

This is approximately half of a weft-faced purple roundel decorated with geometric interlace. Purple wool wefts are woven on linen warps.

 

 



 [   ![Coffin of Mut-iy-iy](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/1902.50.10-3.jpeg?itok=u5lsqFOe) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">Coffin of Mut-iy-iy</p><div class="hwp-text-block"><p><span>These two coffins (1902.50.9 &1902.50.10), made of wood from the sacred sycamore fig tree, were discovered together in one tomb on the west bank at Thebes (modern Luxor).</span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/1902.50.10-3.jpeg) Coffin of Mut-iy-iy

These two coffins (1902.50.9 &1902.50.10), made of wood from the sacred sycamore fig tree, were discovered together in one tomb on the west bank at Thebes (modern Luxor).

 

 



 [   ![False Door of Nebet, Priestess of Hathor](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/1902.17.34-1.jpeg?itok=27XfgL2b) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">False Door of Nebet, Priestess of Hathor</p><div class="hwp-text-block"><p><span>Egyptians believed that the spirit of the deceased could leave the netherworld through a recessed niche, which we call a “false door,” to enjoy items left by the living.</span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/1902.17.34-1.jpeg) False Door of Nebet, Priestess of Hathor

Egyptians believed that the spirit of the deceased could leave the netherworld through a recessed niche, which we call a “false door,” to enjoy items left by the living.

 

 



 [   ![Group Statue of King Menkaure and Two Godesses](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/styles/hwp_1_1__360x360_scale/public/2025-12/6000.2.1-1.jpeg?itok=zvUEHEnK) 

  <div class="hwp-media-gallery--caption-content"><p class="hwp-media-gallery--item\_\_title">Group Statue of King Menkaure and Two Godesses</p><div class="hwp-text-block"><p><span>Menkaure built the smallest of the three Gaza Pyramids. In 1908, at the Harvard University–Boston Museum of Fine Arts sponsored excavations at the Pyramids, expedition director George Reisner found four complete group statues (or triads) in the king's nea</span></p></div></div>   

 ](https://designsystem.harvardsites.harvard.edu/sites/g/files/omnuum631/files/2025-12/6000.2.1-1.jpeg) Group Statue of King Menkaure and Two Godesses

Menkaure built the smallest of the three Gaza Pyramids. In 1908, at the Harvard University–Boston Museum of Fine Arts sponsored excavations at the Pyramids, expedition director George Reisner found four complete group statues (or triads) in the king's nea