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):

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

Updated:  25 June 2013/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle