Tiles

Use tiles when you need two to four equal-width columns in one row.

AEM publisher guidelines

View the component in Figma

Live demo

Visitors compare parallel items (for example three highlights or four quick links) in a balanced row. Content authors choose how many tiles and how they stack on tablet and mobile. Visual designers pair tiles with column control when the row needs to sit inside a narrower page column.

Behaviour

  • Tile count and stack options drive Bootstrap column classes.
  • Gutter and double margin options change spacing between tiles.

Anatomy

  1. Fluid container with a row.
  2. Columns, each wrapping a parsys.

Tiles (placeholder)

Replace with two-, three-, and four-tile rows.

Content guidelines

  • Keep tile content parallel (same component types or similar length).
  • Dialog fields for counts and stacking are listed under Code.

Best practices

Do

  • Test mobile stack order; columns follow DOM order.

Don't

  • Don't nest many tile rows back-to-back without section spacing from Grid container.

When to use

  • Equal promos or feature columns that share height expectations within the row.
  • Combined with column control when the page grid needs a narrow centre column.

When not to use

  • Masonry or unequal card heights across many items; use Card deck (type=rows or columns per design).
  • Carousels; use Carousel (multi-item) or Carousel for sliding content.

CRXDE Lite query

Use this query in CRXDE Lite to find instances of this component.

/jcr:root/content//*[@sling:resourceType = 'concordia/components/tiles/tiles.jsp']

Technical behaviour

tiles.jsp builds a container-fluid with a Bootstrap row. Column classes follow col- / col-sm- / col-md- from stack_mobile, stack_tablet, and number (tile count). In edit mode the paragraph toolbar shows a label such as “{n} tiles”. The dialog notes that Tiles is intended on top of column control when design calls for nested width (for example 25% / 50% / 25% with doubled margin).

Authoring fields

Field Purpose
Number of tiles 2 to 4; drives col-md-{12/n}.
No gutter Removes horizontal gutter between tiles.
Double margin Extra spacing (dialog describes pairing with column layouts).
Stack (tablet / mobile) Column spans at sm and default breakpoints.

Instances in the codebase

Location Notes
apps/concordia/components/tiles/tiles.jsp Implementation.
apps/concordia/components/tiles/dialog.xml Authoring fields.
Item Location
Component apps/concordia/components/tiles/tiles.jsp