Structured List
Structured List
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.
List
Grid
Style
The Structured List parent block provides different style presets for your block, including the outlined, cards, 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.
Outlined
Cards
Compact
Separator
Primary
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.
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.
Text Cards
The simplest cards, these contain just a Headline and a Body.
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.
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.
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.
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.