A tile consists of a background graphic or photo with a text overlay with a single link.
Tile width is determined by the width of the parent container (flex/grid column while the height is determined by the aspect ratio you choose. Tiles can be assigned the following aspect ratios: 16:9, 5:3, 6:4 (default), and 1:1.
Background Images Code
The following examples show how the same image can be applied to different aspect ratios with differing results. The example image is cropped at 400x267, a 6:4 ratio.
Image Effects Code
Several effects can be applied to the tile image.
Tile Text - Hide/Reveal Code
.tile-hide-reveal to the tile-text container makes the text transparent by default and is revealed on hover, active and focus states.