Section Grid

Step-by-Step Guide

If you have any further questions on proper setup, please fill out our Hive Service Request form and someone from the team will help you.

Page Examples:

For visuals of the component, please see the Storybook below:

• https://business.columbia.edu/storybook/section-grid

Section Grid

What it does: A layout section for Primary Lander pages. It adds an optional section heading, subheading, and description, then displays one or more nested components in a responsive grid (single column on smaller screens; two columns from 1200px and up). It is a container—the actual content comes from the child components you place in Section Grid Items.

When to use it: Long landing pages where you want two related blocks side by side (e.g. Link Grid + Statistics, Content Grid + Tabs, Lander Text + Curated Person List) under one shared section title.

When not to use it: When you only need a single full-width component—add that component directly to Page Components (Cards) instead of wrapping it in Section Grid.

How to add

1. Open the Primary Lander page in Edit mode.
2. Scroll to Page Components (field label in CMS: Cards).
3. Click Add Component (or Add Cards / paragraph add control).
4. Select Section Grid from the list.
5. Fill in the fields below, add items under Section Grid Items, then Save the page.

Fields to fill in

*The section can render with headings only, but editors normally add at least one Section Grid Item so the grid has content.

Allowed components (Section Grid Items)

You can nest these types inside Section Grid Items (not every site component—only what appears in the add dropdown):

Not allowed inside Section Grid Items: Another Section Grid (nested Section Grids are disabled), plus many other paragraph types (carousels, video blocks, anchor sections, etc.)—if it is not in the dropdown, it cannot be added here.

Tip: Articles Curated Featured Grid is added at the page level (Page Components / Cards), not inside Section Grid Items.

How to update

1. Edit the Primary Lander page.
2. Find the Section Grid block in Page Components and open Edit.
3. Change heading, subheading, or description as needed.
4. Under Section Grid Items, add, remove, or drag to reorder nested components—order and column placement follow the grid (two columns on wide viewports).
5. Expand Component Toolkit if you need to toggle Remove Top Border?
6. Save the component, then Save the page.

Editor notes / gotchas

• Publishing: Nested components must be enabled/published like any paragraph, or they may not appear on the front end.
• Visual spacing: Section Grid applies component-specific spacing overrides so nested grids, tabs, statistics, etc. align cleanly in the two-column layout—avoid extra manual spacing unless design asks for it.
• Headings: Only fill Section Grid Heading when you want a shared title for the whole row; nested components may have their own titles (e.g. Curated Content Grid title).
• Remove Top Border? Use when the top rule would double up with the section above.