Unordered list

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.

HTML
CSS

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 2rem;
  margin: 1rem 0;
  list-style: disc;
  max-width: 80%;
  margin-bottom: 1.5rem;
}

.unordered-list__list-item {
  list-style: disc;
  /* text-indent: -0.75rem; */
  margin: .5rem 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-grey);
} */

Back to all components