List Unordered
Unordered lists use a <ul> tag that contains <li> tags.
ul
- List item level 1
- List item level 1 lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit autem accusantium quibusdam reiciendis incidunt sed, amet perspiciatis, sequi cum aperiam sunt excepturi corporis.
- List item level 2
- List item level 2 lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores consectetur, dolore laboriosam, porro cumque optio? Aliquid aperiam expedita, magni, cum ex, quaerat veritatis pariatur quibusdam nostrum omnis, suscipit itaque beatae.
- List item level 2
- List item level 2
- List item level 3
- List item level 3
- List item level 1
- List item level 1
<ul class="list-align">
<li>List item level 1</li>
<li>List item level 1 lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit autem accusantium quibusdam reiciendis incidunt sed, amet perspiciatis, sequi cum aperiam sunt excepturi corporis.</li>
<ul>
<li>List item level 2</li>
<li>List item level 2 lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores consectetur, dolore laboriosam, porro cumque optio? Aliquid aperiam expedita, magni, cum ex, quaerat veritatis pariatur quibusdam nostrum omnis, suscipit itaque beatae.</li>
</ul>
<ul>
<li>List item level 2</li>
<li>List item level 2</li>
<ul>
<li>List item level 3</li>
<li>List item level 3</li>
</ul>
</ul>
<li>List item level 1</li>
<li>List item level 1</li>
</ul>
These are nested unordered <ul> lists. Create <ul> tags that contain <li> tags. List variables can be adjusted in _global.scss
ul
- list item 1
- list item 2
- list item 3
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
Default <ul> unordered list without a class. Create a <ul> tag that contains <li> tags. List variables can be adjusted in _global.scss
list-circle
- list item 1
- list item 2
- list item 3
<ul class="list-circle">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
Create a <ul> tag that contains <li> tags, and apply the list-circle class. List variables can be adjusted in _global.scss
list-disk
- list item 1
- list item 2
- list item 3
<ul class="list-disk">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
Create a <ul> tag that contains <li> tags, and apply the list-disk class. List variables can be adjusted in _global.scss
list-square
- list item 1
- list item 2
- list item 3
<ul class="list-square">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
Create a <ul> tag that contains <li> tags, and apply the list-square class. List variables can be adjusted in _global.scss