Skip to content
VolvoVolvo Cars Web Design System

List Item

Edit on GitHub

List rows with text, actions, or a full-row link.

List items

Section titled “List items”

  • Service agreement

    £9/month

  • Label

  • Label

  • car exterior

    EX60 P12

    £1120/month

  • 22” 5-Y spoke matt black

    Included

  • Tinted rear windows

    £525

  • Exterior theme dark

    £0

Show codeHide code
<ul class="mb-48">
  <li class="list-item">
    <div>
      <div>
        <p slot="body">Service agreement</p>
      </div>
      <p slot="after">£9/month</p>
    </div>
  </li>
</ul>
<ul class="mb-48">
  <li class="list-item">
    <div>
      <div>
        <p slot="body">Label</p>
      </div>
      <input slot="after" class="switch" role="switch" type="checkbox" />
    </div>
  </li>


  <li class="list-item">
    <div>
      <div>
        <p slot="body">Label</p>
      </div>
      <input slot="after" class="checkbox" type="checkbox" />
    </div>
  </li>
</ul>
<ul class="mb-48">
  <li class="list-item">
    <img
      slot="before"
      src="/images/cars/thumbnails/ex60-electric.avif"
      alt="car exterior"
      class="img aspect-1/1 object-cover bg-feedback-gray"
    />
    <div>
      <div>
        <p slot="body">EX60 P12</p>
      </div>
      <p slot="after">£1120/month</p>
    </div>
  </li>


  <li class="list-item">
    <img
      slot="before"
      src="/images/cars/thumbnails/wheel-with-padding.avif"
      alt=""
      class="img aspect-1/1 object-cover bg-feedback-gray"
    />
    <div>
      <div>
        <p slot="body">22” 5-Y spoke matt black</p>
      </div>
      <p slot="after">Included</p>
    </div>
  </li>
</ul>
<ul class="mb-48">
  <li class="list-item">
    <img
      slot="before"
      src="/images/cars/thumbnails/tinted-rear-windows-ex60.avif"
      alt=""
      class="img aspect-1/1 object-cover"
    />
    <div>
      <div>
        <h3 slot="title">Tinted rear windows</h3>
        <p slot="body">£525</p>
      </div>
      <button
        slot="after"
        type="button"
        class="button-filled"
        data-size="small"
      >
        Add
      </button>
    </div>
  </li>


  <li class="list-item">
    <img
      slot="before"
      src="/images/cars/thumbnails/dark-exterior-design-theme-ex60.avif"
      alt=""
      class="img aspect-1/1 object-cover"
    />
    <div>
      <div>
        <h3 slot="title">Exterior theme dark</h3>
        <p slot="body">£0</p>
      </div>
      <button
        slot="after"
        type="button"
        class="button-filled"
        data-size="small"
      >
        Add
      </button>
    </div>
  </li>
</ul>
Section titled “Navigation list items”
Show codeHide code
import { Icon } from '@volvo-cars/react-icons';


export function NavigationListItemRows() {
  return (
    <>
      <ul className="mb-48">
        <li className="navigation-list-item">
          <a href="#top" aria-label="Charging station cable, 6 m (16 A)">
            <img
              slot="before"
              className="img aspect-1/1 bg-feedback-gray"
              src="/images/cars/thumbnails/charging-cable-transparent.avif"
              alt=""
            />
            <div>
              <h3 slot="title">Charging station cable, 6 m (16 A)</h3>
              <p slot="body">Included</p>
            </div>
          </a>
        </li>
      </ul>
      <ul className="mb-48">
        <li className="navigation-list-item">
          <a href="#top" aria-label="Offers">
            <Icon
              slot="before"
              icon="wrench"
              size={24}
              className="object-cover"
              alt="Service agreement"
            />
            <div>
              <p slot="body">Service agreement</p>
            </div>
          </a>
        </li>
        <li className="navigation-list-item">
          <a href="#top" aria-label="Support">
            <Icon
              slot="before"
              icon="shield-checked-car"
              size={24}
              className="object-cover"
              alt="Private Lease Protection"
            />
            <div>
              <p slot="body">Private Lease Protection</p>
            </div>
          </a>
        </li>
      </ul>
      <ul className="mb-48">
        <li className="navigation-list-item">
          <a href="#top" aria-label="Models">
            <div>
              <h3 slot="title">Finance</h3>
              <p slot="body">36 months - 10,000 km</p>
            </div>
          </a>
        </li>
      </ul>
      <ul className="mb-48">
        <li className="navigation-list-item">
          <a href="#top" aria-label="Models">
            <div>
              <p slot="body">Compare models</p>
            </div>
          </a>
        </li>
        <li className="navigation-list-item">
          <a href="#top" aria-label="Models">
            <div>
              <p slot="body">Available offers</p>
            </div>
          </a>
        </li>
        <li className="navigation-list-item">
          <a href="#top" aria-label="Models">
            <div>
              <p slot="body">New stock cars</p>
            </div>
          </a>
        </li>
      </ul>
    </>
  );
}