Digital pattern library

Info bite (deprecated)

This pattern is depreciated. Do not attempt to use this pattern for any new website development. It will be removed in a future update.

The info bite pattern is a short snippet of information shown on either a solid background colour or a background image with a semi-opaque colour overlay. Info bite is used in situations where you want to convey short snippets or 'bites' of information, quite possibly in a grid.


Default

Simple info bite with background image.

Code





Landscape

To get a landscape info bite for use in grids, add a class landscape. This adds styles to make text work better in the larger space.

Code





Portrait

To get a portrait info bite, add a class portrait. This makes the info-bite twice as high.

Code





No link

The link in the info bite is optional.

the St Andrews cathedral
8,400 students
Code


the St Andrews cathedral
8,400 students

No image and solid background

The image and therefore the <div class="image">...<div> is optional. In this case you should add a solid class e.g. <div class="info-bite solid">.

Code