Navigational tile

You can have any number of these tiles on a single web page. They will display in a grid on a desktop screen or form a single column on a mobile phone view. 

Use a tile to highlight important or timely information, or to lead users to content that may be deep within your navigational structure. 

  • If you have a single link in a tile, the entire tile: image (if used), heading and text will act as a link.
  • If you have multiple links in a tile, you should use a bulleted list to format these.



  • inserts an icon - this should be in SVG format


  • Changes the tile background colour


  • Changes the width of the tile in the grid

Hide on small screen

  • When selected the tile will not display on small screens

50:50 at full width

  • When a tile is full width and has an image the tile is split in the middle when this is selected 

Image right at full width

  • When a tile is full width and has an image the image is moved to the right when this is selected

t4 shared library

The shared library in the t4 media library has a selection of landscape images available for you to use for the different navigation tiles or as a splash image on a page:‌

A screenshot of the t4 shared library media folder