Docs - Lists

Connect lists-icon-boxes.css to use lists styles.

List appearance could be changed using next modifyers:

• .pi-no-bullets - no bullets list
• .pi-list-with-icons - lists with icons
• .pi-bullets-circle - lists with icons that are inside a circle
• .pi-bullets-square - lists with icons that are inside a square
• .pi-bullets-base - lists with icons that are inside a circle or square in base theme color
• .pi-list-dashed - lists with dashed borders
• .pi-list-icons-ok - list items with "ok" icon
• .pi-list-icons-heart - list items with "heart" icon
• .pi-list-icons-star - list items with "star" icon
• .pi-list-icons-plus - list items with "plus" icon
• .pi-list-icons-minus - list items with "minus" icon
• .pi-list-icons-link - list items with "link" icon
• .pi-list-icons-right-open - list items with "right-open" icon
• .pi-list-icons-right-dir - list items with "right-dir" icon
• .pi-list-icons-news - list items with "news" icon

List items appearance could be changed using next modifyers:

• .pi-bullet-icon - list item icon
• .pi-bullet-icon-img - list item image

No bullets list

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-no-bullets">
  <li>Consectetur adipisicing</li>
  <li>Eiusmod tempor incididunt</li>
  <li>Labore et dolore</li>
  <li>Nostrud exercitation</li>
</ul>

List items with dashed border

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-no-bullets pi-list-dashed">
  <li>Consectetur adipisicing</li>
  <li>Eiusmod tempor incididunt</li>
  <li>Labore et dolore</li>
  <li>Nostrud exercitation</li>
</ul>

Lists icons groups with "ok" icon

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-list-with-icons pi-list-icons-ok">
  <li>Consectetur adipisicing</li>
  <li>Eiusmod tempor incididunt</li>
  <li>Labore et dolore</li>
  <li>Nostrud exercitation</li>
</ul>

Lists icons groups with "heart" icon

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-list-with-icons pi-list-icons-heart">
  <li>Consectetur adipisicing</li>
  <li>Eiusmod tempor incididunt</li>
  <li>Labore et dolore</li>
  <li>Nostrud exercitation</li>
</ul>

Lists icons groups with "star" icon

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-list-with-icons pi-list-icons-star">
  <li>Consectetur adipisicing</li>
  <li>Eiusmod tempor incididunt</li>
  <li>Labore et dolore</li>
  <li>Nostrud exercitation</li>
</ul>

Lists icons groups with "plus" icon

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-list-with-icons pi-list-icons-plus">
  <li>Consectetur adipisicing</li>
  <li>Eiusmod tempor incididunt</li>
  <li>Labore et dolore</li>
  <li>Nostrud exercitation</li>
</ul>

Lists icons groups with "minus" icon

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-list-with-icons pi-list-icons-minus">
  <li>Consectetur adipisicing</li>
  <li>Eiusmod tempor incididunt</li>
  <li>Labore et dolore</li>
  <li>Nostrud exercitation</li>
</ul>

Lists icons groups with "link" icon

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-list-with-icons pi-list-icons-link">
  <li>Consectetur adipisicing</li>
  <li>Eiusmod tempor incididunt</li>
  <li>Labore et dolore</li>
  <li>Nostrud exercitation</li>
</ul>

Lists icons groups with "right open" icon

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-list-with-icons pi-list-icons-right-open">
  <li>Consectetur adipisicing</li>
  <li>Eiusmod tempor incididunt</li>
  <li>Labore et dolore</li>
  <li>Nostrud exercitation</li>
</ul>

Lists icons groups with "right dir" icon

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-list-with-icons pi-list-icons-right-dir">
  <li>Consectetur adipisicing</li>
  <li>Eiusmod tempor incididunt</li>
  <li>Labore et dolore</li>
  <li>Nostrud exercitation</li>
</ul>

Lists icons groups with "dot" icon

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-list-with-icons pi-list-icons-dot">
  <li>Consectetur adipisicing</li>
  <li>Eiusmod tempor incididunt</li>
  <li>Labore et dolore</li>
  <li>Nostrud exercitation</li>
</ul>

Lists icons groups with "news" icon

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-list-with-icons pi-list-icons-news">
  <li>Consectetur adipisicing</li>
  <li>Eiusmod tempor incididunt</li>
  <li>Labore et dolore</li>
  <li>Nostrud exercitation</li>
</ul>

Lists icons groups with "twitter" icon

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-list-with-icons pi-list-icons-twitter">
  <li>Consectetur adipisicing</li>
  <li>Eiusmod tempor incididunt</li>
  <li>Labore et dolore</li>
  <li>Nostrud exercitation</li>
</ul>

Lists icons groups with "help" icon

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-list-with-icons pi-list-icons-help">
  <li>Consectetur adipisicing</li>
  <li>Eiusmod tempor incididunt</li>
  <li>Labore et dolore</li>
  <li>Nostrud exercitation</li>
</ul>

List with different icons

• Ratione voluptatem sequi
• Neque porro quisquam
• Ullam corporis suscipit
• Voluptate velit esse

<ul class="pi-list-with-icons">
  <li><span class="pi-bullet-icon"><i class="icon-link"></i></span>Ratione <strong>voluptatem sequi</strong></li>
  <li><span class="pi-bullet-icon"><i class="icon-attach"></i></span>Neque porro quisquam</li>
  <li><span class="pi-bullet-icon"><i class="icon-tag"></i></span><strong>Ullam corporis</strong> suscipit</li>
  <li><span class="pi-bullet-icon"><i class="icon-feather"></i></span>Voluptate velit esse</li>
</ul>

