Design System

Bullet Point Lists

Bullet Point Lists documentation goes here.

Circle bullet example:

  • This is a list.
  • Structurally, it's still a list.
  • Nested lists:
    • This is the nested list content
    • Still showing a bullet
    • And has appropriate left margin
  • This may still come in handy in some situations.
HTML 
<ul>
  <li>This is a list.</li>
  <li>Structurally, it's still a list.</li>
  <li>Nested lists:
    <ul>
      <li>This is the nested list content</li>
      <li>Still showing a bullet</li>
      <li>And has appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

Square bullet example:

  • This is a list with square bullets.
  • Structurally, it's still a list.
  • Nested lists:
    • This is the nested list content
    • Still showing a bullet
    • And has appropriate left margin
  • This may still come in handy in some situations.
HTML 
<ul class="list-square">
  <li>This is a list with square bullets.</li>
  <li>Structurally, it's still a list.</li>
  <li>Nested lists:
    <ul>
      <li>This is the nested list content</li>
      <li>Still showing a bullet</li>
      <li>And has appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>