2017-11-25 09:25:43 +01:00
|
|
|
---
|
|
|
|
title: Lists
|
2017-11-25 17:37:31 +01:00
|
|
|
description: PaperCSS Lists
|
2017-11-25 09:25:43 +01:00
|
|
|
---
|
|
|
|
|
|
|
|
### Ordered Lists
|
|
|
|
|
|
|
|
<ol>
|
|
|
|
<li>Do this</li>
|
|
|
|
<li>Then this</li>
|
|
|
|
<li>Finally this</li>
|
|
|
|
<li>Then we'll go one deeper</li>
|
|
|
|
<ol>
|
|
|
|
<li>Dillon</li>
|
|
|
|
<li>Francis</li>
|
|
|
|
<ol>
|
|
|
|
<li>What if we went...</li>
|
|
|
|
<li>One more deeper?</li>
|
|
|
|
<ol>
|
|
|
|
<li>DJ</li>
|
|
|
|
<li>Hanzel</li>
|
|
|
|
<ol>
|
|
|
|
<li>Five levels should be enough</li>
|
|
|
|
<li>Right?</li>
|
|
|
|
</ol>
|
|
|
|
</ol>
|
|
|
|
</ol>
|
|
|
|
</ol>
|
|
|
|
<li>But don't forget this</li>
|
|
|
|
</ol>
|
|
|
|
|
|
|
|
### Unordered Lists
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
<li>Let's try this</li>
|
|
|
|
<li>Let's try this again</li>
|
|
|
|
<ul>
|
|
|
|
<li>And now we are nested</li>
|
|
|
|
<li>Pretty cool?</li>
|
|
|
|
<ul>
|
|
|
|
<li>The list items are just text</li>
|
|
|
|
<li>From this font</li>
|
|
|
|
<ul>
|
|
|
|
<li>We'll keep going</li>
|
|
|
|
<li>Until we hit</li>
|
|
|
|
<ul>
|
|
|
|
<li>LEVEL 5</li>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
<li>And now we're are the top!</li>
|
|
|
|
</ul>
|
|
|
|
|
2017-12-28 07:07:35 +01:00
|
|
|
### Inline List
|
|
|
|
|
|
|
|
<ul class="inline">
|
|
|
|
<li>Item 1</li>
|
|
|
|
<li>Item 2</li>
|
|
|
|
<li>Item 3</li>
|
|
|
|
<li>Item 4</li>
|
|
|
|
</ul>
|
|
|
|
|
2017-11-25 09:25:43 +01:00
|
|
|
#### Codes:
|
|
|
|
|
|
|
|
```html
|
|
|
|
<ol>
|
|
|
|
<li>Do this</li>
|
|
|
|
<li>Then this</li>
|
|
|
|
<li>Finally this</li>
|
|
|
|
<li>Then we'll go one deeper</li>
|
|
|
|
<ol>
|
|
|
|
<li>Dillon</li>
|
|
|
|
<li>Francis</li>
|
|
|
|
<ol>
|
|
|
|
<li>What if we went...</li>
|
|
|
|
<li>One more deeper?</li>
|
|
|
|
<ol>
|
|
|
|
<li>DJ</li>
|
|
|
|
<li>Hanzel</li>
|
|
|
|
<ol>
|
|
|
|
<li>Five levels should be enough</li>
|
|
|
|
<li>Right?</li>
|
|
|
|
</ol>
|
|
|
|
</ol>
|
|
|
|
</ol>
|
|
|
|
</ol>
|
|
|
|
<li>But don't forget this</li>
|
|
|
|
</ol>
|
|
|
|
|
|
|
|
<!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! -->
|
|
|
|
```
|