Edinburgh GEL

Basic list types

Lists are a very effective way to convey information online and can be useful in emphasising specific information.

EdGEL supports a combination of list types and nesting.

You should adpot an appropriate list style that effectively presents the content you are writing.

  • Use bulleted lists wherever you can on your site. You can also have multiple levels of nested bullets.
  • You should only use numbered lists when the order of the items in the list is important, such as in step-by-step instructions or a table of contents.

Well formed lists can help readers understand, remember, and review key points. They help readers follow a sequence of actions or events and they break up long stretches of straight text.

Find out how lists are used in EdWeb

Future developments

EdWeb does not currently support inline lists or icons but they are suported through EdGEL.

Accessibility review

Standard well-formed HTML lists are fully accessible. There are no problems with these elements.

Accessibility issues

None.

Choose a colour

Update
You are viewing the colour: Red (default), hex-value: #d50032

Choose viewport

      
<h3>Unordered list</h3>
<ul>
  <li>unordered list item</li>
  <li>unordered list item</li>
  <li>unordered list item</li>
</ul>

<h3>Unordered list icon</h3>
<ul class="glyphicon-chevron-right">
  <li>unordered list item</li>
  <li>unordered list item</li>
  <li>unordered list item</li>
</ul>

<h3>Unordered list inline</h3>
<ul class="list-inline">
  <li>unordered list item</li>
  <li>unordered list item</li>
  <li>unordered list item</li>
</ul>

<h3>Ordered list</h3>
<ol>
  <li>ordered list item</li>
  <li>ordered list item</li>
  <li>ordered list item</li>
</ol>

<h3>Definition list</h3>
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
<h3>Definition list - horizontal</h3>
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>