List with different icons in square

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-bullets-square">
  <li><span class="pi-bullet-icon"><i class="icon-user"></i></span>Consectetur adipisicing</li>
  <li><span class="pi-bullet-icon"><i class="icon-thumbs-up"></i></span>Eiusmod tempor incididunt</li>
  <li><span class="pi-bullet-icon"><i class="icon-flag"></i></span>Labore et dolore</li>
  <li><span class="pi-bullet-icon"><i class="icon-download"></i></span>Nostrud exercitation</li>
</ul>

List with different icons in circle

• Perspiciatis unde omnis
• Voluptatem accusantium
• Totam rem aperiam
• Veritatis et quasi architecto

<ul class="pi-bullets-circle">
  <li><span class="pi-bullet-icon"><i class="icon-camera"></i></span><strong>Perspiciatis</strong> unde omnis</li>
  <li><span class="pi-bullet-icon"><i class="icon-picture"></i></span>Voluptatem accusantium</li>
  <li><span class="pi-bullet-icon"><i class="icon-home"></i></span>Totam rem <strong>aperiam</strong></li>
  <li><span class="pi-bullet-icon"><i class="icon-eye"></i></span>Veritatis et quasi architecto</li>
</ul>

List with different icons in square - base theme color

• Consectetur adipisicing
• Eiusmod tempor incididunt
• Labore et dolore
• Nostrud exercitation

<ul class="pi-bullets-square pi-bullets-base">
  <li><span class="pi-bullet-icon"><i class="icon-user"></i></span>Consectetur adipisicing</li>
  <li><span class="pi-bullet-icon"><i class="icon-thumbs-up"></i></span>Eiusmod tempor incididunt</li>
  <li><span class="pi-bullet-icon"><i class="icon-flag"></i></span>Labore et dolore</li>
  <li><span class="pi-bullet-icon"><i class="icon-download"></i></span>Nostrud exercitation</li>
</ul>

List with different icons in circle - base theme color

• Perspiciatis unde omnis
• Voluptatem accusantium
• Totam rem aperiam
• Veritatis et quasi architecto

<ul class="pi-bullets-circle pi-bullets-base">
  <li><span class="pi-bullet-icon"><i class="icon-camera"></i></span><strong>Perspiciatis</strong> unde omnis</li>
  <li><span class="pi-bullet-icon"><i class="icon-picture"></i></span>Voluptatem accusantium</li>
  <li><span class="pi-bullet-icon"><i class="icon-home"></i></span>Totam rem <strong>aperiam</strong></li>
  <li><span class="pi-bullet-icon"><i class="icon-eye"></i></span>Veritatis et quasi architecto</li>
</ul>

List with different icons in circle - contur style

• Perspiciatis unde omnis
• Voluptatem accusantium
• Totam rem aperiam
• Veritatis et quasi architecto

<ul class="pi-bullets-circle pi-bullets-contur">
  <li><span class="pi-bullet-icon"><i class="icon-camera"></i></span><strong>Perspiciatis</strong> unde omnis</li>
  <li><span class="pi-bullet-icon"><i class="icon-picture"></i></span>Voluptatem accusantium</li>
  <li><span class="pi-bullet-icon"><i class="icon-home"></i></span>Totam rem <strong>aperiam</strong></li>
  <li><span class="pi-bullet-icon"><i class="icon-eye"></i></span>Veritatis et quasi architecto</li>
</ul>

List with different icons in circle - contur style - base theme color

• Perspiciatis unde omnis
• Voluptatem accusantium
• Totam rem aperiam
• Veritatis et quasi architecto

<ul class="pi-bullets-circle pi-bullets-contur pi-bullets-contur-base">
  <li><span class="pi-bullet-icon"><i class="icon-camera"></i></span><strong>Perspiciatis</strong> unde omnis</li>
  <li><span class="pi-bullet-icon"><i class="icon-picture"></i></span>Voluptatem accusantium</li>
  <li><span class="pi-bullet-icon"><i class="icon-home"></i></span>Totam rem <strong>aperiam</strong></li>
  <li><span class="pi-bullet-icon"><i class="icon-eye"></i></span>Veritatis et quasi architecto</li>
</ul>

List with different images

• Perspiciatis unde omnis
• Voluptatem accusantium
• Totam rem aperiam
• Veritatis et quasi architecto

<ul class="pi-list-with-icons">
  <li><span class="pi-bullet-icon-img"><img src="img_external/icons/monitor-16.png"></span><strong>Perspiciatis</strong> unde omnis</li>
  <li><span class="pi-bullet-icon-img"><img src="img_external/icons/mobile-16.png"></span>Voluptatem accusantium</li>
  <li><span class="pi-bullet-icon-img"><img src="img_external/icons/cloud-16.png"></span>Totam rem <strong>aperiam</strong></li>
  <li><span class="pi-bullet-icon-img"><img src="img_external/icons/mail-16.png"></span>Veritatis et quasiarchitecto</li>
</ul>

List with different images in circle

• Perspiciatis unde omnis
• Voluptatem accusantium
• Totam rem aperiam
• Veritatis et quasi architecto

<ul class="pi-list-with-icons pi-bullets-circle">
  <li><span class="pi-bullet-icon-img"><img src="img_external/icons/monitor-16.png"></span><strong>Perspiciatis</strong> unde omnis</li>
  <li><span class="pi-bullet-icon-img"><img src="img_external/icons/mobile-16.png"></span>Voluptatem accusantium</li>
  <li><span class="pi-bullet-icon-img"><img src="img_external/icons/cloud-16.png"></span>Totam rem <strong>aperiam</strong></li>
  <li><span class="pi-bullet-icon-img"><img src="img_external/icons/mail-16.png"></span>Veritatis et quasiarchitecto</li>
</ul>