logo

On This Page

Unordered list styles

Ordered list styles

Stacked List styles

List

Lists are continuous, vertical indexes of text or images.

Unordered list styles

  • Camera
  • Lens
  • Tripod
  • Accessories
  • Camera
  • Lens
  • Tripod
  • Accessories
  • Camera
  • Lens
  • Tripod
  • Accessories
<!-- list style basic -->
<ul class="list-basic">
    <li>Camera</li>
    <li>Lens</li>
    <li>Tripod</li>
    <li>Accessories</li>
</ul>

<!-- list style square -->
<ul class="list-basic list-style-square">
    <li>Camera</li>
    <li>Lens</li>
    <li>Tripod</li>
    <li>Accessories</li>
</ul>

<!-- list style circle -->
<ul class="list-basic list-style-circle">
    <li>Camera</li>
    <li>Lens</li>
    <li>Tripod</li>
    <li>Accessories</li>
</ul>

Ordered list styles

  1. Camera
  2. Lens
  3. Tripod
  4. Accessories
  1. Camera
  2. Lens
  3. Tripod
  4. Accessories
  1. Camera
  2. Lens
  3. Tripod
  4. Accessories
  1. Camera
  2. Lens
  3. Tripod
  4. Accessories
  1. Camera
  2. Lens
  3. Tripod
  4. Accessories
<!-- ordered list style number -->
<ol class="list-basic list-style-number">
    <li>Camera</li>
    <li>Lens</li>
    <li>Tripod</li>
    <li>Accessories</li>
</ol>

<!-- ordered list style upper-roman -->
<ol class="list-basic list-style-upper-roman">
    <li>Camera</li>
    <li>Lens</li>
    <li>Tripod</li>
    <li>Accessories</li>
</ol>

<!-- ordered list style lower-roman -->
<ol class="list-basic list-style-lower-roman">
    <li>Camera</li>
    <li>Lens</li>
    <li>Tripod</li>
    <li>Accessories</li>
</ol>

<!-- ordered list style upper-alphabet -->
<ol class="list-basic list-style-upper-alpha">
    <li>Camera</li>
    <li>Lens</li>
    <li>Tripod</li>
    <li>Accessories</li>
</ol>

<!-- ordered list style lower-alphabet -->
<ol class="list-basic list-style-lower-alpha">
    <li>Camera</li>
    <li>Lens</li>
    <li>Tripod</li>
    <li>Accessories</li>
</ol>

Stacked List Style

    avatar-image

  • Pebble Ui Title 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    avatar-image

  • You have a new notification

    avatar-image

  • Pebble UI posted in UI design group. Check now 

<!-- stacked list with read button -->
<ul class="list-stacked list-read-btn">
    <div class="list-body">
        <div class="avatar avatar-sm-round">
            <img loading="lazy" src="..." alt="avatar-image" />
        </div>
        <li>
            <h1>...</h1>
            <p>...</p>
        </li>
    </div>
    <a href="">
        <button class="btn primary-text-btn-sm">
            Read more
        </button>
    </a>
</ul>

<!-- stacked list with close button -->
<ul class="list-stacked list-close-btn">
    <div class="list-body">
        <div class="avatar avatar-sm-round">
            <img loading="lazy" src="..." alt="avatar-image" />
        </div>
        <li>
            <h1>...</h1>
        </li>
    </div>
    <button class="btn icon-btn-xsm">
        <i class="fas fa-times"></i>
    </button>
</ul>

<!-- stacked list with option button -->
<ul class="list-stacked list-option-btn">
    <div class="list-body">
        <div class="avatar avatar-sm-round">
            <img loading="lazy" src="..." alt="avatar-image" />
        </div>
        <li>
            <h1><span>Pebble UI </span>posted in <span>UI design group</span>. Check now </h1>
        </li>
    </div>
    <button class="btn icon-btn-xsm">
        <i class="fas fa-ellipsis-v"></i>
    </button>
</ul>