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.
Simple info bite with background image.Code
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.
To get a portrait info bite, add a class
portrait. This makes the info-bite twice as high.
The link in the info bite is optional.
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">.