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:
Content Grid
What it does: A flexible multi-column grid where each card can carry a title, kicker label, body text, image, and link(s). The grid supports vertical (stacked image/text) or horizontal (side-by-side) card layouts, plus several display options like full-bleed cards, grey or blue card backgrounds, and layout width constraints.
When to use it: Feature comparisons, service overviews, program highlights, or any section with a set of parallel items.
How to Add
- Open the page in Edit mode.
- Click Add Component → Content Grid.
Top-Level Fields
| Field Label | What to Enter | Required? | Notes |
|---|---|---|---|
| Title | Section heading | No | — |
| Subtitle | Supporting subtitle | No | — |
| Description | Intro paragraph above the grid | No | Supports rich text |
| Display | Vertical or Horizontal card layout | Yes | Default: Vertical |
| Grid Size | How many columns: 1 Across, 2 Across, 3 Across, 4 Across, 2 Across (60/40), 2 Across (40/60) | Yes | Default: 2 Across |
| Grid Items | The individual cards (see below) | No | — |
| Footer Link | URL + label for a section-level CTA | No | — |
| Alternate Background | Enable grey background behind the section | No | — |
| Center & Constrain Layout | Caps layout at 1280px wide | No | — |
| Full Bleed Cards | Text overlays directly on the card image | No | — |
| Card Option | Grey card backgrounds | No | — |
| Alternative Card Option | Branded light-blue card backgrounds | No | — |
| Feature first item | Enlarges the first card (4 Across only, ≤5 items) | No | — |
| Remove Top Border? | Removes the top separator line | No | — |
| Reduce Whitespace (Padding)? | Tightens vertical padding | No | — |
| Reduce Whitespace (Margin)? | Tightens vertical margin | No | — |
Grid Item Fields (per card)
| Field Label | What to Enter | Required? | Notes |
|---|---|---|---|
| Title | Card heading | No | — |
| Kicker | Short label above the title (e.g., "Press Release", "Event") | No | — |
| Body | Card body text | No | Keep to 1–2 sentences |
| Image | Upload or select from media library; include alt text | No | — |
| Link(s) | URL + label | No | — |
| Links Display | How the link renders | No | Default: links |
How to Update
- Edit the page and open the Content Grid component.
- Click Add Item to add a new card, or click an existing card row to edit it.
- Remove cards with ×, reorder with drag handles.
- Update top-level layout options (Grid Size, Display) if the number of cards has changed significantly.
- Save the page.
💡 Tip: Avoid leaving a single orphaned card in the last row of a multi-column grid. Adjust Grid Size or item count so rows are balanced.