Skip to main content

50/50 Panel Block

Overview

This layout provides a visually appealing balance between the main and secondary content, ensuring that neither overwhelms the other. It’s a common choice in web design for establishing a clear content hierarchy.

One 50% section is ideal for action items such as headlines and primary buttons, ensuring they are easily accessible to users.

The other 50% section can be used to display a brief introduction to the article content, which links to the detailed article page.

This 50/50 layout is responsive, adjusting seamlessly to different screen sizes to ensure a consistent user experience across devices.

Contents:

  • Block customization options
  • Block examples:
    • 50/50 block with no background color containing 1 info CTA block
    • 50/50 block with light blue background color containing 1 info CTA block
    • 50/50 block with no background color containing info CTA block and card(s)
    • 50/50 block with light blue background color containing info CTA block and card(s)
50/50 panel illustration

Block Customization Options

Element Required Options Available
Background Color N
  • Light blue
  • None
Main Content (50%) Y
  • Info CTA block
  • Content alignment
  • Left or right orientation
Content Area (50%) Y
  • Image
  • Left or right orientation
  • Cards

50/50 Block No Background with Info CTA Block

Eyebrow

Info CTA Block Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices tempus arcu, ut maximus risus. Aenean vel hendrerit eros. Suspendisse eu augue sem. Fusce sollicitudin tortor quis felis bibendum, ut tincidunt urna condimentum.

View All Blocks

Block above has these settings:

Element Option Selected
Background color None
Main Content 50%
  • Image
  • Left Orientation
Content Area 50%
  • Info CTA Block
  • Center Alignment



50/50 Block Light Blue Background & 1 Info CTA Block

young passenger sitting in the back of car

Info CTA Block Eyebrow

Info CTA Block Heading

In this variation of the Info CTA Block, the visitor sees a 50/50 panel with an image on one side and the Info CTA Block on the other side. Within the Info CTA Block, the visitor sees copy, one column of links, and two buttons that drive the visitor to take action. All elements are optional. Refer to Block Customization Options section for available block configurations.

Primary Secondary

Block above has these settings:

Element Option selected
Background color Light blue
Main Content 50%
  • Image
  • Right Orientation
Content Area 50%
  • Info CTA Block
    • One Column Links
  • Top Alignment
woman using laptop

Info CTA Block Eyebrow

Info CTA Block Heading

In this variation of the Info CTA Block, the visitor sees a 50/50 panel with an image on one side and the Info CTA Block on the other side. Within the Info CTA Block, the visitor sees copy, two columns of links, and two buttons that drive the visitor to take action. All elements are optional. Refer to Block Customization Options section for available block configurations.

Column One Heading

Column Two Heading

Primary Secondary

Block above has these settings:

Element Option selected
Background color Yes
Main Content 50%
  • Image
  • Right Orientation
Content Area 50%
  • Info CTA Block
    • 2 Column Links
  • Top Alignment

50/50 Block with Cards

Card 1 Heading

Card 2 Heading

Card 3 Heading

Card 4 Heading

Info CTA Block Eyebrow

Info CTA Block Heading

In this variation of the Info CTA Block, the visitor sees a 50/50 panel with Solid Cards on one side and the Info CTA Block on the other side. Within the Info CTA Block, add copy to provide context and drive the visitor to select one of the cards to dive further into the site. Use additional links within the content sparingly to avoid overwhelming the visitor with action choices. Refer to Block Customization Options section for available block configurations.

Block above has these settings:

Element Option selected
Background color No
Main Content 50%
  • Cards
Content Area 50%
  • Info CTA Block
  • Top Alignment