Desktop view

showing tile box on a large viewport

Mobile view

showing tiles on an extra small viewport

Layout - Regular

One tile with a 'badge'
showing tile box on a large viewport

Layout - Compact

One tile with a 'badge'
showing tile box on a large viewport

Layout - Link

One tile with a 'badge'
showing tile box on a large viewport

How it works

  • If several (2-4) tiles are displayed next to each other and the height of the tiles should be the same, the tiles can be placed in a tile box. This gives all tiles the same height.
  • The background color of the tile container can be defined (standard or full bleed)
  • Three layouts are available
    • Regular
    • Compact
    • Link    
  • The tile component consists of a title and optional icon,  text and badge
    • If link has been set:
      • Internal arrow is placed on top-right of the tile and has animation on hover
      • Title is underlined on hover
      • Tile has a shadow and it is more pronounced on hover
      • Whole Tile is the clickable area
    • Color options
      • white
      • chalk
      • ivory
    • Badge can be displayed with two color variations: dark or gray
      • Make sure it's just a short and concise word
      • On the layout 'regular' badge is displayed in the top right corner. On the two other layouts it is within the tile.

Reference guide for publisher

Tile box component in AEM

AEM view tile box