@(metaData:Page)(implicit request: RequestHeader) @main(metaData, Switches.all){ }{

@metaData.webTitle

Sprites

Below are the range of sprites used across the site. They can be applied to any element but we prefer the semantically-void <i> tag where possible.

All classnames below should be preceded with an additional "i" class. This class adds the background image URL for the sprite file and adds display: inline-block to sprite elements by default.

This sprite is automatically generated in both transparent PNG and scalable SVG formats. Where browsers support SVG, we replace the PNG background image with an SVG data URI (meaning high pixel density displays will see correctly-scaled graphics). Adding items to the sprite is simply a case of saving a PNG file to a given folder and running our node script – the full process is documented here.

Note: all icons and images below are placed against a light grey background with a light grey border to highlight white icons and show dimensions. The actual sprite file is fully transparent and doesn't have borders, of course.

@fragments.sprites()

Note: the above table is automatically regenerated when the sprite tool is used to modify the sprite. If you'd like to adjust its markup, edit the spricon-phantom.js script in the tools directory

}