Lists

Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.

Basic Lists

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Copy
<ul class="ulist-type-circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ul class="ulist-type-disc">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ul class="ulist-type-square">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ul class="list-type-none">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Hoverable Stacked Lists

John Doe
2 days ago
Jane Doe
10 days ago

Copy
<ul class="list-hoverable container">
  <li class="flex-container container">
    <div class="avatar lg">
      <img src="avatar.jpg" alt="Avatar" />
    </div>
    <div>
      <h3 class="text-lg">John Doe</h3>
      <small class="text-xsm text-gray">2 days ago</small>
    </div>
  </li>
  <li class="flex-container container">
    <div class="avatar lg">
      <img src="avatar.jpg" alt="Avatar" />
    </div>
    <div>
      <h3 class="text-lg">Jane Doe</h3>
      <small class="text-xsm text-gray">10 days ago</small>
    </div>
  </li>
</ul>

The type and hoverable status can be combined. Ani Design also provides utlities for.list-position-inside .list-position-outside for the CSS property list-style-position

< Input Modal >