Layout & Component Blocks

50/50

Overview

The 50/50 component creates a balanced section layout with text on one side and an image on the other. It’s ideal for presenting content in a visually engaging way while maintaining readability. Multiple 50/50 components can be stacked to showcase different pieces of information in a consistent format.

View 50/50 Component Demo

When to Use

  • To highlight a key message alongside a supporting image for better visual storytelling.
  • When you want to break up long text sections with imagery for improved engagement.
  • To showcase multiple features or topics by stacking several 50/50 components.
  • When you need a responsive layout that adapts well to mobile (text and image stack neatly).
How To

How To

Create a 50/50 Component

  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 50/50 component from the component list.

Add a Component Header

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

To Build the Image/Text Layout:  

Select the Alignment

  1. The alignment selects where the content and image are placed within the 50/50 component. 

Add An Image

  1. Click Add Image button to add an image from the media library or to upload an image.
    1. Recommended Image size:  
      1. Minimum image dimensions: 520px width x 555px height.
      2. Recommended Size: 1080px width x 1110px height.
Screenshot of the 50/50 component editor showing the component header, text, and image settings

Add Text Area Content

  1. Eyebrow (optional): the supporting text above the main heading within the 50/50 content area.
  2. Heading: the title that appears as the heading for each item
  3. Text: enter the body content for the 50/50 item.
Screenshot of 50/50 component highlighting where to enter eyebrow, heading, text

Adding Links

This component can accommodate up to 5 buttons. Each button can link to a web page (internal or external), email address, or file to download.

Example of the button to add links/buttons to the 50/50 component

To Add a Link/Email

  1. Click Button: Link to URL/Email.
  2. In the URL field, 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.
  3. Enter the Link text.
    1. This is the text that will display on the button. Use clear, specific text for good user experience and web accessibility.
  4. Attributes:
    1. Target: Select New window (_blank) for external links only. Otherwise, leave this set to - None -.
    2. ARIA Label: For web accessibility, enter clear, specific text only if your link text is generic (for example, “Learn More.”) 
      1. As a rule, you should always use clear, specific link text and leave the ARIA Label field blank.

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.

Screenshot of Grid Layout editor showcasing the add a link settings

To Add a Link to Download a File

  1. Click the dropdown arrow and select Button: Download File.
  2. Enter the Button Text.
    1. This is the text that will display on the button. Use clear, specific text for good user experience and web accessibility.
  3. Click Add media to upload or select the file from the media library that you would like to link to.
Screenshot of 50/50 editor showing how to create a link to a file to download

Select Component Colors and Save

  1. Select the Background Color: This is the section background color. It is the color that displays behind the image / text layout. It’s recommended to maintain a consistent background color for 50/50 components placed next to each other.  
  2. Select the Content Color: The content color is the background of the text content. It is recommended to maintain a consistent content color for 50/50 components placed next to each other.
  3. Click Save to complete the component
Screenshot of 50/50 component to highlight background color and content color selection options

User Experience Best Practices

  • Limit text length: Keep content within 1–2 paragraphs or about 8 sentences to prevent layout issues. For longer content, consider breaking it into multiple 50/50 blocks or using a different component.
  • Alternate 50/50 layouts: When using multiple 50/50 blocks, it’s generally recommended to alternate between left- and right-aligned layouts. This helps break up the visual flow of the page and encourages users to refocus on each new section of content.
  • Use consistent background and content color: It is recommended to maintain a consistent background and content color for 50/50 components placed next to each other.
Back to Components & Layouts