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.
Portrait
To get a portrait info bite, add a class portrait. This makes the info-bite twice as high.
No link
The link in the info bite is optional.
8,400 students
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">.