Pagination

<nav class="pagination">
  <ul role="list">
    <li>
    <a href="#1">
      <span class="visually-hidden">previous</span>
      <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.24537e-07 12L25 -1.09278e-06L15.7937 12L25 24L5.24537e-07 12Z" fill="currentColor" aria-hidden="true"  />
      </svg>
    </a>
    <li>
      <a href="#1"><span class="visually-hidden">page </span>1</a>
    </li>
    <li>
      <a href="#2" aria-current="page"><span class="visually-hidden">page </span>2</a>
    </li>
    <li>
      <a href="#3"><span class="visually-hidden">page </span>3</a>
    </li>
    <li>
      <a href="#3"><span class="visually-hidden">next</span>
        <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M25 12L3.8147e-06 -1.09278e-06L9.20629 12L2.76562e-06 24L25 12Z" fill="currentColor" aria-hidden="true"  />
        </svg>
      </a>
    </li>
  </ul>
</nav>

{{ c("pagination", {
  "text": "Pagination"
}) }}