List Item

Use list items for grouped rows with text and actions. Place each row in a semantic <ul> as an <li>.

Use list-item for standard rows. Use navigation-list-item when the whole row is a link.

Slot-based layout

With list-item, use a two-level wrapper structure inside the <li>:

1. An outer <div> (direct child of <li>) — the content area alongside slot="before"
2. An inner <div> — groups slot="title" and slot="body" so they stack vertically when present

Available slots:

• slot="before" (optional) — Leading visual element, placed before the content wrapper
• slot="title" (optional) — Primary text line, placed inside the inner <div>
• slot="body" (optional) — Supporting text line, placed inside the inner <div>
• slot="after" (optional) — Action or meta content, placed inside the outer <div> alongside the inner group

Include either slot="title" or slot="body" in every List Item and Navigation List Item.

The title slot is emphasized by default. When the row is too narrow, slot="after" wraps below the content group with a smaller gap.

List item

Use any combination of the optional slots. Include slot="title" or slot="body".

Autosmmdlgxl

volvocars.com

Show codeHide code

<li class="list-item">
  <code slot="before">Slot before</code>
  <div>
    <div>
      <code slot="title">Title</code>
      <code slot="body">Body</code>
    </div>
    <code slot="after">Slot after</code>
  </div>
</li>

Navigation list item

Use navigation-list-item when the whole row is a link. Add an <a> as the direct child of the <li>. Place the optional slot="before" and the content wrapper directly inside the anchor. The content wrapper contains slot="title" and slot="body".

A forward chevron is added automatically and points in the correct direction in LTR and RTL. Do not add an Icon or slot="after" content.

Autosmmdlgxl

volvocars.com

Show codeHide code

export function NavigationListItem() {
  return (
    <li className="navigation-list-item">
      <a href="#top" aria-label="Title">
        <code slot="before">Slot before</code>
        <div>
          <code slot="title">Title</code>
          <code slot="body">Body</code>
        </div>
      </a>
    </li>
  );
}

Accessibility

• Ensure the action has an accessible name (aria-label) when using icon-only controls
• Do not remove visible keyboard focus styles

CSS reference

Class	Description
list-item	Row with before, title, body, and after slots.
navigation-list-item	Linked row container; the direct child <a> gets full-row layout, hover/press interaction, and an automatic forward chevron.