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 color or a background image with a semi-opaque color overlay.
Usage
- Used in situations where you want to convey short bites of information, possibly in a grid.
Syntax
[bite]
Options
- The link in the
.biteis optional. - The image and therefore the
<div class="image">...<div>is optional. In this case you should add asolidclass e.g.<div class="info-bite solid">. - To get a portrait info-bite, add a class
portrait. This makes the info-bite twice as high. - To get a landscape info-bite of use in grids, add a class
landscape. This adds styles to make text work better in the larger space.