Lists | wire

List

Ordered List

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5
List Item 6

HTML


    <ol>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
      <li>List Item 5</li>
      <li>List Item 6</li>
    </ol>

Unordered List

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5
List Item 6

HTML


    <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
      <li>List Item 5</li>
      <li>List Item 6</li>
    </ul>

Definition List

Definition List Title: This is a definition list division.
Definition List Title: This is a definition list division.
Definition List Title: This is a definition list division.
Definition List Title: This is a definition list division.

HTML


    <dl>
      <dt>Definition List Title</dt>
      <dd>This is a definition list division.</dd>
      <dt>Definition List Title</dt>
      <dd>This is a definition list division.</dd>
      <dt>Definition List Title</dt>
      <dd>This is a definition list division.</dd>
      <dt>Definition List Title</dt>
      <dd>This is a definition list division.</dd>
    </dl>

Definition List Horizontal

Add class list--horizontal to dl

Definition List Title: This is a definition list division.
Definition List Title: This is a definition list division.
Definition List Title: This is a definition list division.
Definition List Title: This is a definition list division.

HTML


    <dl class="list--horizontal">
      <dt>Definition List Title</dt>
      <dd>This is a definition list division.</dd>
      <dt>Definition List Title</dt>
      <dd>This is a definition list division.</dd>
      <dt>Definition List Title</dt>
      <dd>This is a definition list division.</dd>
      <dt>Definition List Title</dt>
      <dd>This is a definition list division.</dd>
    </dl>

List Unstyled

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5
List Item 6

HTML


    <ul class="list--unstyled">
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
      <li>List Item 5</li>
      <li>List Item 6</li>
    </ul>

List Inline

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5
List Item 6

HTML


    <ul class="list--inline">
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
      <li>List Item 5</li>
      <li>List Item 6</li>
    </ul>