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
Tile with icon
Example of a tile with an icon