Sections

Core concepts

Base styles

Lists

The <ol>, <ul> and <dl> HTML elements represent different types of lists that you can use in your theme.

In this article

Unordered lists (<ul>) are used for layout purposes in many page templates, and all three are commonly used within article and post content.

Usage

Use <ul> or <ol> to wrap one or more <li> items to create an unordered or ordered list, respectively.

Use <dl> to wrap one or more combinations of <dt> and <dd> elements to create a description list.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. Lorem ipsum
  2. Phasellus iaculis
  3. Nulla volutpat
Description term
Description element
<ul>
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

<ol>
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ol>

<dl>
  <dt>Description term</dt>
  <dd>Description element</dd>
</dl>

Customization

Variable Description
$padding-list The padding applied to <ul>, <ul> and <dl> elements.
$margin-list The margin applied to <ul>, <ul> and <dl> elements.