Canvas Docs

Icon Lists

Icon list with repeater items. Each item has an icon (CSS class), text label, and optional link. Supports default, large, and extra-large size variants. It is shown in the block inserter as Canvas Icon List and registered as canvas-core/icon-list.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Icon Lists settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Items

  • Default IconDefaultbi bi-check-lg

    Applied to items that have no per-item icon override.

  • ItemsDefaultEmpty

    The rows of the list, in the order given here. Nothing is shown until you add at least one.

    Each row of Items takes:

    • TextDefaultList item

      Wording of this row.

    • Custom Icon (optional)DefaultEmpty

      Icon override, e.g. bi bi-star. Leave empty to use the default icon.

    • Row Image (optional)DefaultEmpty

      Image shown before the row text: a flag, a brand mark, an avatar. Replaces the icon when both are set.

    • Row Image Alt TextDefaultEmpty

      Describes that picture for screen readers. Leave it empty to use the description stored on the media item.

      Shown when Row Image (optional) is set

    • Row Image ClassesDefaultEmpty

      Classes on that picture, for its size and shape in place of the row icon.

      Shown when Row Image (optional) is set

    • Row ValueDefaultEmpty

      A second piece of text set apart at the end of the row: the price, duration or figure a label/value list puts opposite its label.

    • Row Value ClassesDefaultvalue

      Classes on the element holding that value.

    • Row Text ClassesDefaultEmpty

      Classes on the span that wraps this row's text: spacing between the icon and the words.

    • Row Link ClassesDefaultEmpty

      Classes on this row's link: a muted "see all" row, a brand hover colour.

    • Link URLDefaultEmpty

      Makes this row a link to the address given. Leave it empty for a plain row.

    • Link TargetDefaultEmpty

      Whether the row opens in the same tab or a new one. Use a new tab for a destination that leaves your site.

      ChoicesSame Window (empty)New Window

    • Link Inner ElementDefaultEmpty

      Wraps this row's link text in an element the link can animate or fill, which is how a sitemap column and a menu row are written.

      ChoicesNone - text directly in the link (empty)Div - a block inside the linkShown when Link URL is set

    • Emphasis Around the LinkDefaultEmpty

      Wraps this row's link in an emphasis element, the way a question index lists its entries.

      ChoicesNone (empty)StrongEmphasisShown when Link URL is set

    • Smooth-Scroll TargetDefaultEmpty

      A section further down the same page for this row to glide to, named by its id. The row keeps its own address as well, so it still works when a visitor opens it in a new tab.

    • LevelDefaultLevel 1

      Level decides the nesting: a Level 2 row becomes a child list inside the Level 1 row above it.

      ChoicesLevel 1Level 2Level 3

    • Link Wraps the Icon TooDefaultOff

      On: the icon sits inside the link, so the whole row is clickable, how a "3 Comments" meta link is written. Needs a Link URL.

      Shown when Link URL is set

    • Item ClassesDefaultEmpty

      Utility classes applied to this row's : how a list gets tinted, boxed or bordered rows.

    • Links RunDefaultEmpty

      Several links in ONE row, joined by the separator below and rendered after the icon: how a post meta bar lists its categories. Leave empty for an ordinary row.

    • Links SeparatorDefaultComma - News, Projects

      What joins the links of the run above. Stored as a token, not literal text, because a text field cannot keep the surrounding spaces a separator needs.

      ChoicesComma - NewsProjectsSlash - News / ProjectsMiddot - News · ProjectsPipe - News | ProjectsSpace - News ProjectsNone - NewsProjectsShown when Links Run is set

  • Feature List AttributeDefaultEmpty

    On a WooCommerce product, the name of a product attribute (Product data → Attributes) whose values are added to this list, one row each, after the rows above. Leave empty for a list of typed rows only.

  • Feature List LengthDefault0

    Show at most this many values from that attribute, for a narrow column with room for fewer. 0 shows every value the product holds.

    Shown when Feature List Attribute is set

Settings

  • Wrap Text in a SpanDefaultOn

    On: the text is a flex child that fills the row. Off: the text follows the icon as a bare node, what a compact icon row wants.

  • List StyleDefaultCanvas Icon List

    Choose None when the design supplies the whole look itself (a post meta row, a footer link list) and the list must render as a plain .

    ChoicesCanvas Icon ListNone - bare listno base class

  • SizeDefaultDefault

    How large the list is drawn, icons and text together.

    ChoicesDefaultLargeExtra Large

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Canvas: Alerts, Buttons, Code Highlight, Counters, Dividers, Dropcaps.

Was this page helpful?