HSE banner

Lists as links.

Types of lists as links

The HSE Web standard makes extensive use of lists. There are a number of different styles of list available:

  • A list item that is a link, in centre column, in right hand side column or nested as a secondary level in the bookmark.
    [class="listarrow"]
  • A list of links to external resources, that open a new window when clicked
    [class="linklist"]

Horizontal Lists

The styleguide allows for list that appear horizontally to be used. For example:

The declaration for this is "<ul class='listhorizontal'>".

By declaring your first <li> as "<li class='first'>" the far left hand border is removed.

The declaration above: <ul class="listhorizontal"> <li class="first"><a href="#">1997</a></li> etc.

Subnavigation lists

The class "listarrow" works in the subnavigation too.

<ul class="listarrow">
<li><a href="#" onclick="setActivecss('nocolor');return false;">layout only</a></li>
<li><a href="#" onclick="setActivecss('default');return false;">default</a></li>
<li><a href="#" onclick="setActivecss('blue');return false;">blue</a></li>
<li><a href="#" onclick="setActivecss('orange');return false;">orange</a></li>
<li><a href="#" onclick="setActivecss('purple');return false;">purple</a></li>
<li><a href="#" onclick="setActivecss('green');return false;">green</a></li>
</ul>

Next: Using Links

Advert lists

Advert lists have a background highlight which appears on "hover".

By placing areas on transparency on your image, a lighting effect can be achieved at minimal cost.

3 points remember

An example of strong use of advertlists, is on the HSE's Telephone Interpreting Service homepage.