Structured List

Usage

Structured List builds feature-style lists beyond what the core WordPress List block offers. Each item has a Headline and Body, with optional leading content depending on card type — plain text, auto-numbered counters, an icon image, or a custom Runner label.

Use it for service highlights, feature grids, process summaries, or any content that reads better as labeled rows than bullet points.

The block inserts with three List Card children by default. Add or remove items with the Add List Item control (list layout) or the block inserter (grid layout).

Parent and child blocks

The Structured List parent (ds/structured-list) holds one or more List Card children (ds/structured-list-item).

Select Structured List for layout, style, and shared typography. Select an individual List Card for that item's type, headline, body, icon, runner text, or link.

Parent settings pass to every child through block context, so changing Style or Headline Style updates all cards at once.

Layout (parent)

• Layout — List (default) stacks items vertically, or Grid displays items in columns
• Columns — when Layout is Grid, choose 2 (default), 3, 4, or 5 items per row. The grid wraps responsively on smaller screens.

In list layout, an Add List Item button appears below the block when the parent is selected.

Style (parent)

Choose a preset for every card. Focus the parent block — not an individual card — before changing Style:

• Outlined (default) — subtle bordered cards with spacing between items
• Cards — distinct rounded background on each item
• Compact — stacked rows separated by bottom borders inside one container
• Separator — minimal rows with vertical padding, no outer border
• Primary — left accent border in the primary palette color
• Naked — no background or border padding; content only

Typography (parent)

Shared across all list cards:

• Headline Style — Customizer typography preset for item titles (default <h4> appearance). This controls how headlines look visually; the saved HTML tag for titles is always h4.
• Text Size — Regular (default) or Small for body copy under each headline
• Icon Size — scale for icon images on Icon cards (1–40)
• Runner Size — width of the leading column for Numbered, Icon, and Runner cards in em (0–6; default 2.5)
• Runner Style — Customizer typography preset for numbered counters and Runner text (default <h3> appearance). Saved HTML for runners uses h3.

Toggle Text Size in the block toolbar switches body text between Regular and Small without opening the sidebar.

Card types (child)

Select a List Card and open the List Card sidebar panel to set Type:

• Default — headline and body only; no leading column
• Numbered — auto-incrementing counter in the leading column. Only Numbered cards are counted — other card types in the list are ignored when assigning numbers
• Icon — image in the leading column. Click the placeholder in the editor or use Choose Icon in the sidebar. SVG icons are recommended for sharp scaling at any size
• Runner — free-form text in the leading column (letters, symbols, short labels). Edit inline or in the Runner sidebar field. The runner column expands to fit its content

Every card type also supports:

• Headline — item title, edited inline or in the sidebar
• Body — paragraph and list inner blocks below the headline (default template includes one paragraph)
• Link URL — when set, the entire card content becomes a clickable link

Block width

Structured List supports Wide and Full alignment from the block toolbar.

Tips

• Set Style, Headline Style, and Text Size on the parent first, then configure individual card types and content.
• Use Numbered when order matters and you want automatic sequence numbers. Use Runner when you need custom labels (A, B, C or 01, Step 1, etc.).
• Mixing card types in one list works — numbered items only count other numbered items when determining their number.
• Grid layout suits feature comparisons; List layout reads better for longer descriptions.
• For connected step circles with connector lines, use Step by Step instead. For dated events, consider Timeline.