Unity Pattern Lab

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

									
										
			<ul class="">
				<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>

Unordered Arrow Bullets

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

									
										
			<ul class="arrow-bullets">
				<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>

Unordered Check Bullets

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

									
										
			<ul class="check-bullets">
				<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>

Unordered Default Bullets

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

									
										
			<ul class="default-bullets">
				<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>

Unordered No Bullets

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

									
										
			<ul class="no-bullets">
				<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>

Unordered Star Bullets

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

									
										
			<ul class="star-bullets">
				<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

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

									
										
			<ol class="">
				<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>

Ordered Alpha Bullets

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

									
										
			<ol class="upper-alpha">
				<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>

Ordered Number Bullets

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

									
										
			<ol class="number">
				<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

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

									
										<div class="container">
	<div class="row">
		<div class="col-sm-12">
			<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>
		</div>
	</div>
</div>

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.

Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

November 19, 2013

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

July 22, 2013

Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.

Quisque ac odio vel massa tempor euismod ac nec massa. Maecenas congue sapien a diam blandit, sed facilisis augue aliquam. Pellentesque laoreet, ante quis pulvinar consequat, justo elit ultricies tortor, sed ultrices elit nisi in ligula. Sed pharetra ipsum eros, id ullamcorper felis convallis sed. Nam varius ultrices aliquet. Nam ornare fermentum ante, ac malesuada leo maximus ac.

March 22, 2013

Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.

Quisque ac odio vel massa tempor euismod ac nec massa. Maecenas congue sapien a diam blandit, sed facilisis augue aliquam. Pellentesque laoreet, ante quis pulvinar consequat, justo elit ultricies tortor, sed ultrices elit nisi in ligula. Sed pharetra ipsum eros, id ullamcorper felis convallis sed. Nam varius ultrices aliquet. Nam ornare fermentum ante, ac malesuada leo maximus ac.

April 13, 2013

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

October 25, 2013

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.

Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

HTML

									
										<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <dl class="dl-horizontal">

        <dt>September 04, 2013</dt>
        <dd><p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p></dd>


        <dt>November 19, 2013</dt>
        <dd><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></dd>


        <dt>July 22, 2013</dt>
        <dd><p>Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.</p><p>Quisque ac odio vel massa tempor euismod ac nec massa. Maecenas congue sapien a diam blandit, sed facilisis augue aliquam. Pellentesque laoreet, ante quis pulvinar consequat, justo elit ultricies tortor, sed ultrices elit nisi in ligula. Sed pharetra ipsum eros, id ullamcorper felis convallis sed. Nam varius ultrices aliquet. Nam ornare fermentum ante, ac malesuada leo maximus ac.</p></dd>


        <dt>March 22, 2013</dt>
        <dd><p>Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.</p><p>Quisque ac odio vel massa tempor euismod ac nec massa. Maecenas congue sapien a diam blandit, sed facilisis augue aliquam. Pellentesque laoreet, ante quis pulvinar consequat, justo elit ultricies tortor, sed ultrices elit nisi in ligula. Sed pharetra ipsum eros, id ullamcorper felis convallis sed. Nam varius ultrices aliquet. Nam ornare fermentum ante, ac malesuada leo maximus ac.</p></dd>


        <dt>April 13, 2013</dt>
        <dd><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></dd>


        <dt>October 25, 2013</dt>
        <dd><p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p></dd>

      </dl>
    </div>
  </div>
</div>

Inline

Pri at omnis
Lysine contingency
Shizz fo shizzle
Duo omnes scripta

HTML

									
										
			<ul class="list-inline">
        <li>Pri at omnis</li>
        <li>Lysine contingency</li>
        <li>Shizz fo shizzle</li>
        <li>Duo omnes scripta</li>
			</ul>