mirror of
https://github.com/papercss/papercss
synced 2024-06-02 14:02:34 +02:00
2.7 KiB
2.7 KiB
| title | description |
|---|---|
| List group | PaperCSS list groups |
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>