Skip to main content
Logo USWDS + Tailwind

List

A list organizes information into discrete sequential sections.

Example

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
  • Unordered list item
  • Unordered list item
  • Unordered list item
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
  • Unstyled list item
  • Unstyled list item
  • Unstyled list item
Twig 
<div class="space-x-12 flex">


  <ul class="list-disc pl-8 mt-4 space-y-1">
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
  </ul>


  <ol class="list-decimal pl-8 mt-4 space-y-1">
    <li>Ordered list item</li>
    <li>Ordered list item</li>
    <li>Ordered list item</li>
  </ol>


  <ul class="list-none">
    <li>Unstyled list item</li>
    <li>Unstyled list item</li>
    <li>Unstyled list item</li>
  </ul>


</div>