Tiles

A tile consists of a background graphic or photo with a text overlay with a single link.

Shape  Code

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.

Aspect Ratio 16:9

Aspect Ratio 5:3

Aspect Ratio 6:4 (Default)

Aspect Ratio 1:1

Background Color  Code

Background colors can be added by applying color classes to the tile container.

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.

16:9 Aspect Ratio
6:4 Aspect Ratio
1:1 Aspect Ratio

Image Effects  Code

Several effects can be applied to the tile image.

Image Effect: Grayscale

Adding the .grayscale class to the tile-image container will make the image black and white. This effect can be used in combination with an image overlay.

With Color Overlay

Image Effect: Blur

Adding the .blur class to the tile-image container will offset the image position to the left and restore it to its natural position on hover.

Image Effect: Full Saturation on Hover

Adding the .saturation class to the tile-image container will decrease the default color saturation and restore it on hover.

Image Effect: Slide on Hover

Adding the .slide class to the tile-image container will offset the image position to the left and restore it to its natural position on hover.

Image Effect: Zoom Out on Hover

Adding the .zoom class to the tile-image container will make the image zoomed in by default and zoom out to its natural position on hover.

Color Overlays  Code

Color overlays adds a semi-transparent color over the image and are used when tile body text is layered over the image. The default color is black, but additional background color classes can be added.

Default
With Red Background Color Class
With Green Background Color Class

Tile Text (Default)

Body text lays over the entire tile.

Examples with Color Backgrounds  Code

Examples with Image Backgrounds  Code

example image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit velit vel eros sollicitudin, a congue.
Image with black overlay
example image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit velit vel eros sollicitudin, a congue.
Image with grayscale and red overlay
example image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit velit vel eros sollicitudin, a congue.
Image with blur

Tile Text as Footer  Code

Footer text anchors to the bottom. The title does not wrap and automatically adds an ellipses when text exceeds the bounderies. The description is hidden by default and is revealed on hover, active, and focused states.

Additional background color classes can be added.

example image
Default with title only
example image
Default with long title
example image
Default with title and description

Tile Text as Header  Code

Footer text anchors to the bottom. The title does not wrap and automatically adds an ellipses when text exceeds the bounderies. The description is hidden by default and is revealed on hover, active, and focused states.

Additional background color classes can be added.

example image
Default with title only
example image
Default with long title
example image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit velit vel eros sollicitudin, a congue.
Default with title and description

Tile Text - Hide/Reveal  Code

Adding the .tile-hide-reveal to the tile-text container makes the text transparent by default and is revealed on hover, active and focus states.

example image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit velit vel eros sollicitudin, a congue.
example image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit velit vel eros sollicitudin, a congue.
example image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit velit vel eros sollicitudin, a congue.