Canvas Docs

Link Tiles

A grid of icon-and-label tiles, each linking to a page. Tiles pointing at a page that does not exist are left out. It is shown in the block inserter as Canvas Link Tiles and registered as canvas-core/link-tiles.

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

The Link Tiles 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

  • TilesDefaulta preset list of 3 rows

    Each tile is one link. A tile whose URL is a {page:slug} token for a page that does not exist is left out of the grid.

    Each row of Tiles takes:

    • LabelDefaultEmpty

      Caption under this tile icon, naming where the tile goes.

    • IconDefaultEmpty

      Glyph shown above the label.

    • URLDefaultEmpty

      A link, or a {page:slug} / {support} / {docs} token. A token that resolves to nothing drops the tile.

    • Screen-Reader SuffixDefaultEmpty

      Appended to the caption for assistive technology only.

    • GlyphDefaultIcon

      What this tile shows above its caption: the icon chosen above, or an animated loader in its place.

      ChoicesIconBounce Loader

    • Loader Box CSS ClassesDefaultposition-relative fs-2

      Classes on the box the loader is centred in.

    • Loader ColourDefaultvar(--cnvs-contrast-900)

      Colour of the loader dots.

    • Open in a New TabDefaultOff

      Opens this tile in a new browser tab. Use it for a destination that leaves your site.

  • Caption Element

    Element every tile caption is rendered as. A plain container keeps a long grid of tiles out of the page outline.

Style

  • Grid CSS ClassesDefaultrow row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 align-items-stretch g-3 text-center

    Bootstrap row classes: how many tiles sit side by side at each breakpoint.

  • Column CSS ClassesDefaultcol

    Classes on each tile’s grid column.

  • Inner Box CSS ClassesDefaultEmpty

    Adds a box between the column and the link. Empty means the link is the column’s only child.

  • Link CSS ClassesDefaultd-block grid-inner text-contrast-900 h-text-color all-ts h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded

    Classes on the tile link itself: its padding, border and hover behaviour.

  • Link Inline StyleDefaultbackground-color: var(--cnvs-contrast-bg-offset);

    Inline style on each tile link, for a fill that has no utility class.

  • Icon CSS ClassesDefaultcnvs-link-tile-icon

    Classes added to every tile icon. cnvs-link-tile-icon is the block’s own size hook.

  • Caption CSS ClassesDefaultfs-6 fw-medium mt-3 mb-0

    Classes on each tile’s caption element.

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?