Base Creative Pattern Lab

Definition

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.

HTML

									
										<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 <code>dl</code>.</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>

Icon List

hello@basecreative.co.uk
0207 359 0005

Studio 209
Business Design Centre
London
N1 DQH
View in Google Maps

HTML

									
										<ul class="iconed-list">
	<li class="icon--email"><a href="mailto:hello@basecreative.co.uk">hello@basecreative.co.uk</a></li></li>
	<li class="icon--phone">0207 359 0005<br/><br/>
		Studio 209<br/>
		Business Design Centre<br/>
		London<br/>
		N1 DQH
	</li>
	<li class="icon--map"><a href="mailto:hello@basecreative.co.uk">View in Google Maps</a></li>
</ul>

Ordered

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
1. This is a nested list item
2. This is another nested list item in an ordered list
This is the last list item

HTML

									
										<div class="text">
	<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>
</div>

Titled List

List title

Item of list
Item of list
Item of list
Item of list
Item of list
Item of list
Item of list
Item of list

HTML

									
										<div class="titled-list">
	<h3 class="titled-list__title">List title</h3>
	<ul class="titled-list__list">
		<li>Item of list</li>
		<li>Item of list</li>
		<li>Item of list</li>
		<li>Item of list</li>
		<li>Item of list</li>
		<li>Item of list</li>
		<li>Item of list</li>
		<li>Item of list</li>
	</ul>
</div>

Unordered

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

HTML

									
										<div class="text">
	<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>
</div>