List

Lists are used to display list items in an unordered way.

Usage

Render an unstyled list by default.

  • Blade
  • Buffy
  • Morbius
<ul class="drac-list">
  <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>
</ul>
<List>
  <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>
</List>;

Variants

Lists can be displayed as plain list items or with dashes.

  • Blade
  • Buffy
  • Morbius
  • Blade
  • Buffy
  • Morbius
<div class="drac-box">
  <ul class="drac-list drac-list-purple">
    <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>
  </ul>
  <ul class="drac-list drac-list-unordered drac-list-purple">
    <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>
  </ul>
</div>
<Box>
  <List color="purple">
    <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>
  </List>
  <List variant="unordered" color="purple">
    <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>
  </List>
</Box>;

Colors

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

  • Blade
  • Buffy
  • Morbius
<ul class="drac-list 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>
</ul>
<List 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>
</List>;

Properties

color

The Dracula UI color for the List.

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

The variation to be used for the List element. `unordered` -> Display list in dashes as an `<ul>` `ordered` -> Deprecated and moved to OrderedList

"unordered" | "ordered" | "none"