List Bullet
Text Lists are more dependentent upon HTML and CSS resets than other elements, particularly to control indents.
evo-list-bullet
- 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="evo-list-bullet">
<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
list-bullet
- list item 1
- list item 2
- list item 3
<ul class="list-bullet>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
This is a <ul> list with customized bullets. Bullet colors can bullet symbol character can be customized. Create a <ul> tag that contains <li> tags, and apply the evo-list-bullet class. Add the list-bullet-dash class to the <ul> to change the symbol character. Use the list-bullet-gray class make the bullets look more neutral. List variables can be adjusted in _variables.scss
list-[bullet]
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
<ul class="evo-list-bullet bullet-dash>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
This is a <ul> list with customized bullets. Bullet colors can bullet symbol character can be customized. Create a <ul> tag that contains <li> tags, and apply the evo-list-bullet class. Add the list-dash class to the <ul> to change the symbol character. Use the list-bullet-gray class make the bullets look more neutral. List variables can be adjusted in _variables.scss
list-[color]
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
<ul class="evo-list-bullet bullet-color">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
Create a <ul> tag that contains <li> tags. Apply the evo-list-bullet class followed by a color class such as list-gray. List variables can be adjusted in _variables.scss