HSE banner

Highlights

  • Highlight
  • Highlight box
  • Headline highlight

In order to emphasize parts of the text, or lift them from the page, the facililty exists to colour sections of the page in the light colour from the current colour scheme.

Highlight

This is the most simple version - it just changes the background colour of your element. This can be applied to almost any element.

Highlighted paragaph

Highlighted word, using a span.

Highlighted division:

<h2>Highlight</h2>
<p>This is the most simple version - it just changes the background colour of your element. This can be applied to almost any element.</p>
<p class="highlight">Highlighted paragaph</p>
<p>Highlighted <span class="highlight">word</span>, using a span.</p>
<div class="highlight">
<p>Highlighted division</p>:


</div>

Highlight box

For marking large sections, with neat padding, use a highlightBox. This is preferable to the simple highlight class for large areas.

Make your point

With a Highlight Box!

<div class="highlightBox">
<h1>Make your point</h2>
<p>With a Highlight Box!</p>
</div>

Headline highlight

In addition to the "highlightBox" there is the "headlinehighlight", which is roughly the same, but is intended to be used in the following situations:

  • To contain the main page header
  • To contain images in the right hand column

In all other situations, a "highlightBox" or "highlight" is appropriate.

picture from the sickness absence section of the hse website

Use a "headlinehighlight"

To wrap your r/h column image

<div class= "headlinehighlight"> <IMG SRC="..." width="180" />
<h2>Use a "headlinehighlight"</h2>
<p>To wrap your r/h column image</p>
</div>

highlight your text for clarity