Skip to content

50-50 Panel

The 50-50 Panel block provides a way to set multiple, full-size 50-50 blocks that seamlessly scroll into one another, vertically. 

In this block, the media area takes up the full vertical real estate of the page while the text area continues to scroll. Once the reader scrolls a panel’s text area above the screen, the next panel’s media and text area will appear. If the reader scrolls back up, then the block will fade back into the previous panel. 

Usage

The 50-50 Panel block provides a way to stack multiple 50-50 elements atop one another. This can be an impactful way to list several full-screen images or calls to action in a row. 

Because each panel can have a unique ID, it’s much easier to link your readers to specific panels. If you find yourself using multiple 50-50 Blocks in a row, consider using this block instead for easier navigation.

Properties

The 50-50 Panel block itself has no properties, but each panel has the following:

  • Media type:  Determines the type of content presented in the media area. This property determines several other options within this block. For more information see the Media assets section of the Blocks overview.
  • Label: A small piece of descriptive text, stylized in all caps, that appears at the very top of the text area.
  • Header: A small piece of header text, stylized in all caps, that appears at the very top of the text area. Typically used to provide a primary description of the block's intent.
  • Description: A longer piece of descriptive text, providing more details about the asset in the media area, a call to action, or some other form of text.
  • Buttons: One or more buttons that can navigate users to either an entry or URL. For more information on configuring buttons, see the Buttons section of Blocks overview.
  • ID: Determines the ID of this panel’s section in the web page. For more information on how IDs function, see the Element IDs section of the Blocks overview.

Examples

Single 50-50 Panel block with 3 panels

  • First Panel

  • Media: A background image displaying several people at a table

  • Label: This is the 50-50 Panel's label
  • Heading: This is the 50-50 Panel's heading
  • Description: This is the 50-50 Panel's description
  • Buttons: A single button with the label Button

  • Second Panel

  • Media: A background video displaying several people in a park

  • Label: This is the second panel in a 50-50 Panel
  • Heading: This is the second panel in a 50-50 Panel
  • Description: None
  • Buttons: None

  • Third Panel

  • Media: An image with text

  • Label: None
  • Heading: This is the third panel
  • Description: None
  • Buttons: None