OrderedList

Ordered Lists are used to display list items in an ordered way.

Usage

Render an ordered list by default.

  1. Blade
  2. Buffy
  3. Morbius
<ol class="drac-list drac-list-ordered">
  <li class="drac-text drac-text-white">Blade</li>
  <li class="drac-text drac-text-white">Buffy</li>
  <li class="drac-text drac-text-white">Morbius</li>
</ol>
<OrderedList>
  <li className="drac-text drac-text-white">Blade</li>
  <li className="drac-text drac-text-white">Buffy</li>
  <li className="drac-text drac-text-white">Morbius</li>
</OrderedList>;

Colors

OrderedLists can be customized to use any of the Dracula UI theme colors.

  1. Blade
  2. Buffy
  3. Morbius
<ol class="drac-list drac-list-ordered drac-list-cyan">
  <li class="drac-text drac-text-white">Blade</li>
  <li class="drac-text drac-text-white">Buffy</li>
  <li class="drac-text drac-text-white">Morbius</li>
</ol>
<OrderedList color="cyan">
  <li className="drac-text drac-text-white">Blade</li>
  <li className="drac-text drac-text-white">Buffy</li>
  <li className="drac-text drac-text-white">Morbius</li>
</OrderedList>;

Properties

color

The Dracula UI color for the Ordered List.

"purpleCyan" | "yellowPink" | "cyanGreen" | "pinkPurple" | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow" | "white" | "black" | "blackSecondary" | "blackLight"