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.
Options
Icon
- inserts an icon - this should be in SVG format
Background
- Changes the tile background colour
Span
- 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
Image sizes for navigational tiles
- Width: 700px
- Height: consistent [300px preferred]
We recommend that web images are kept under 100Kb in size. When you have a low file size which is web friendly it will not take a long time to load up when people browse your website.
Tile: list of links
You can also change the colour and width of the tile.
Tile with icon
Example of a tile with an icon
