Tile box

Desktop view

Mobile view

showing tiles on an extra small viewport

Layout - Regular

One tile with a 'badge'

Layout - Compact

One tile with a 'badge'

Layout - Link

Two columns

Live example

Variations - created examples

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.

How to use it

Tiles with link layout
The tilebox with link layout is primarily intended for use when multiple tiles need to be displayed. In this layout, the tiles appear stacked vertically like a list of links, with no spacing between them.

Crosslinks

Tile box component in AEM