CSS

The Feature List is a <ul> carrying tng-feature-list, with one tng-feature-list-item <li> per attribute. Each item stacks two rows: tng-feature-list-label for the muted attribute name and tng-feature-list-data for the emphasised value. Both rows are laid out as flex lines, so anything you put after the text — an info button — sits inline with it.

<ul class="tng-feature-list" role="list">
  <li class="tng-feature-list-item">
    <p class="tng-feature-list-label">Fuel consumption</p>
    <p class="tng-feature-list-data">43.4 - 45.5 (l/100 km)</p>
  </li>
  <li class="tng-feature-list-item">
    <p class="tng-feature-list-label">Boot capacity</p>
    <p class="tng-feature-list-data">580 LITRES</p>
  </li>
</ul>

Neutral
Contrast

Fuel consumption

43.4 - 45.5 (l/100 km)
Boot capacity

580 LITRES

Both rows read their colours from the scheme, so an is-contrast container flips the label and the data together — there’s no per-element class. The rows don’t have to be <p> elements either — the classes carry the styling, so use whatever element fits the semantics you need. See the Accessibility tab for the description-list alternative.

Elements

Info button

Either row can trail an icon-only button for a footnote or a caveat — a measurement standard, a condition. Use tng-icon-button at is-xs with is-no-bg, and give it an accessible name; the glyph itself is decorative. The two rows are independent, so put one on the label, on the data, on both, or on neither.

<ul class="tng-feature-list" role="list">
  <li class="tng-feature-list-item">
    <p class="tng-feature-list-label">
      Fuel consumption
      <button
        class="tng-icon-button is-xs is-no-bg"
        type="button"
        aria-label="How fuel consumption is measured"
      >
        <i class="tng-icon icon-info" aria-hidden="true"></i>
      </button>
    </p>
    <p class="tng-feature-list-data">43.4 - 45.5 (l/100 km)</p>
  </li>
</ul>

Fuel consumption

43.4 - 45.5 (l/100 km)

The styleguide ships the button as a visual affordance only — it has no behaviour of its own. Wiring it to reveal the explanation is yours to do; reach for Popover rather than inventing a tooltip, and see the Accessibility tab for what that has to announce.

Sizes

is-sm is the default and can be left off; is-lg scales the label typography up and opens up both the gap between rows and the gap between an item’s label and its data. Put the size class on the list — it reaches the rows from there, so you don’t repeat it per item.

<ul class="tng-feature-list is-sm" role="list">
  <li class="tng-feature-list-item">
    <p class="tng-feature-list-label">Fuel consumption</p>
    <p class="tng-feature-list-data">43.4 - 45.5 (l/100 km)</p>
  </li>
  <li class="tng-feature-list-item">
    <p class="tng-feature-list-label">Boot capacity</p>
    <p class="tng-feature-list-data">580 LITRES</p>
  </li>
</ul>
<ul class="tng-feature-list is-lg" role="list">
  <li class="tng-feature-list-item">
    <p class="tng-feature-list-label">Fuel consumption</p>
    <p class="tng-feature-list-data">43.4 - 45.5 (l/100 km)</p>
  </li>
  <li class="tng-feature-list-item">
    <p class="tng-feature-list-label">Boot capacity</p>
    <p class="tng-feature-list-data">580 LITRES</p>
  </li>
</ul>

Fuel consumption

43.4 - 45.5 (l/100 km)
Boot capacity

580 LITRES

Fuel consumption

43.4 - 45.5 (l/100 km)
Boot capacity

580 LITRES

The label typography and the spacing are what scale. The data line has its own per-size tokens, which Toyota resolves to the same setting at both sizes — so don’t rely on the value being size-invariant across brands.

Because the row rhythm changes with the size, the list sets its own gaps rather than composing a stack utility — don’t wrap the items in tng-stack expecting the spacing to survive.