Rolodex

{{ design.patterns.renderPattern('rolodex', {}) | safe }}

Source (Nunjucks)

<div class="rolodex">
  <ol class="rolodex__list flow" role="list">
    {% for item in data.items %}
      <li>
        <a href="{{ item.link }}" class="rolodex__item sidebar" data-rolodex-theme="{{ item.theme }}" data-reversed>
          <h3 class="rolodex__heading">
            <span class="rolodex__number">*{{ item.heading.number }}</span>
            <span>{{ item.heading.text }}</span>
          </h3>
            <picture>
              <source srcset="{{ item.img.src }}.webp" type="image/webp">
              <img src="{{ item.img.src }}.jpg" alt="{{ item.img.alt }}" loading="lazy" draggable="false"/>
            </picture>
          {# <img src="{{ item.img.src }}" alt="{{ item.img.alt }}"/> #}
        </a>
      </li>
    {% endfor %}
  </ol>
</div>

Information

Each Rolodex item can be themed with the following attribute values:

Value	Description
`data-rolodex-theme="light"`	White background with dark text. This is the default.
`data-rolodex-theme="primary"`	Primary background with dark text.
`data-rolodex-theme="dark"`	Dark background with light text.

You can also change the colour of the triangle mask by setting a value for --rolodex-triangle-color in a higher context. For example, if your section of the page has a var(--color-light) background, set --rolodex-triangle-color to var(--color-light) too.