There are a number of different box styles available. Box styles are most often applied to
div elements, but can also be applied to
The basic box style has no border and no background colour - just padding and margins. The basic box can be modified to use different background colours and borders.
Filled with white and bordered with 100 per cent colour.
Box-solid defaults to the relevant College colour or platinum for other sites.
Box-solid-uni will always be the University colour (platinum). More options are available for background colours and borders.
Alignment & width
Boxes default to 100 per cent of their parent container (eg
<div>). You can use the standard alignment and width classes on the containers to change where boxes sit and how wide they are, or put the box in a column created with a grid class.
Do not apply alignment or width classes directly to boxes as this will cause problems with padding and margins.
Designed for stacking on top of box-solid as a header. Filled with 10 per cent colour with text and borders at 100 per cent colour. 2px bottom border.
Box-header defaults to the relevant College colour or platinum for other sites.
Box-header-uni will always be the University colour (platinum).
Combining box-header with box-solid
The box below has been created using box-header and box-solid. When combining box styles, they 'fit' together better if you use
<div> tags (rather than
<p> tags). The appropriate level of heading tags should be used inside the box-header to improve accessibility. In this example,
<h4> tags have been used as the heading of this section is a
<h3>. The level of the heading tags won't affect the appearance of the box-header.
Filled with 10 per cent colour and bordered on top and bottom only with a solid line of 100 per cent colour.
Box-bdr2 defaults to the College colour,
box-bdr2-uni is always platinum.