Design System lists


Ordered list (<ol>)

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

Unordered list (<ul>)

ul.list-plain

ul.list-padded.list-plain

ul.list-inline.list-plain

<div class="container narrow no-padding">
	<div class="box">
		<h3>Ordered list <code>(&lt;ol&gt;)</code></h3>
		<ol>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ol>
		
		<h3>Unordered list <code>(&lt;ul&gt;)</code></h3>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
		
		<h3><code>ul.list-plain</code></h3>
		<ul class="list-plain">
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	
		<h3><code>ul.list-padded.list-plain</code></h3>
		<ul class="list-padded list-plain">
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	
		<h3><code>ul.list-inline.list-plain</code></h3>
		<ul class="list-inline list-plain">
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	</div>
</div>
Please note: By using this site, you accept cookies from Google Analytics.