Core Component Sandbox

Welcome to the Layout Core training page. Each section below explains one bpn component, shows a live example, and suggests prop changes you can try in the block sidebar.You are editing in the WordPress block editor (Gutenberg). Click a component block, then use the panel on the right to change settings. To add blocks inside a component, open List View (left sidebar), expand the component, select the slot row (Content, Column 1, etc.), and click +.

bpn Section — page bands (background, padding, width)
bpn Section Media — photo or video hero bands
bpn Content Header — titles, body text, buttons (Page → Section → Card → Item heading levels)
bpn Grid — columns with equal or weighted ratios (1/3 + 2/3, etc.)
bpn Flex — flexible rows that can stack on mobile
bpn Card — boxed chrome plus Content Gap for stacked blocks inside one card

Typical page band:
  bpn Section
    └── bpn Content Header          ← standalone copy block
    └── bpn Grid OR bpn Flex
          └── bpn Card (optional)
                └── bpn Content Header  ← copy inside a tile

Program-style pathway card:
  bpn Card (Content Gap)
    └── bpn Content Header (Card Title)
    └── bpn Grid → smaller item tiles (Item Title)

Try it: Scroll through each numbered section. Select the live example block and explore the prop groups in the right-hand panel.

Component 1 of 6

bpn Section — your page band

A Section is a full-width band on the page. It replaces the old Group block pattern. It owns spacing, background color, and the container that holds your content.Drop Content Headers, Grids, or Flex layouts directly into the Content slot — no extra wrapper blocks needed.

Background → neutral bands (light, dark) OR Use Surface Background for textured presets
Layout → Vertical Padding, Content Width, Space Between Items
One Content slot — use List View to insert child blocks

bpn Section
  └── Content slot
        └── (your blocks here)

Try it: Select the live Section below → Background → try Light band or Dark band. Then Layout → change Vertical Padding to Compact or Spacious.

Content Header lives here directly

No Grid or Flex required for simple bands

This Content Header sits straight in the Section content slot. Use this pattern for intros, CTAs, and single-column copy.

Example link

Dark bands + Content Header color mode

When a Section uses a dark background, set the nested Content Header Layout → Color Mode to Dark so text stays readable.

Try it: Select the dark Section below → try Background Style Ultra dark. Select the Content Header inside → Layout → toggle Color Mode Light vs Dark.

Annual impact

Together we serve our neighbors

Color Mode is set to Dark for this example.

Read the report

Component 2 of 6

bpn Section Media — photo & video heroes

Section Media is for bands with a background image or video and text on top. Use Overlay presets to control how dark the photo appears behind your copy.Content Header copy on photo bands uses light text automatically — you usually do not need Color Mode → Dark here.

Media → Image URL or Video URL, Overlay preset (overlay-1 … overlay-5)
Layout → Min Height (compact, standard, tall, full viewport), Vertical Align
Content slot — same List View workflow as bpn Section

Try it: Select the hero below → Media → try a different Overlay. Layout → Min Height → Tall or Full viewport.

Center for Food Action

Supporting Northern New Jersey neighbors

Hero pattern: eyebrow title + large sub-heading on a photo band.

Our programs

Component 3 of 6

bpn Content Header — copy, headings & buttons

The Content Header replaces hand-built heading stacks. It can live directly in a Section (see above) or inside a Card column in a Grid or Flex.Header group controls title + optional sub-heading. Toggle Add Body Text and Add Buttons to show more regions.

Title Visual Style — Eyebrow, Pill, Page / Section / Card / Item Title
SEO H-level Tag — Page (h1) → Section (h2) → Card (h3) → Item (h4) for accessibility
Layout → Center Align, Color Mode (for dark parent bands), Gap between regions

Try it: Select the example below → Header → try Item Title visual style with Item Title (h4) SEO. Toggle Add Body Text off and on.

Weekend Snack Packs

Nutrition support for children every weekend

Turn on Large Body Text in the panel to emphasize supporting copy like this paragraph.

Learn more Volunteer

Component 4 of 6

bpn Grid — equal columns

Grid creates 2, 3, or 4 columns with fixed slots (Column 1, Column 2, …). Each column is a drop zone for Cards, Content Headers, or other blocks.In List View: expand bpn Grid → select Column 2 → click + to insert a block.

Columns — 2, 3, or 4 (extra column slots appear when you increase this)
Column Ratio — Equal, One third (narrow + wide), Three one, Small large, Large small
Gap — tight, normal, spacious between columns
Vertical Align — top, center, bottom, stretch (useful with Cards of different heights)

bpn Section
  └── bpn Grid
        ├── Column 1 → bpn Card → bpn Content Header
        ├── Column 2 → …
        └── Column 3 → …

Try it: Select the Grid below → Layout → Columns → try 2 vs 3. Gap → Spacious. Vertical Align → Center.

