Tile
Tile is used to display related content next to primary content.
Breakdown
Vertical
Tile is a variation of a card. It has padding of 27px around all edges regardless of the device it is viewed on. It primarily contains a H3 title and a primary button. Vertical tiles should not be used smaller than the width shown.
H3 title
Horizontal
Tile is a variation of a card. It has padding of 27px around all edges regardless of the device it is viewed on. It primarily contains a H3 title and a primary button.
H3 title
Usage
Tile should be placed adjacent to standard context and act as a call-to-action to another page or product. It should not span more than three columns of the grid in it's vertical form. Content inside a tile should be kept as short as possible and be SEO driven.
Colour
The background can be toggled between preset colours from the brand. If a product is tied to a specific background colour, the tile should match it for consistency and so the user can see the connection once they have interacted with it.
Anatomy
Vertical padding
Tile has a vertical padding of 27px.
Horizontal padding
Tile has a horizontal padding of 27px.
Vertical gap
Tile has a vertical gap of 4px between each element in the group.
Horizontal overlap
The horizontal tile overlap is achieved once the content is increased.
Fill
The horizontal tile fills the container it is placed into.
