Control Colour theme
Control Font family

Unordered list

An unordered list groups items that do not have a numerical ordering

  • CSS
  • HTML
  • JavaScript

Unordered lists should:

  • be used if the order of the items is not relevant

Unordered lists should not:

  • be used if the order of the items is relevant

Code

Use the tabs to view the unordered list source code.

Use left and right arrows to navigate between tabs.

HTML

        
        
  <ul class="unordered-list">
    <li class="unordered-list__list-item">CSS</li>
    <li class="unordered-list__list-item">HTML</li>
    <li class="unordered-list__list-item">JavaScript</li>
  </ul>

      

CSS


  /*
  Unordered lists
  ----------------------------------- */
  
.unordered-list {
  padding: 0 0 0 1em;
  margin: 1em 0;
  list-style: none;
}

.unordered-list__list-item {
  list-style: none;
  text-indent: -0.75em;
  margin: .5em 0;
}

.unordered-list__list-item:before {
  display: inline-block;
  content: '';
  -webkit-border-radius: 0.375rem;
  border-radius: 0.375rem;
  height: 0.5rem;
  width: 0.5rem;
  margin-right: 0.5rem;
  background-color: var(--colour-medium);
}


      

Back to all components