Ordered List

Ordered Lists use numbers to delineate items in a list and are helpful for conveying a sequence of information, steps, or a procedure. While multiple "levels" and indentation are available, these should be avoided to prevent additional wrapping in smaller viewports.

Options

Use of Descriptions when links are available for each item in the list

One Column Ordered List

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  2. Quae atque et natus tempora iste minima adipisci repudiandae.
  3. Incidunt ad eius quasi molestiae, animi aut aspernatur.

Nested List - Default

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  2. Quae atque et natus tempora iste minima adipisci repudiandae.
  3. Incidunt ad eius quasi molestiae, animi aut aspernatur.
    1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    2. Quae atque et natus tempora iste minima adipisci repudiandae.
    3. Incidunt ad eius quasi molestiae, animi aut aspernatur.
      1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
      2. Quae atque et natus tempora iste minima adipisci repudiandae.
      3. Incidunt ad eius quasi molestiae, animi aut aspernatur.

Nested List - Outlook

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  2. Quae atque et natus tempora iste minima adipisci repudiandae.
  3. Incidunt ad eius quasi molestiae, animi aut aspernatur.
    1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    2. Quae atque et natus tempora iste minima adipisci repudiandae.
    3. Incidunt ad eius quasi molestiae, animi aut aspernatur.
      1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
      2. Quae atque et natus tempora iste minima adipisci repudiandae.
      3. Incidunt ad eius quasi molestiae, animi aut aspernatur.
  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  2. Quae atque et natus tempora iste minima adipisci repudiandae.
  3. Incidunt ad eius quasi molestiae, animi aut aspernatur.

Ordered List of Links Default

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  2. Quae atque et natus tempora iste minima adipisci repudiandae.
  3. Incidunt ad eius quasi molestiae, animi aut aspernatur.

Two Column Ordered List

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  2. Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  3. Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  4. Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  5. Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  6. Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.

Two Column Ordered List with Descriptions

  1. Lorem ipsum dolor sit ametLorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  2. Lorem ipsum dolor sit ametMaxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  3. Lorem ipsum dolor sit ametPariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  4. Lorem ipsum dolor sit ametNam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  5. Lorem ipsum dolor sit ametSed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  6. Lorem ipsum dolor sit ametIllum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.

Three Column Ordered List

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  2. Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  3. Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  4. Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  5. Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  6. Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.
  7. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores, sit. Labore facilis aperiam, corporis ullam quod rerum, architecto dolores mollitia fugit delectus est odio consequuntur, excepturi voluptatibus eius nam possimus.
  8. Atque, itaque molestiae possimus delectus, recusandae fuga vitae natus, voluptatibus labore fugiat sed voluptatum tenetur aut. Molestiae, sint, blanditiis laborum nulla porro cupiditate ea iusto soluta corrupti quo modi harum.
  9. Ipsam facere, veritatis nostrum placeat dolore eius magni cupiditate aspernatur fugit sapiente! Sunt reiciendis vel error odit deleniti repellat, facilis sed corporis aspernatur provident, impedit ex delectus. Perspiciatis, voluptates dolores?
  10. Adipisci, aliquam a! Earum numquam id, qui pariatur doloremque repudiandae accusamus! Tenetur animi, possimus cum ad placeat asperiores ab nostrum ipsa perspiciatis reiciendis recusandae inventore corporis error non quam enim.

One Column Ordered List in a Horizontal Card

Header

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  2. Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  3. Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  4. Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  5. Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  6. Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.

Two Column Ordered List in a Horizontal Card

Header

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  2. Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  3. Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  4. Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  5. Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  6. Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.

Two Column Ordered List with Descriptions in a Horizontal Card

Header

  1. Lorem ipsum dolor sit ametLorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  2. Lorem ipsum dolor sit ametMaxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  3. Lorem ipsum dolor sit ametPariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  4. Lorem ipsum dolor sit ametNam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  5. Lorem ipsum dolor sit ametSed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  6. Lorem ipsum dolor sit ametIllum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.

Three Column Ordered List in a Horizontal Card

Header

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  2. Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  3. Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  4. Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  5. Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  6. Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.
  7. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores, sit. Labore facilis aperiam, corporis ullam quod rerum, architecto dolores mollitia fugit delectus est odio consequuntur, excepturi voluptatibus eius nam possimus.
  8. Atque, itaque molestiae possimus delectus, recusandae fuga vitae natus, voluptatibus labore fugiat sed voluptatum tenetur aut. Molestiae, sint, blanditiis laborum nulla porro cupiditate ea iusto soluta corrupti quo modi harum.
  9. Ipsam facere, veritatis nostrum placeat dolore eius magni cupiditate aspernatur fugit sapiente! Sunt reiciendis vel error odit deleniti repellat, facilis sed corporis aspernatur provident, impedit ex delectus. Perspiciatis, voluptates dolores?
  10. Adipisci, aliquam a! Earum numquam id, qui pariatur doloremque repudiandae accusamus! Tenetur animi, possimus cum ad placeat asperiores ab nostrum ipsa perspiciatis reiciendis recusandae inventore corporis error non quam enim.

Ordered List Specifications

Page last reviewed: