Lists help readers scan information, and require minimal punctuation.

This page details the different styling options available. Information about how and when to use lists is available in the Content Style Guide.

Examples

Ordered lists

The default ordered list

1. This is the default ordered list style.
2. It automatically inserts the next number before the text.

An ordered list with the list-lower-alpha class

1. The list-lower-alpha class can be applied.
2. This is used when you prefer a., b., c. style list items.

Table of contents ordered lists

Tables of Contents (or "toc") sit above the main text, alothough an introductory paragraph can be used above the contents. It can be used only with an ordered list (that is a list with numbers not bullets).

To demonstrate its use, a table of contents has been created for the remainder of this page. To create the link from the contents item, anchors have to be placed next to the area to which it links. Nomally the anchor is next to an H3.

1. Unordered links
2. Special usage links
3. Implementation in MySource Matrix
4. Technical implementation

Unordered lists

The default unordered list

• This is the default list style, with no special classes applied.
• It is intended for lists of short points, not more than a couple of sentences long.
• Only one-and-a-half line spacing is applied between list items.
• This means that there is not enough contrast between points when they become paragraph length. A couple of sentences aren't too many...

Unordered lists with links

• Style for a list of links
• This list has the class linklist applied
• It's fine if only part of each item is a link

An unodered list with extra padding

• Sometimes, when each list item has a lot of copy, and you don't think it appropriate to break the list up into paragraphs with headings, the default spacing is not enough. In these cases, a class of "listpadding" should be applied to give it more vertical space. As a rough rule, it's good for those times when there are more than two lines of text per list item.
• Although the bullet point here is the same as the default unordered list, you can apply the listpadding class to an unordered list which has the linklist class already applied to it; it is perfectly fine to assign multiple classes to the same list.

Special usage lists

A list without bullets showing

• Only in very special cases should the "nobullet" class be applied.
• This should only be used for semantic reasons (where, structually, it is a list of items but you don't want it to look like a list).

Definition lists

This is a definition list title

List items that require sub-copy, or defining text, should go into a definition list.

Definition lists can take multiple lines of copy without difficulty.

No need to use tables

Many two-column tables would be better off as a definition list.

Definition lists with links

This is a definition list title with a link

Linked list items that require sub-copy, or defining text, should go into a definition list.

Like the unordered list, it has a special bullet received for lists of links.

A good alternative

Definition lists are much easier to maintain than tables!

Definition lists with Columns

This is a default columned definition list title

The definition item appears in a second column

Columned Definition List size 7

By adding another class you can alter the space between the columns smaller or larger

Columned Definition List size 17

By adding another class you can alter the space between the columns smaller or larger

Implementation in MySource Matrix

The buttons for creating a numbered or bulleted list are next to each other in the WYSIWYG div editor toolbar, and are similar in appearance to icons you find in MS Word. 

Like Word, you can create a list by either clicking on the appropriate icon and then typing, or select (highlight) text you have already entered, and then click either one of these buttons to convert it to a list.

To enter a new item in the list, press Enter at the end of a list item.

To end the list, press Enter twice.

To apply a style to a list, highlight every line in the list and select one of the choices in the -- select css styles -- dropdown menu. (NB It is important that you highlight from left to right or the class might not be applied.)

Styles that apply to lists are:

• listpadding – creates extra space between the lines in a list.
• linklist – always use this style when the list is composed entirely of hyperlinks. The style will create a bullet point with an arrow.
• nobullet – creates a list with no bullet points.

Regular lists do not require a special class.

Technical implementation

Ordered lists

<ol>
    <li>[regular list copy (one to two lines per list item)]</li>
</ol>

<ol class="list-lower-alpha">
    <li>[regular list copy (one to two lines per list item)]</li>
</ol>

Ordered lists with table of contents

<ol class="toc">
    <li>[regular list copy (one to two lines per list item)]</li>
</ol>

Unordered lists

<ul>
    <li>[regular list copy (one to two lines per list item)]</li>
</ul>

<ul class="linklist">
    <li>[linklist copy (for linked list items)]</li>
</ul>

<ul class="listpadding">
    <li>[extra padding list copy (for lists containing a paragraph per list item)]</li>
</ul>

Special usage lists

<ul class="nobullet">
    <li>[nobullet list copy (for very special cases concerning semantics)]</li>
</ul>

Definition Lists

<dl class="list">
    <dt>[list copy (for list items with definitions)]</dt>
    <dd>A definition for that item, such as a short description.</dd>
</dl>

<dl class="linklist">
    <dt>[linklist copy (for linked list items with definitions)]</dt>
    <dd>A definition for that link, such as a short description.</dd>
</dl>

<dl class="list-columned">
<dt>Columned Definition list title</dt><dd>Definition list item</dd>
</dl>

<dl class="list-columned list-columned-size-7">
<dt>Columned Definition list size 7</dt><dd>Definition list item</dd>
</dl>

<dl class="list-columned list-columned-size-17">
<dt>Columned Definition list size 17</dt><dd>Definition list item</dd>
</dl>