Canvas Docs

Circle Stack

A horizontal stack of circular avatars, icons, or text badges: ideal for team teasers, social proof, and follower counts. It is shown in the block inserter as Canvas Circle Stack and registered as canvas-core/circle-stack.

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

The Circle Stack 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

  • Circle ItemsDefaultEmpty

    The circles in the stack, in the order they appear. Each overlaps the one before it, which is how a row of faces or logos reads as a group.

    Each row of Circle Items takes:

    • TypeDefaultImage

      What this circle holds: a picture, an icon, or a short piece of text such as a set of initials or a count of the people not shown.

      ChoicesImageIconText

    • ImageDefault0

      The picture inside this circle, chosen from your media library. It is cropped to a circle by the design.

    • Image Alt TextDefaultEmpty

      Overrides the media library alt text for this circle only. Leave blank to use the attachment’s own alt text.

    • IconDefaultEmpty

      The icon inside this circle.

    • TextDefaultEmpty

      The wording inside this circle. Keep it to two or three characters, since a circle has little room.

    • Link URLDefaultEmpty

      Where clicking this circle takes the visitor. Leave it empty for a circle that is not clickable.

    • Open in New TabDefaultOff

      Opens the link in a new browser tab, leaving your page behind it.

    • Background ClassDefaultEmpty

      The palette colour filling this circle, named as a class such as bg-primary. It overrides the Default BG Color below.

    • Text Color ClassDefaultEmpty

      The colour of the wording or icon in this circle, named as a class. It overrides the Default Text Color below.

Settings

  • Size (CSS value)DefaultEmpty

    Diameter of each circle, e.g. 3rem or 48px. Leave blank to use the theme default.

  • Border SizeDefaultEmpty

    Border width applied to each circle, e.g. 2px. Leave blank for no border.

  • Border ColorDefaultEmpty

    The colour of that ring, written as a colour value. Matching it to the background behind the stack is what makes the circles look cut out of the page.

  • Default BG ColorDefaultEmpty

    Fallback background color for circles that have no bg_class set.

  • Default Text ColorDefaultEmpty

    Fallback text/icon color for circles that have no text_class set.

  • AlignmentDefaultCenter

    Where the row of circles sits across the width available to it.

    ChoicesLeftCenterRight

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, Clients, Data Tables, Google Map.

Was this page helpful?