Canvas Docs

Lists & Cards

Bootstrap-based list groups and cards with multiple styles, colors, and layouts. It is shown in the block inserter as Canvas Lists & Cards and registered as canvas-core/list-cards.

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

The Lists & Cards 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:

Content

  • VariantDefaultList Group

    Whether the rows stand on their own as a plain list, or sit inside a card with a heading above them. The rest of this panel changes with the choice.

    ChoicesList GroupCard

  • TitleDefaultEmpty

    Heading above the rows. Leave it empty for a list with no heading.

  • 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:

    • Item ContentDefaultEmpty

      What this row says. It can hold more than a single line, so a row can carry its own small heading and a caption under it.

    • Item ClassesDefaultEmpty

      Extra classes on this item (e.g. list-group-item-success, flex-column align-items-start).

    • DisabledDefaultOff

      Greys this row out and stops it being clicked, for an option that is not available.

    • BadgeDefaultEmpty

      Small pill at the end of this row, usually a count or a status word.

    • Badge ClassesDefaultEmpty

      Replaces the default "badge rounded-pill" presentation AND the flex layout it forces on the item: set it when the badge positions itself (e.g. "badge bg-secondary float-end").

    • Badge Inline StyleDefaultEmpty

      One-off styling for this badge, such as a small nudge so it lines up with the text beside it.

    • Badge ColorDefaultPrimary

      Colour of this badge, taken from the theme palette. None leaves it unstyled for your own classes.

      ChoicesNone (empty)PrimarySecondarySuccessInfoWarningDangerDark

    • Link URLDefaultEmpty

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

    • ActiveDefaultOff

      Highlights this row as the one a visitor is currently on.

Settings

  • List Container TagDefaultEmpty

    A list group whose items are all links is a div of anchors, not a list of them: Bootstrap ships it that way and an is not valid inside . Automatic picks ol for numbered, div when every item links, ul otherwise.

    ChoicesAutomatic (empty)Unordered list (ul)Ordered list (ol)Div (all-links list group)Shown when Variant is "List Group"

  • List StyleDefaultDefault

    How the rows are presented: boxed, borderless so they sit flush inside a card, numbered in order, or laid out in a single row.

    ChoicesDefaultFlush / No BorderNumberedHorizontalShown when Variant is "List Group"

  • Color VariantDefaultEmpty

    Tints every row in one colour from the theme palette, for a list that carries a status of its own.

    ChoicesDefault (empty)PrimarySecondarySuccessInfoWarningDangerLightDarkShown when Variant is "List Group"

  • Show Card HeaderDefaultOn

    Puts the title in a header bar at the top of the card, set off from the rows below it.

    Shown when Variant is "Card"

  • Show Card FooterDefaultOff

    Adds a bar under the rows, for a closing note or a link out of the card.

    Shown when Variant is "Card"

  • Card Footer TextDefaultEmpty

    What that closing bar says.

    Shown when Show Card Footer is on

  • Card ColorDefaultEmpty

    Background the whole card is drawn on, taken from the theme palette. The darker choices also switch the text to light.

    ChoicesDefault (empty)PrimarySecondarySuccessInfoWarningDangerDarkLightShown when Variant is "Card"

  • Card BorderDefaultEmpty

    Colour of the outline around the card, taken from the theme palette.

    ChoicesDefault (empty)PrimarySecondarySuccessInfoWarningDangerDarkShown when Variant is "Card"

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

Other blocks in Content: Background Video / Audio, Cascading Images, Charts, Circle Stack, Clients, Data Tables.

Was this page helpful?