colour-group.njk

<section class="app-foundation-showcase__colour-group">
  <h3 class="ofh-heading-m ofh-u-margin-bottom-3">{{ group.title }}</h3>
  <table class="app-colour-list" summary="{{ group.title }} colour tokens">
    <thead class="ofh-u-visually-hidden">
      <tr>
        <th scope="col">Token</th>
        <th scope="col">Source token</th>
        <th scope="col">Hex value</th>
      </tr>
    </thead>
    <tbody>
      {% for item in group.items %}
        <tr class="app-colour-list__row">
          <th class="app-colour-list__column app-colour-list__column--name" scope="row">
            <span class="app-colour-list__swatch{% if item.useBorder %} app-colour-list__swatch--border{% endif %}" style="background-color:{{ item.hex }}"></span>
            <code>{{ item.token }}</code>
          </th>
          <td class="app-colour-list__column app-colour-list__column--source">
            <code>{{ item.sourceToken }}</code>
          </td>
          <td class="app-colour-list__column app-colour-list__column--colour">
            <code>{{ item.hex }}</code>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</section>