How We Support Our Community

Emergency Food

Weekly groceries for families in need.

Learn more

Utility Assistance

Help keeping the lights and heat on.

Learn more

Homelessness Prevention

Resources to stay housed.

Learn more

Weighted columns — one third + two thirds

Not every row needs equal columns. Column Ratio → One third gives a narrow column (~1/3) and a wide column (~2/3). CFA program pages use this for Donate beside a wider Participate or Assemble card.Combine with bpn Card in each column for pathway tiles.

Column Ratio → One third — narrow column 1, wide column 2
Column Ratio → Three one — wide column 1, narrow column 2
Vertical Align → Stretch keeps Card heights matched in the row

bpn Section
  └── bpn Grid (Column Ratio: One third)
        ├── Column 1 → bpn Card (narrow pathway)
        └── Column 2 → bpn Card (wide pathway)

Try it: Select the Grid below → Layout → Column Ratio → try Three one or Large small. Compare to Equal columns in section 04.

Two ways to help

This row uses Column Ratio → One third. The donate card is narrow; the assemble card is wide — same pattern as program pages.

1. Donate

Support the program with a financial gift.

Donate today

2. Assemble packs

Gather supplies with your group and drop off completed packs at your nearest CFA site.

Component 5 of 6

bpn Flex — rows & mobile stack

Flex lays out items in a row (or column). Use it when columns are not equal width or when you want items to wrap naturally.Mobile Layout → Stack on mobile forces a single column below 992px — great for icon rows that should stack on phones.

Items — 2, 3, or 4 item slots
Justify — start, center, end, space-between (horizontal distribution)
Align — stretch items to equal height in the row

Try it: Select the Flex below → Mobile Layout → Stack on mobile, then preview at phone width. Try Justify → Center.

Ways You Can Help

Every contribution makes a difference

Donate

Volunteer

Give Food

Component 6 of 6

bpn Card — padding, border & shadow

Card is chrome around slot content — padding, border, shadow, background, and Content Gap between stacked blocks.Put one Content Header in a card for simple tiles, or stack a headline plus a nested Grid (program pathway pattern). Compare the two cards below: flat minimal vs primary background with border.

Style → Padding, Add Border, Shadow, Background, Fill Height
Content Gap — tight / normal / spacious between blocks inside the card (e.g. headline + grid)
Content slot — insert Content Header, Grid, Flex, or other blocks via List View

Try it: Select each Card → Style → try Content Gap Spacious. Shadow, Background, Add Border on/off.

Flat minimal

Card Style props control the box around this copy.

Primary boxed

Card Style props control the box around this copy.

Card as a layout container

Think of a bpn Card like a boxed div: stack multiple blocks in the content slot and set Content Gap to space them. Use Card Title (h3) for the pathway headline and Item Title (h4) for nested tiles inside the card.This pattern appears on CFA program pages (donate / participate / host resources).

Card Style → Content Gap controls headline ↔ nested grid spacing
Nested Grid inside Card → item tiles with Item Title (h4) + Item Title visual
List View: expand Card → content slot → insert blocks in order

bpn Card (Content Gap: normal)
  └── bpn Content Header (Card Title, h3)
  └── bpn Grid
        ├── Column 1 → bpn Card → CH (Item Title, h4)
        └── Column 2 → bpn Card → CH (Item Title, h4)

Try it: Select the outer Card → Style → Content Gap → Tight vs Spacious. Select nested item headers → Item Title (h4) SEO + visual.

3. Host your own packing day

Choose the option that fits your group size. Item titles below use Item Title (h4) — the fourth level under Page → Section → Card.

Under 500 packs

DIY with CFA instructions and supply links.

500+ packs

Full-service event in Bergen County — CFA manages logistics.

Practice inserting blocks in Gutenberg

The empty Card in Column 1 below is intentional. This is your practice area.Steps: (1) Open List View in the left sidebar. (2) Expand bpn Grid — GB practice lab. (3) Expand Column 1. (4) Select the empty Card. (5) Click + and choose bpn Content Header. (6) Fill in title and button props.

Slots only accept blocks when the parent row is selected in List View
Drag-and-drop into nested slots is unreliable — prefer List View +
Content Header can go in a Section, Grid column, Flex item, or Card

Try it: Add your own Content Header to the empty Card in Column 1, then add a second block to Column 2.

Your turn in column 1

Duplicate this pattern in the empty card.

Got it

Putting it together

The band below combines Section (surface background) → Grid → Card → Content Header. This is the most common multi-column pattern on CFA pages.When you rebuild a page, work top to bottom: one Section per visual band, then layout (Grid or Flex), then copy (Content Header).

Try it: Select the Section below → Background → toggle Use Surface Background and try Surface Preset Paper texture vs Brand gradient.