Box styles

There are a number of different box styles available. Box styles are most often applied to div elements, but can also be applied to p elements.

Box

class="box"

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.

Box-solid

Filled with white and bordered with 100 per cent colour.

class="box-solid"

      class="box-solid-uni"

class="box-solid-grey"

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.

Box-header

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.

`class="box-header" class="box-header-uni"`

`class="box-header-grey"`

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.

Heading text

Box text.

<div class="w-wide right marginleft">
<div class="box-header">
<h4>Heading text</h4>
</div>
<div class="box-solid">
<p>Box text</p>
</div>
</div>

Box-bdr2

class="box-bdr2"

      class="box-bdr2-uni"

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.

Additional box colours & borders

The easiest way to create a box is to use one of the pre-defined classes above, but you can also control the colours and borders using background colour classes and border classes. For example:

class="box bg-uni25"

<div class="box-solid">

<div class="box-solid bg-grey10 bdr-grey50">

To compose a box (that is not already covered by one of the styles above):

Choose a box style from this page
If you want to change the background colour, add a background colour class
If you want to change the border colour, add a border colour class

Updated: 18 August 2017/ Responsible Officer: Director Marketing/ Page Contact: Webstyle