Grid Content

Grid content allows you to embed one or more rows of up to four sections of content side-by-side. Allows you to have a title with an icon, a description and a link.

Examples

Carnation

carnation–branch__grid-content|690x326, 50%

Lily

lily–branch__grid-content|690x326, 50%

Rose

rose–branch__grid-content|690x217, 50%


Areas It Should Be Used:

  • Content Area
  • Bottom Area

How to Use Grid Content:

Note on Grid Content: This paragraph’s style will vary greatly depending on your theme. The docs outline how to use the fields.

admin__grid-content–add|669x500, 50%

First, choose Grid Content from the Paragraphs dropdown. You will then see a dropdown with four options under Style:

  • 2 items per row
  • 3 items per row
  • 4 items per row

Select a style to choose how wide you want each section to be; the more items per row, the narrower they will be.

// Examples

// 2 items per row w/ 2 Grid Columns

admin__grid-content–2-items|669x500, 50%

carnation–landing-page__grid-content–2-item-style|690x245, 50%


/// 3 items per row w/ 2 grid columns

admin__grid-content–3-items|451x500, 50% carnation–landing-page__grid-content-3-item-style|690x299, 50%

Next, you will see a button that says Add Grid Columns. This is where you will start adding your individual sections/cards.

For each item you add, you will have the following fields:

Note: If you add more items than your selected style, you will create a new row. For example:

  • 2 items per row style, 3 items added -> two rows of content
  • 3 items per row style, 5 items added -> two rows of content
  • 4 items per row style, 9 items added -> three rows of content

Content Types that Support Grid Content

Last modified September 14, 2022: fix: Rename to YMCA Website Services (fcf52dfd)