Media Grid Component

This component is suitable for use when creating accessible courses.

The Media Grid component lets you display media and text items in a grid format to the learners.

This article provides an overview of the Media Grid component, component setup and behavior, and examples of Media Grid component configurations.

Component overview

The Media Grid component lets you present text items together with media to your learners. The Media Grid component can be set to display in columns, and you can select to display media type as image, video, gif, or audio as needed.

The Media Grid component is fully responsive and can be configured to animate the component when it first appears on an Evolve page.

Component set up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

Add Title, or a Display Title, as needed. Display Title is seen by learners.

Scroll down and add your Body. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the Media Grid component. This widget can display an icon and label prior to the Media Grid component completion, which changes to a different icon and label once the Media Grid component is completed.

Add Media Grid Items

You Add Media Grid Items to your Media Grid component in the Items section.

In the General section:

1. Add Item Title. This is the item title.
2. Add Item Body. This is the item body text. Use the text editor to style and format your text, as needed.

In the Behavior section:

1. In the Behavior section, select Media Type. You can select Image, Video, VideoStream, Gif, or Audio to be included in the Media Grid Item.
2. Select Position of Item Media. This is where your Media will be positioned in the Media Grid Item. You can display the Media on top or bottom, relative to the text.

In the Media section:

To add an Item Image to the Media Grid Item, do the following:

1. Select an Item Image to display.
2. Scroll down to Item Image Advanced Settings if you want to toggle to Set Image Per Device Size.
3. Add Item Image Alt Text, as needed.
4. Toggle View in Lightbox, to enable this setting. When enabled, the image will be displayed in a lightbox when clicked.

To add a Video to the Media Grid Item, do the following:

1. Select or upload an Item Video.
2. Add an Item Video Poster Image.
3. Toggle to enable View In Popup. When enabled, the video will be played in a popup.
4. Add Label, as needed.
5. Add Subtitle, as needed.
6. Add Transcript , including Transcript Button Text and Transcript Text, as needed. Use the text editor to style and format your text, as needed.

Note: Regarding Video Subtitles - Due to browser restrictions, subtitle files cannot play in offline courses. Try using the transcript instead if offline is required.

To add a VideoStream to the Media Grid Item, do the following:

1. Select the Video player service used for your video. Video players' services options are YouTube, Vimeo, Brightcove, Wistia, and Vidyard.
2. Enter Video Embed Code.
3. Set and enable all other options for the Media Grid Item VideoStream.

To add a Gif to the Media Grid Item, do the following:

1. Select Item Gif to be displayed.
2. Add Item Gif Alt Text for accessibility, as needed.

To add Audio to the Media Grid Item, do the following:

1. Select Item Audio.
2. Select Item Audio Poster Image.
3. Add Item Audio Poster Image Alt Text as needed.
4. Add Item Audio Transcript, including Transcript Button Text and Transcript Text. Use the text editor to style and format your text, as needed.

Add, duplicate, or delete Media Grid Items as needed.

Component Examples

The Media Grid component gives you a lot of flexibility. Below are examples that illustrate each Media Grid component setup:

Example – The example shows two Media Grid Items, both displaying text and image. The left item displays the media positioned on top and the right item shows the media set to bottom, relative to the text.

Behavior section

In the Behavior section, you set the number of Columns to your Media Grid component. This is set to three columns for desktop, two columns for tablets, and one column for mobiles, by default.

Appearance section

In the Appearance section, you can configure the styling of your Media Grid component. Set Item Background Color as needed.

Set Border Styles as needed. Set Item Border Width. This is by default set to 1 px. Set Item Border Style. This is by default set to none. Optional settings are none, solid, dashed, or dotted. Set Item Border Radius. This is by default set to 0 px.

Set the Padding for the component. This is by default set to 0 px.

Animations section

In the Animations section, you set what animations to run when the Media Grid component first comes into view on the page.

Note: Due to performance reasons, animations are not recommended for more than six items.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.