Grid

How To

Create a Grid Layout

1. Navigate to the page you’d like to update, and enter the Edit Mode for the page.
2. Choose the Section you would like to add the block, click the plus (+) icon.
3. Select the Grid Layout Component for the component list.

Select the Theme

1. The theme selects the background color of the section. The grid item colors are preset based on the selected theme.

Add a Component Header

1. To add a component header, click Add a Component Header button.

To Add Grid Items

The grid layout component requires a minimum of 2 grid items and a maximum of 9. The layout will adjust based on the number of items that you add. There are two types of items that are allowed: text item and image item.

Text items are informative and may include hyperlinks. Image items are more decorative, often used to reinforce the messaging of the Grid section or the page overall. Image items may not contain hyperlinks.

To Add a Grid Item: Text

1. Title: the title appears as the heading on each individual cell.
2. Text: enter the body content for each grid item.
3. Add icon (optional): click Add Media to add an icon from the media library or to upload an image.
4. Link (optional): adding a link to a Text item makes the full Grid item clickable, so there is no Link Text field. Make sure your link corresponds to the Title and Text of the Grid item.
   1. To add a link: start typing the title of the page you want to link to.
      1. Select the page from the list when it appears.
      2. If you are linking to a page outside the CU Denver website, paste the full URL (for example, https://www.example.edu) into the URL field instead.

Linking Best Practice

Always select pages from the site when possible. Only paste full URLs for external sites.

Why This Matters

Linking to pages by selecting them from the list (instead of pasting a URL) helps prevent broken links if a page’s URL changes. This helps keep the CU Denver website reliable for our visitors.

To Add an Grid Item: Image

1. Select the dropdown arrow beside the Add Component Grid Item: Text button.  
2. Select Add Grid Item Image.
3. Upload or select media to add to this card.
   1. Minimum Image Dimensions: 700px width x 525px height.
   2. Recommended Image Dimensions: 1400px width x 1050px height.

Add Additional Grid Layout Content

1. Click Add Grid Item: Text button or the dropdown arrow to display the Add Grid Item: Image button to add more grid content.

Save Changes

1. Click Save to commit all changes.

Reorganize Grid Items

1. Drag and drop
   To make multiple items easy to see at one time, click the Collapse all button.
   1. Hover over the item you want to move.
   2. Click the six-dot handle in the menu and drag the item to the desired position.
2. Keyboard navigation
   1. Tab to the item, select it, then use arrow keys to move it up or down.
3. Once all items are in the correct order, click Save. 

User Experience Best Practices

• Consistent Link Behavior: Make sure all Text items follow the same rule: either every Text item is clickable or none are. Mixing linked and non-linked Text items creates confusion and breaks user expectations.
• Uniform Icon Usage: If you include icons, use them consistently across all text grid items. Avoid having some items with icons and others without, and keep icon style uniform for a clean, cohesive look.
• Avoid Overloading Content: Too many elements can make the grid cluttered and hard to scan. Keep grid items simple and focused.

Related Components

• Featured Cards: offers a similar structure with a different layout.