Unordered and ordered lists are composed virtually the same. The <ul> is used for non-sequential orderingm while the <ol> is for specific ordering and are preceeded by numbers by default. I start out by stripping all styling from any lists, including padding and margin. Bulleted lists are then classed as <ul class="bulleted>, etc. Lists also get classes added to the first and last item in each (.js-first / .js-last), this gets used for removing any border that we don't want to appear at the top or bottom in particular. Examples below.
A Basic Unordered List
- This is a list item in an unordered list
- An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
- Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
- This is the last list item
<ul>
<li>This is a list item in an unordered list</li>
<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
<li>
Lists can be nested inside of each other
<ul>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
<li>This is the last list item</li>
</ul>A Vertical Bulleted Unordered List
- This is a list item in an unordered list
- An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
- Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
- This is the last list item
<ul class="vertical bulleted">
<li>This is a list item in an unordered list</li>
<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
<li>
Lists can be nested inside of each other
<ul>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
<li>This is the last list item</li>
</ul>Ordered List
- This is a list item in an ordered list
- An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
- Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an ordered list
- This is the last list item
<ol>
<li>This is a list item in an ordered list</li>
<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
<li>
Lists can be nested inside of each other
<ol>
<li>This is a nested list item</li>
<li>This is another nested list item in an ordered list</li>
</ol>
</li>
<li>This is the last list item</li>
</ol>Definition List
- Definition List
- A number of connected items or names written or printed consecutively, typically one below the other.
- This is a term.
- This is the definition of that term, which both live in a dl.
- Here is another term.
- And it gets a definition too, which is this line.
- Here is term that shares a definition with the term below.
- And it gets a definition too, which is this line.
<dl>
<dt>Definition List</dt>
<dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
<dt>This is a term.</dt>
<dd>This is the definition of that term, which both live in a dl.</dd>
<dt>Here is another term.</dt>
<dd>And it gets a definition too, which is this line.</dd>
<dt>Here is term that shares a definition with the term below.</dt>
<dd>And it gets a definition too, which is this line.</dd>
</dl>Style those lists!
Vertical - adds some breathing room
- Lorem
- Ipsum
- Dolor
Vertical Lined - adds some visuals breaks between li's
- Lorem
- Ipsum
- Dolor
Vertical Lined - adds some visuals breaks between li's
- Lorem
- Ipsum
- Dolor
Vertical Lined & Striped - well, you get it!
- Lorem
- Ipsum
- Dolor
Horizontal Slashes - add dividers to your list
- Lorem
- Ipsum
- Dolor
Horizontal Pipes - add dividers to your list
- Lorem
- Ipsum
- Dolor