Images with Overlaid Text

This is a pattern used often to indicate the start of a page (like on Heros) or on Banners or Cards where we want a different sort of emphasis on the card.

The pattern is always around using a gradient overlay over the image and overlaying the text over the gradient.

There are 2 types of gradient, a blue and a dark blue gradient. In addition, the variants can come in from any direction.

Here we see the application of this pattern in the context of a card list.

Note: The Gradients are placed absolutely and layered, so they can only be used where the images and text are absolutely positioned as well.