PaperCSS

the less formal CSS framework

^

List group

Simple list group example

  • List item #1
  • List item #2
  • List item #3

Code

<ul class="list-group">
    <li>List item #1</li>
    <li>List item #2</li>
    <li>List item #3</li>
</ul>

With an active element

  • List item #1
  • List item #2
  • List item #3

Code

<ul class="list-group">
    <li class="active">
        List item #1
    </li>
    <li>
        List item #2
    </li>
    <li>
        List item #3
    </li>
</ul>

Colors

  • List item secondary
  • List item success
  • List item danger
  • List item warning

Code

<ul class="list-group">
    <li class="list-group-item-success">
        List item success
    </li>
    <li class="list-group-item-danger">
        List item danger
    </li>
    <li class="list-group-item-warning">
        List item warning
    </li>
</ul>

Custom content

Heading #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code

<div class="list-group">
    <div class="list-group-item active">
        <h4>Heading #1</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>
    <div class="list-group-item">
        <h4>Heading #2</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>
    <div class="list-group-item-success">
        <h4>Heading #3</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>
</div>