Close Menu
  1. Structured List

Structured List

Structured List block

Lists with header and body list items, complete with custom numbering or icon options.

Usage

Sometimes you need to create lists with more options that provided by the core List block provided by WordPress. The Structured List block is our answer. The Structured List is a parent block that can hold either Text, Icon, Numbered, or Runner cards.

Each card holds a Headline, rendered as an <h4> tag, and Body, rendered with a <p> tag. Each card (except the text card) also has an additional field depending on its type. For example, an Icon child card will have an icon.

Layouts

The Structured List parent block provides two different layout options for your content: List or Grid.

Structured List block

List

Grid

Style

The Structured List parent block provides different style presets for your block, including the outlinedcards, compact, separator, primary and naked options. In order to select a style, make sure you are focused on the parent block rather than the child cards.

Structured List block

Outlined

Structured List block with the cards style.

Cards

Structured List block with the compact style.

Compact

Structured List block with the separator style.

Separator

Structured List block with the primary style.

Primary

Structured List block with the naked style.

Naked

Headline Style & Runner Style

The Text Style (sometimes called Headline Style) option controls the display of your text.

The Text Style (sometimes called Headline Style) option controls the display of your link titles. It defaults to h4, style but can be changed to any of the other available options. These styles are defined in your Customizer under Styles. For more information on changing your styles visit Customizing Styles.

Show More Show Less

Card Types

The Structured List supports different types of child cards, including Text cards, Numbered cards, Icon cards, and Runner cards. When you create a new Structured List, it will appear populated with Numbered cards, but you can delete these and add whatever you’d like.

Structured List with Text cards.

Text Cards

The simplest cards, these contain just a Headline and a Body.

Structured List with icon cards.

Icon Cards

Icon cards provide an image field for you to choose an image. Clicking on the icon will bring up the media library. We recommend using an SVG.

In addition to the Headline and Body fields, when selected you will be able to set Icon Size in the block editor sidebar. We recommend setting all the cards in a structured list to be the same size.

The Structured List pictured has the cards style applied. This is the only Structured List child card that has settings in the block editor sidebar, so be careful not to miss it.

Structured List block

Numbered Cards

The default Numbered card will add a number to the left of the card.

The number is determined by the amount of Numbered cards the Structured List contains, and will ignore other types of cards. For example, if you were to take the example Structured List pictured on the left and inserted an Icon card between the second and last card, the last card would still read 3 as its number.

If you need greater control over this, you can just use the Runner card below.

Structured List with runner cards.

Runner Cards

Runner cards introduce a free-form text Runner field instead of the number field in the Numbered cards. To change these, simply click into the Runner and type.

The runner will expand to fit its content, so feel free to enter whatever you’d like. The runner is styled like an <h4> tag, but larger.

Add a card to a Structured List

Adding List Cards

To add a card to your Structured List block, click on the + icon that appears under the block when it is focused.

Structured List