Teasers are easily-scannable signposts to content.
Teasers may be functional - prominently indicating the way to something the user will be looking for - or promotional, aiming to interest the user in something of which they weren't previously aware.
Teasers may only be used in the main body content section of a page, as below.
Audio and video teasers are signposts to video/audio content. They link to other pages that contain the audio or video content; the content does not play out in the teaser. They behave as standard teasers but their icons denote that they link to audio or video content.
Promos contain brief promotional messages.
Promos can only be used in the 'Promotional content' section in the fourth column at maximum width view:
Image, title and URL are all clickable on both teasers and promos.
For mobile screen resolution media queries are used to reduce the padding between text and images when the structure becomes vertically stacking instead of horizontal columns.
Audio/video overlay icons are positioned in the bottom left corner instead of bottom right corner on mobile resolutions to ensure they are always overlaid on top of the image beneath.
N/a
Teasers can be implemented horizontally or vertically - but they will always appear vertically-orientated at small screen widths.
The image, heading and call to action button/link are all optional.
