HSE banner

Boxes and highlights

You can create border and highlight effects using box style.

There are 2 ways to use this style:

  1. Nested inside a "highlight"
  2. Standalone

There are some slightly different effects, depending on where you use it.

Inside a highlight

Using it this way creates a box wholly contained within the highlight. It should be obvious that what it is in here connected to the containing box.

The code for this part of the page is below:

<div class="highlight">
<p>Using it this way creates a box wholly contained within the highlight. It should be obvious that what it is in here connected to the containing box. </p>
<div class="box">
<p>The code for this part of the page is below:</p>

</div>

<p>&nbsp;</p>
</div>

 

Standalone

<illustrative whitespace>

The other way to use the "box" class is to use it standalone. This creates a simple border around the text, using the light colour for the scheme in use

Another example

Headline inside

A little bit of text

Here is the box

This highlightBox is contained within the box

More text

Still more text

Here is the code:

<div class="highlight">
<h2 class="headlineinverted">Headline inside</h2>
<p>A little bit of text</p>
<div class="box">
<p>Here is the box</p>
<div class="highlightBox">
<p>This headline highlight is contained within the box</p>
</div>
<p>More text</p>
</div>
<p>Still more text</p>
<div class="box">
<p>Here is the code</p>
</div>
</div>

Boxed paragraph?

This paragraph contains a boxed link, which may or may not be used.

Boxed h3

Final Example

A really nice looking "card-style" presentation

Which has a built-in subtitle

a stock image
You could use a captioned image to liven up the page!

A content area which can contain all of the standard functionality, such as bullet lists and images.

  • It's accessible
  • It looks good
  • It breaks information logically

Boxed navigation:

  • a foo bar
  • c foo bar
  • c foo bar
  • d foo bar