List

Lists display a set of related items, optionally with icons, images, or interactive controls.

<ul class="tng-list">
  <li class="tng-list-option">Option 1</li>
  <li class="tng-list-option">Option 2</li>
</ul>

• Option 1
• Option 2

Elements

Icons

<div class="tng-list-option">
  <i aria-hidden="true" class="tng-icon icon-car is-md"></i>
  Option 1
  <i
    aria-hidden="true"
    class="tng-icon icon-chevron-right tng-rtl-flip-x"
  ></i>
</div>

Option 1

Image

<ul class="tng-list">
  <li class="tng-list-option">
    <img src="/_astro/prius.B6m1c0f0.png" role="presentation" />
    <span>Toyota Prius</span>
  </li>
</ul>

• Toyota Prius

Content

Checkbox Control

<div class="tng-list-option">
  <label class="tng-checkbox-control">
    <input type="checkbox" />
    <span>Option 1</span>
  </label>
</div>

Option 1

Interactive Content

You can wrap the content of a list option in an interactive element, such as a link or button, to make the entire option clickable.

<div class="tng-list-option">
  <button>
    <i aria-hidden="true" class="tng-icon icon-car is-md"></i>
    <span>Option 1</span>
    <i
      aria-hidden="true"
      class="tng-icon icon-chevron-right tng-rtl-flip-x"
    ></i>
  </button>
</div>

Option 1

Powertrain Option

There’s a special layout for powertrain options that includes an icon, subtitle, and additional info.

<li class="tng-list-option">
  <img role="presentation" src="/_astro/prius.B6m1c0f0.png" />
  <div class="tng-list-powertrain">
    <div class="tng-list-powertrain-subtitle">
      <em>
        <i class="tng-icon icon-plug-droplet"></i>
        <span>Powertrain</span>
      </em>
      <div>333 mi</div>
    </div>
    <div>Toyota Prius</div>
  </div>
</li>

Powertrain

333 mi

Toyota Prius

Modules

Login Menu

<ul class="tng-list | tng-has-dividers">
  <li class="tng-list-option">
    <a class="pb-lg" href="#">
      <span>My Vehicles</span>
      <i
        aria-hidden="true"
        class="tng-icon icon-chevron-right tng-rtl-flip-x"
      ></i>
    </a>
  </li>
  <li class="tng-list-option">
    <a class="pb-lg" href="#">
      <span>My finance</span>
      <i
        aria-hidden="true"
        class="tng-icon icon-chevron-right tng-rtl-flip-x"
      ></i>
    </a>
  </li>
  <li class="tng-list-option">
    <a class="pb-lg" href="#">
      <span>My Toyota App</span>
      <i
        aria-hidden="true"
        class="tng-icon icon-chevron-right tng-rtl-flip-x"
      ></i>
    </a>
  </li>
  <li class="tng-list-option">
    <a class="pb-lg" href="#">
      <span>My Rewards</span>
      <i
        aria-hidden="true"
        class="tng-icon icon-chevron-right tng-rtl-flip-x"
      ></i>
    </a>
  </li>
</ul>

• My Vehicles
• My finance
• My Toyota App
• My Rewards

Plain List

<ol class="tng-plain-list">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>
    Nested ordered list
    <ol>
      <li>Nested list item 1</li>
      <li>Nested list item 2</li>
    </ol>
  </li>
  <li>
    Nested unordered list
    <ul>
      <li>Nested list item 1</li>
      <li>Nested list item 2</li>
    </ul>
  </li>
</ol>

1. List item 1
2. List item 2
3. Nested ordered list
   1. Nested list item 1
   2. Nested list item 2
4. Nested unordered list
   • Nested list item 1
   • Nested list item 2

<ul class="tng-plain-list">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>
    Nested ordered list
    <ol>
      <li>Nested list item 1</li>
      <li>Nested list item 2</li>
    </ol>
  </li>
  <li>
    Nested unordered list
    <ul>
      <li>Nested list item 1</li>
      <li>Nested list item 2</li>
    </ul>
  </li>
</ul>

• List item 1
• List item 2
• Nested ordered list
  1. Nested list item 1
  2. Nested list item 2
• Nested unordered list
  • Nested list item 1
  • Nested list item 2

Accessibility

Navigation lists

For navigation menus (like the Login Menu), wrap the <ul> in a <nav> element with an aria-label to identify the navigation region.

<nav aria-label="Account menu">
  <ul class="tng-list">
    …
  </ul>
</nav>

Selection lists

For selection lists used with dropdowns, apply role="listbox" / role="option" — see the Dropdown accessibility docs.

Icons & images

• Mark decorative images with role="presentation" and icons with aria-hidden="true" (already shown in the examples).
• Provide meaningful alt text on images that convey information.

Interactive options

Interactive list options must use <button> or <a> elements so they are keyboard-focusable and announced correctly by screen readers.