Health and Safety
Executive / Commission
Styleguide
A long page summarizing what styles are available. At the end of each section are links to further examples and implementations of the styles listed.
| code | what it looks like | when to apply | |
|---|---|---|---|
| links | <ul class="listarrow"> | For lists that are lists of links e.g. links to leaflets related to the current page. | |
| lots of links | <ul class="listarrowlong"> | To long lists of links, where you have more than 10 or 12 together, where all that bold would make the page difficult to read. | |
| Links to external sites | <ul class="linklist"> | When you're linking to a number of external websites. | |
| Note: | Do not change between list types on the same page, this may confuse users as to why the lists appear different. The default style is "listarrow" only use "listarrowlong" when you have one or a series of long lists. | ||
| ticks | <ul class="listtick"> |
|
To show that something is right e.g. on a list of "do's" |
| crosses | <ul class="listcross"> |
|
To show that something is wrong e.g. on a list of "don'ts" |
| exclamation | <ul class="listexclaim"> |
|
To show that something is a warning, or potentially dangerous, or to draw attention. |
| A-Z | <ul class="az"> | For lists of links that are single letters, like an index to an A-Z. Include spaces in your HTML to obtain the effect shown on the second row. | |
| Note: | The next few examples are for the left and right columns respectively, and so may not demonstrate their true appearance here in the middle column. | ||
| highlight | <ul class="listhighlight"><li><p> | Intended for left column only. Can be nested in paragraphs and have <strong> applied to give different effects. | |
| quick links | <ul class="listql"> | Have reduced padding as intended for right column only - they are short cuts to standard material within the site (e.g. FAQs or Who's who). | |
| hot topics | <ul class="hottopics"> <li class="reach"> <a href="#">...</a></li> <li class="energy"> <a href="#">... </a></li> |
You must add this stylesheet - before the tcolour2005.css - /special/hottopics.css. You will need to develop an image (16x16) and add the class to the css | |
| code | what it looks like | when to apply | |
|---|---|---|---|
| headlinehighlight | <div class="headlinehighlight"> |
|
At the top of the page. Especially if you have an image, or text you want in the coloured background. Not intended to work inside tables, so won't render correctly here. Note - uses negative margins, you may suffer if you use this inappropriately. |
| headlineinverted | <h2 class="headlineinverted"> | a subtitle |
Principally for <h2>. Where it needs to stand out. |
The two methods described above are also a form of highlighting, but specific to headings. The highlighting methods listed below are more generic.
| code | what it looks like | when to apply | |
|---|---|---|---|
| query | <span class="query"> | A piece of text that needs attention. |
Principally for for when developing pages, to draw authors attention to bits of the page that need further work. Legitimate to use on live pages, but don't use "query" if you mean "strong". |
| highlight | <span class="highlight"> or <p class="highlight"> or <div class="highlight"> etc |
A highlighted word. A highlighted paragraph. |
Can be use in-line or at block level, hence has no padding. |
| highlight box | <span class="highlightBox"> or <p class="highlightBox"> or <div class="highlightBox"> etc |
A highlighted word. A highlighted paragraph. |
Should only be used at block level - the example left shows how it would appear if tried in-line. Looks much better than simple highlight for paragraphs, headings etc, as padding is added. You'll need to decide yourself whether to use "highlight" or "highlightBox" at the <div> level, depending on the type of effect you're seeking. |
| headline key message | <p class="headlinekeymessage"> I am normal<br /><strong>I am big </strong>.</p> | Normally only used in the right column of a three column page. Perhaps to draw attention to a key fact etc. | |
| big text | <p class="bigText"> | Lorem ipsum dolor sit amet, consectetur adipisicing elit |
Makes the text big. Also adjusts padding slightly. Works well for mission statements. |
| gradient | <div class="gradient"> ... </div> | This style adds a graduated background colour to the element it is applied to. Starts dark at the top and gets lighter towards the bottom. Works in all colour schemes. You need a few rows of text to get the best from it. |
There are overlaps between simple highlighting of text and boxing off sections of the page and highlighting them, you may need to refer to both sections, to find the style that best meets your requirements.
| code | what it looks like | when to apply | |
|---|---|---|---|
| image captions | <div class="icapsr"> <p>some text;/p> </div> |
some text This text now floats left. |
Originally a copy of the BBC News type of idea, where a long page may be broken by a quote or image. Often high jacked and used for navigation on two column pages. |
| highlight box | discussed in highlighting. | ||
| Note: | The next few examples do not work inside a table, so what you see below is not what you get in real life. | ||
| box | <div class="b2 hlow"> <h2><a href="#">box two</a></h2> <p>Another box.</p> </div> <div class="b2 hlow"> <h2><a href="#">box one</a></h2> <p>Note: Boxes do not always require images.</p> </div> |
|
This shows a simple 2 box method with simple images. 1, 2, 3 and 4 boxes in a row are all available. Use b2 to select two boxes, to specify a high box select hhigh (height=high). Usually used on portal pages to link to two or more key pages. To see in action properly go to our portal page. |
| code | what it looks like | when to apply | |
|---|---|---|---|
| Note: | Does not work when confined to a narrow column inside a table cell. | ||
| left column | class="hse2ColumnLeft" | Good for making better use of space, aligning images to one side, or lists of do's and don'ts. Or see our site map for a complex nested version. | Usually applied to <div> tags. Used to float content into columns. |
| right column | class="hse2ColumnRight" | ||
There are two basic types of table, those for numerical data and those for text data. Numerical (num) tables align text to the right of the cell and text (alpha) tables align text to the left of the cell.
For each type (num and alpha) there are a further three styles, which emphasis either the grid, the rows or the columns. Additionally, javascript can be used to stripe alternate rows, or make the table sortable.
| code | what it looks like | when to apply | |
|---|---|---|---|
| right | class="right" | right aligned text | aligns text to the right |
| left | class="left" | left aligned text | aligns text to the left, you might use to align a cell of text in a mostly numerical table. |
| hide | class="hide" | Hides the text you wrap it around. Primarily used in link text to provide screen reader users with contextual information that sighted users infer by positioning. | |
| nowrap | span class="nowrap" | Good for strings of numbers like 99 000 000 . | Good for strings of numbers like 99 000 000 where you don't want it to line wrap. |
| isbn | <span class="isbn">ISBN 978 07176 1234 X</span> | ISBN 978 07176 1234 X | Wrap it around ISBN numbers to prevent them line wrapping. |
| code | what it looks like | when to apply | |
|---|---|---|---|
| clear floats | class="utilclearfloats" | N/A | Clears floats, handy after boxes or HSE2columnLeft and Right. |
| code | what it looks like | when to apply | |
|---|---|---|---|
| two column | N/A | See our templates page. | Use this every time, unless the criteria below match |
| three column | N/A | Homepages, to allow right navigation such as drop down menu and related links | |
| one column | N/A | Only for pages with wide content, such as large and/or wide tables or wide images. |
a title
box two