Lists

Overview

There are 2 types of list:

  • bullet lists (also known as unordered lists)
  • numbered lists (also known as ordered lists)

Corporate web standards

  • If the list has an introductory sentence, add a colon (:) at the end of the sentence
  • After a colon, individual bullet points start with a lowercase letter (as the list items are part of the sentence) unless the first word is a proper noun such as a place name
  • If there is no introductory sentence, bullet points start with an upper case letter (as the list items could be standalone sentences in their own right)
  • Only use a list if you have at least two items to put into the list. Never put a single item in a list just to make it look nice
  • Don't put full stops, commas or semicolons at the end of individual list items
Example

Example 1 - list with introductory sentence

The aims of the network are to:

  • improve the quality of current wildlife sites by better habitat management
  • increase the size of existing wildlife sites
  • enhance connections between sites, either through physical corridors or through ‘stepping stones’

Example 2 - list with no introductory sentence

Activities

Example 3 - numbered list

  1. Step 1
  2. Step 2
  3. Step 3
WCMS use

Access the Sitecore Rich Text Editor via the Experience Editor or the Content Editor.

Put each list item (bullet point) in a separate paragraph. Each line should be surrounded by paragraph tags (<p>...</p>) in the HTML view. Highlight all the lines and click either the bullet list button or numbered list button.

Nested lists

These require some hand cranking in the HTML view.

Put each list item (bullet point) in a separate paragraph as you would for a standard list. Include the list items that need to be nested. Click one of the list buttons and then edit the HTML as shown below.

Example

To create the following nested list

  • Choice A
  • Choice B
    • Choice B option 1
    • Choice B option 2
  • Choice C

Enter the following into the Rich Text Editor:

Choice A

Choice B

Choice B option 1

Choice B option 2

Choice C

Highlight all the rows and click on the bullet list button. A standard bullet list will be created. The HTML will look like this:

<ul>
<li>Choice A</li>
<li>Choice B</li>
<li>Choice B option 1</li>
<li>Choice B option 2</li>
<li>Choice C</li>
</ul>

Change the HTML code for the nested items as shown below: 

<ul>
   <li>Choice A</li>
   <li>Choice B
      <ul>
         <li>Choice B option 1</li>
         <li>Choice B option 2</li>
      </ul>
   </li>

   <li>Choice C</li>
</ul>

MVC.net use
Code

<dd class="selectables">
			<h3>Ordered lists</h3>
			<ol>
				<li>In extreme close up</li>
				<li>Gorgeous vibrant, yellows</li>
				<li>Shades of pink</li>
				<li>Beautiful sun-kissed greens</li>
			</ol>
			<h3>Unordered lists</h3>
			<ul>
				<li>In extreme close up</li>
				<li>Gorgeous vibrant, yellows</li>
				<li>Shades of pink</li>
				<li>Beautiful sun-kissed greens</li>
			</ul>
			</dd>
Version and status
  • 1.0
  • current version
  • Concept
  • Alpha
  • Beta
  • Release