Directive

Lists

Unordered, ordered, nested and description lists — variant='list' on the list element picks the right markers and spacing per tag.

Unordered

<ul wrTypography variant="list">
  <li>At least 10 characters</li>
  <li>At least one lowercase character</li>
</ul>
  • At least 10 characters (and up to 100 characters)
  • At least one lowercase character
  • Inclusion of at least one special character, e.g. ! @ #

Ordered

<ol wrTypography variant="list">
  <li>Bonnie with 240 points</li>
  <li>Jese with 220 points</li>
</ol>
  1. Bonnie with 240 points
  2. Jese with 220 points
  3. Lana with 190 points

Nested

Nested lists indent and swap markers automatically.

<ul wrTypography variant="list">
  <li>
    List item one
    <ol>
      <li>Nested ordered item</li>
    </ol>
  </li>
</ul>
  • List item one
    1. You might feel like you are being really organized
    2. Nested navigation in UIs is a bad idea
  • List item two

Description list

<dl wrTypography variant="list">
  <dt>Email address</dt>
  <dd>yourname&#64;example.com</dd>
</dl>
Email address
[email protected]
Home address
92 Miles Drive, Newark, NJ 07103
Phone number
+424 785 425 433