Call Us: +7.906.229.2627
Email: hello@pitheme.com
Follow Us:
HTML5 template

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>
Latest Tweet
Contact Us
  • Address: 557 Cyan Avenue, Suite 65,
    New York, CA 9008
  • Phone: (123) 456-7890
  • Email: hello@pitheme.com
  • Monday - Friday: 9:00 am - 10:00 pm
    Saturday - Sunday: Closed
Say Hey

© 2014. «Aura HTML Theme». All right reserved.