List

On this page

# Intro

Lists are classless and have no list style by default. Lists are created with ul and ol elements.

Tools

  • Atom
  • Github
  • Slack

Tools

  1. Atom
  2. Github
  3. Slack
<ul>
	<li>Atom</li>
	<li>Github</li>
	<li>Slack</li>
</ul>
...
<ol>
	<li>Atom</li>
	<li>Github</li>
	<li>Slack</li>
</ol>

# Inline

You can make a list inline by using the -inline modifier.

Tools

  • Atom
  • Github
  • Slack

Tools

  1. Atom
  2. Github
  3. Slack
<ul class="-inline">
	<li>Atom</li>
	<li>Github</li>
	<li>Slack</li>
</ul>
...
<ol class="-inline">
	<li>Atom</li>
	<li>Github</li>
	<li>Slack</li>
</ol>

# Ordered

Ordered lists have several modifiers available for changing the list style.

-decimal

  1. Atom
  2. Github
  3. Slack

-leading-decimal

  1. Atom
  2. Github
  3. Slack

-lower-alpha

  1. Atom
  2. Github
  3. Slack

-lower-roman

  1. Atom
  2. Github
  3. Slack

-upper-alpha

  1. Atom
  2. Github
  3. Slack

-upper-roman

  1. Atom
  2. Github
  3. Slack
<ol class="-decimal">
	...
</ol>
...
<ol class="-leading-decimal">
	...
</ol>
...
<ol class="-lower-alpha">
	...
</ol>
...
<ol class="-lower-roman">
	...
</ol>
...
<ol class="-upper-alpha">
	...
</ol>
...
<ol class="-upper-roman">
	...
</ol>

# Unordered

Unordered lists have a few modifiers available for changing the list style.

-circle

  • Atom
  • Github
  • Slack

-disc

  • Atom
  • Github
  • Slack

-square

  • Atom
  • Github
  • Slack
<ul class="-circle">
	...
</ul>
...
<ul class="-disc">
	...
</ul>
...
<ul class="-square">
	...
</ul>

# Definition

You can create a definition list of key-value pairs by using the dl element along with dt and dd elements.

HTML
Hyper Text Markup Language.
CSS
Cascading Style Sheets.
JavaScript
Lightweight, interpreted, or just-in-time compiled programming language with first-class functions.
<dl>
	<dt>HTML</dt>
	<dd>Hyper Text Markup Language.</dd>

	<dt>CSS</dt>
	<dd>Cascading Style Sheets.</dd>

	<dt>JavaScript</dt>
	<dd>Lightweight, interpreted, or just-in-time compiled programming language with first-class functions.</dd>
</dl>