Ordered List

The OL component is used to render ordered lists, while the LI component represents individual list items within these lists. These components together structure ordered sequences of items, such as steps in instructions, ranked items, or any series where order is important.

Usage

import React from 'react';
import { OL, LI } from '~/ui/components/Text';

export default function App() {
  return (
    <OL>
      <LI>First step in the process</LI>
      <LI>Second step with more detail</LI>
      <LI>
        <>
          Third step with a nested list
          <OL>
            <LI>Nested step 1</LI>
            <LI>Nested step 2</LI>
          </OL>
        </>
      </LI>
    </OL>
  );
}

Rendered Example

1. First step in the process
2. Second step with more detail

3. Third step with a nested list

   1. Nested step 1
   2. Nested step 2

Props

Both the OL and LI components accept all standard HTML list attributes, enabling extensive customization and styling options.