Principality of KaharagiaDesign System

Lists

Lists organise content in a scannable format. Use the appropriate list type based on the relationship between items.

Unordered Lists

Use unordered (bulleted) lists when the order of items doesn't matter.

  • First item in the list
  • Second item with more text to show how content wraps across multiple lines
  • Third item with a nested list:
    • Nested item one
    • Nested item two
  • Fourth item
<ul>
  <li>First item in the list</li>
  <li>Second item...</li>
  <li>Third item with a nested list:
    <ul>
      <li>Nested item one</li>
      <li>Nested item two</li>
    </ul>
  </li>
  <li>Fourth item</li>
</ul>

Ordered Lists

Use ordered (numbered) lists when items follow a sequence or process.

  1. First step in the process
  2. Second step with additional details that may span multiple lines
  3. Third step with sub-steps:
    1. Sub-step one
    2. Sub-step two
  4. Fourth and final step
<ol>
  <li>First step in the process</li>
  <li>Second step...</li>
  <li>Third step with sub-steps:
    <ol>
      <li>Sub-step one</li>
      <li>Sub-step two</li>
    </ol>
  </li>
  <li>Fourth and final step</li>
</ol>

Definition Lists

Use definition lists for term-definition pairs, such as glossaries or metadata.

Term one
Definition for the first term, explaining what it means in detail.
Term two
Definition for the second term with more comprehensive explanation.
Term three
Another definition demonstrating the pattern.
<dl>
  <dt>Term one</dt>
  <dd>Definition for the first term...</dd>
  <dt>Term two</dt>
  <dd>Definition for the second term...</dd>
</dl>

Example: Summary List

Use a styled definition list for displaying key-value information.

Reference
ST-2024-0001
Date
15 November 2024
Status
Published
Issued by
Ministry of Foreign Affairs

Usage Guidelines

Do

  • Use lists to break up long content
  • Keep list items concise and scannable
  • Use the appropriate list type for the content
  • Use consistent punctuation within lists

Don't

  • Don't use lists for single items
  • Don't nest lists more than 2 levels deep
  • Don't use numbered lists when order doesn't matter

Accessibility

  • Screen readers announce the number of items in a list
  • Use semantic HTML (<ul>, <ol>, <dl>)
  • Nested lists help convey hierarchy