You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Current »

Also known as: 40/60 layout, 66/33 layout, 45/65, 50/50, text next to card

Description

A layout pattern that separates the section in two parts, with one being 60% of the width and the other 40% of the width. (%s may vary slightly.)



Design

Desktop

Mobile (stacked*)

*6/5/26 future enhancement suggestion: add code to card component where the margin above it is optional (the spacing looks a bit big currently)


Use When

You have something you want to call out but it won't take up a full row on its own, like a single card, a bulleted list, or a single social embed. Or you want to put text next to a photo.


Editorial Guidelines

Follow our general Web Copy General Guidelines in addition to the following:

  1. Generally the copy needed for the 60% side will be an h2 and short piece of lead text, as seen in the screenshots. Follow the general guidelines for those.
  2. If using a card in the 40% side, keep copy short. Can contain content like a bulleted list with 3 bullets or a ranking.


Implementation

  1. Add WP Group block. Option to add a background color. If using a background color, add class "py-5" to the Additional CSS Classes field so there is top and bottom spacing within the background color.
  2. Within Group block, add WP Columns block. In the right menu, set columns to two and make sure "stacked on mobile" is turned on.
  3. Set the % width of the individual columns. There is wiggle room based on how it looks, but use something around 60%/40% or 55%/45%.
  4. For the column on the left, add class "pe-lg-5" to the Additional CSS Classes field so there is spacing between the columns on large screens.
  5. Add the blocks you want to use within each column. Often a WP Heading and WP paragraph on the 60% side and then either a photo or a card on the 40% side.



  • No labels