Lists

Unordered List

Item 1
Item 2
Item 3
Item 4
Item 5

HTML

<ul class="fizz-unordered-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Ordered List

Item 1
Item 2
Item 3
Item 4
Item 5

HTML

<ol class="fizz-ordered-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>

Horizontal List

HTML

<ul class="fizz-horizontal-list">
  <li><a href="#">Menu Item One</a></li>
  <li><a href="#">Menu Item Two</a></li>
  <li><a href="#">Menu Item Three</a></li>
</ul>

Definition List

Detail List Term: Description Detail Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, eos iste! Voluptates omnis asperiores libero voluptas, porro provident unde accusamus veritatis excepturi earum similique saepe, adipisci cumque nihil sapiente quam!
Detail List Term: Description Detail Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit ratione veritatis sit minima reprehenderit voluptatem similique cum voluptatum praesentium aliquam, velit ab porro, eveniet odio nam, consequatur inventore harum.
Detail List Term: Description Detail Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia esse porro veniam nesciunt iste quisquam et, vero praesentium numquam! Ipsum iste suscipit ipsa unde, cupiditate libero magnam perferendis illo assumenda?

HTML

<dl class="fizz-definition-list">
  <dt>Detail List Term</dt>
  <dd>Description Detail Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, eos iste! Voluptates omnis asperiores libero voluptas, porro provident unde accusamus veritatis excepturi earum similique saepe, adipisci cumque nihil sapiente quam!</dd>
  <dt>Detail List Term</dt>
  <dd>Description Detail Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit ratione veritatis sit minima reprehenderit voluptatem similique cum voluptatum praesentium aliquam, velit ab porro, eveniet odio nam, consequatur inventore harum.</dd>
  <dt>Detail List Term</dt>
  <dd>Description Detail Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia esse porro veniam nesciunt iste quisquam et, vero praesentium numquam! Ipsum iste suscipit ipsa unde, cupiditate libero magnam perferendis illo assumenda?</dd>
</dl>

Horizontal Definition List

Align a definition list horizontally using CSS grid. You can apply a custom property to override the default value of the grid gap.

Custom Property	Default Value	Description
`--grid-gap`	8px 16px	The gap between rows/columns

Detail List Term: Description Detail Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, eos iste! Voluptates omnis asperiores libero voluptas, porro provident unde accusamus veritatis excepturi earum similique saepe, adipisci cumque nihil sapiente quam!
Detail List Term: Description Detail Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit ratione veritatis sit minima reprehenderit voluptatem similique cum voluptatum praesentium aliquam, velit ab porro, eveniet odio nam, consequatur inventore harum.
Detail List Term: Description Detail Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia esse porro veniam nesciunt iste quisquam et, vero praesentium numquam! Ipsum iste suscipit ipsa unde, cupiditate libero magnam perferendis illo assumenda?

HTML

<dl class="fizz-definition-list-horizontal" style="--grid-gap: 16px 32px">
  <dt>Detail List Term</dt>
  <dd>Description Detail Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, eos iste! Voluptates omnis asperiores libero voluptas, porro provident unde accusamus veritatis excepturi earum similique saepe, adipisci cumque nihil sapiente quam!</dd>
  <dt>Detail List Term</dt>
  <dd>Description Detail Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit ratione veritatis sit minima reprehenderit voluptatem similique cum voluptatum praesentium aliquam, velit ab porro, eveniet odio nam, consequatur inventore harum.</dd>
  <dt>Detail List Term</dt>
  <dd>Description Detail Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia esse porro veniam nesciunt iste quisquam et, vero praesentium numquam! Ipsum iste suscipit ipsa unde, cupiditate libero magnam perferendis illo assumenda?</dd>
</dl>

Definition List Grid

A definition list of key/value pairs, similar to a responsive table row.

There are a few default values expressed as CSS custom properties, which you can override inline as needed.

Custom Property	Default Value	Description
`--label-min-width`	120px	The minimum width of the label column on small screens
`--first-item-min-width`	175px	The minimum width of the first item on large screens
`--item-min-width`	150px	The minimum width of the remaining items on large screens

Status: Deposit Pending
Invoice: #39872394
Distributor: Eagle Rock
Deposit Amount: $821.02
Fees: $42.07
Amount: $861.82

HTML

<dl class="fizz-definition-list-grid">
  <div>
    <dt>Status</dt>
    <dd><span class="fizz-pill-yellow">Deposit Pending</span></dd>
  </div>
  <div>
    <dt>Invoice</dt>
    <dd>#39872394</dd>
  </div>
  <div>
    <dt>Distributor</dt>
    <dd>Eagle Rock</dd>
  </div>
  <div>
    <dt>Deposit Amount</dt>
    <dd>$821.02</dd>
  </div>
  <div>
    <dt>Fees</dt>
    <dd>$42.07</dd>
  </div>
  <div>
    <dt>Amount</dt>
    <dd><strong>$861.82</strong></dd>
  </div>
</dl>

Option Item List

Credit or Debit Card

3% convenience fee per transaction
Bank Account

No transaction fee

HTML

<ul class="fizz-option-item-list">
  <li>
    <p><strong>Credit or Debit Card</strong></p>
    <p>3% convenience fee per transaction</p>
  </li>
  <li>
    <p><strong>Bank Account</strong></p>
    <p>No transaction fee</p>
  </li>
</ul>