Overlay Tile

Component overview

Overlay Tiles are linking elements that place text on top of an image with a colored overlay.

You need to include a call-to-action link: Overlay Tiles act as navigational elements and are required to have a link.
Consider the layout of your Overlay Tile component: Image Tile components offer different layout options (e.g., 2-tile, 3-tile, 4-tile). The image sizes will change based on the number of tiles you use. You should try to use either sets of three or sets of four. Think about this sizing when placing the component on a Section Front (more space) versus a Section Detail (less space).
Watch your text length: Long text in Overlay Tiles may cut-off when sizing to a mobile device. Be consistent and brief.
Text doesn't automatically line up in multiple Overlay Tiles: Text positioning adjusts based on the length of the headline and text descriptions. If you want text to align in multiple Overlay Tiles, you'll have to manage the length of the copy in each tile.
Use component positionining strategically: Both the text and tiles themselves may be positioned Left, Center or Right. Use this to your advantage based on the context of the page and the page schema.
There are multiple overlay colors: You may select from three overlay colors (Primary Blue, Silver and Black). Consider how you use these colors when building Overlay Tile components and use the image grayscale option to your advantage.
The Black color overlay is dark: Be mindful when using the Black color overlay as it is dark and can obscure images.
Images are required in Overlay Tiles: Do not use Overlay Tiles without images to create color blocks. Content Blocks are better suited for this purpose.
Use a high-res image: When applying cover overlays, your image will be obscured. Be sure you select a high-res image to make sure the user can understand how the image aligns with the context of the Overlay Tile.