<dl>
  <dt><code>reversed</code></dt>
  <dd>
    When specified, it displays the marker of the individual list items in a
    decending order
  </dd>
  <dt><code>start</code></dt>
  <dd>
    Sets the position at which the list items will start. For example, setting
    `start="3"` will mark the first item in the list as the number 3.
  </dd>
  <dt><code>type</code></dt>
  <dd>
    Specifies the type of marker to use for the list items, for example letters
    or roman numerals.
  </dd>
</dl>

<h2>Styled description list</h2>

<dl class="styled-description-list">
  <div>
    <dt><code>reversed</code></dt>
    <dd>
      When specified, it displays the marker of the individual list items in a
      decending order
    </dd>
  </div>
  <div>
    <dt><code>start</code></dt>
    <dd>
      Sets the position at which the list items will start. For example, setting
      `start="3"` will mark the first item in the list as the number 3.
    </dd>
  </div>
  <div>
    <dt><code>type</code></dt>
    <dd>
      Specifies the type of marker to use for the list items, for example
      letters or roman numerals.
    </dd>
  </div>
</dl>
.styled-description-list {
  display: flex;
  grid-gap: 24px;
  gap: 24px;
}

.styled-description-list div {
  flex-basis: 35%;
}

.styled-description-list dt {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 12px;
}

.styled-description-list dd {
  margin: 0;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.