<div class="c-text-resizer">
  <ul class="c-text-resizer__items">
    <li class="c-text-resizer__item">
      <div class="c-text-resizer__button">
        {{> button
          buttonModifierClasses = "c-button--dark-primary"
          buttonText = "A"
          buttonAttributes = "type=\"button\" aria-label=\"Text size default\""
        }}
      </div>
      <span class="c-text-resizer__label">0</span>
    </li>
    <li class="c-text-resizer__item">
      <div class="c-text-resizer__button c-text-resizer__button--plus-2">
        {{> button
          buttonModifierClasses = "c-button--dark-primary"
          buttonText = "A"
          buttonAttributes = "type=\"button\" aria-label=\"Text size plus 2\""
        }}
      </div>
      <span class="c-text-resizer__label">+2</span>
    </li>
    <li class="c-text-resizer__item">
      <div class="c-text-resizer__button c-text-resizer__button--plus-4">
        {{> button
          buttonModifierClasses = "c-button--dark-primary"
          buttonText = "A"
          buttonAttributes = "type=\"button\" aria-label=\"Text size plus 4\""
        }}
      </div>
      <span class="c-text-resizer__label">+4</span>
    </li>
    <li class="c-text-resizer__item">
      <div class="c-text-resizer__button c-text-resizer__button--plus-6">
        {{> button
          buttonModifierClasses = "c-button--dark-primary"
          buttonText = "A"
          buttonAttributes = "type=\"button\" aria-label=\"Text size plus 6\""
        }}
      </div>
      <span class="c-text-resizer__label">+6</span>
    </li>
  </ul>
  <p class="c-text-resizer__preview-text">The subject who is truly loyal to the Chief Magistrate will neither advise nor submit to arbitrary measures.</p>
</div>
