Use tiles to arrange components or other content in columns or a grid.

---

Adding Tiles

On sites using the older Visual Editor, tiles can be added by choosing the Tiles pictograph () from the editor’s toolbar. Use the editor dialogue to add content and adjust options. To edit the tiles later, double-click the tile preview to show the editor dialogue again.

On sites using the either the Block Editor or the older Visual Editor, tiles can also be added using HTML (see the below documentation).

Using HTML

Tiles are implemented with the class cl-tiles.

Tiles support grids with two, three, four, or five tiles in width. The number of tiles across the page can be controled by the classes halves, thirds, fourths, and fifths, respecively. Tile grids can contain an infinite number of tiles.

For each of the examples below, note how tiles wrap when the size of the browser is adjusted. The number of tiles across will change depending on how much space there is, up to the maximum set by the class.

Two tiles across

Three tiles across

Four tiles across

Five tiles across

Square tiles

By default, tiles adjust to the size of their content. To override this format and force tiles be square, and crop their content accordingly, add the class square

Compact tiles

By default, each tile has small left and right margins that separate it from surrounding tiles. To eliminate these margins and force tiles to but up against one another, add the class compact

Both default tiles and square tiles can be compact. Note that tiles never have bottom margins; instead, they rely on inner content to provide apparent vertical separation.

Preparing tiles for animation

In some cases, especially when tiles are dynamically generated, the display of each tile can be delayed via the generating script. To animate this, add the class reveal