Each page link is an atom:

1

<a href="?page=1" class="c-pagination__page ">1</a>

And these pages are built up in a molecule called pagination:

<div class="c-pagination">
  <ul class="c-pagination__list">
    <li class="c-pagination__item ">
      <a href="?" class="c-pagination__page c-pagination__page--previous "><i class="c-icon c-icon--chevron-left c-icon--before"></i><span class="is-hidden@small-">Prev</span></a>
    </li>

    <li class="c-pagination__item  c-pagination__item--type-numeral">
      <a href="?page=1" class="c-pagination__page ">1</a>
    </li>

    <li class="c-pagination__item  c-pagination__item--type-numeral">
      <a href="?page=2" class="c-pagination__page ">2</a>
    </li>

    <li class="c-pagination__item  c-pagination__item--type-numeral">
      <a class="c-pagination__page c-pagination__page--type-break">...</a>
    </li>

    <li class="c-pagination__item  c-pagination__item--type-numeral">
      <a href="?page=24" class="c-pagination__page ">24</a>
    </li>

    <li class="c-pagination__item  c-pagination__item--type-numeral">
      <a href="?page=25" class="c-pagination__page ">25</a>
    </li>

    <li class="c-pagination__item  c-pagination__item--type-numeral">
      <a class="c-pagination__page c-pagination__page--current ">26</a>
    </li>

    <li class="c-pagination__item  c-pagination__item--type-numeral">
      <a href="?page=27" class="c-pagination__page ">27</a>
    </li>

    <li class="c-pagination__item  c-pagination__item--type-numeral">
      <a href="?page=28" class="c-pagination__page ">28</a>
    </li>

    <li class="c-pagination__item  c-pagination__item--type-numeral">
      <a class="c-pagination__page c-pagination__page--type-break">...</a>
    </li>

    <li class="c-pagination__item  c-pagination__item--type-numeral">
      <a href="?page=50" class="c-pagination__page ">50</a>
    </li>

    <li class="c-pagination__item  c-pagination__item--type-numeral">
      <a class="c-pagination__page c-pagination__page--type-break">...</a>
    </li>

    <li class="c-pagination__item  c-pagination__item--type-numeral">
      <a href="?page=150" class="c-pagination__page ">150</a>
    </li>

    <li class="c-pagination__item ">
      <a href="?" class="c-pagination__page c-pagination__page--next "><span class="is-hidden@small-">Next</span><i class="c-icon c-icon--chevron-right c-icon--after"></i></a>
    </li>

  </ul>
</div>

Options

Atoms

• page
  • href: link to the page. You can use false for ellipses (required).
  • value: the text of the link item.
  • position: one of first, last, previous, next or current. Denotes the position in the page list.
  • page-number: is this page item a numeral. true, false or not included.
  • page-type: this denotes whether the page item is a break type or ellipses. Values can be break or not included.
  • hide-text-on-mobile: used to hide text on the 'prev' and 'next' items. Can be true, false or not included.
  • stand-alone: if used as a stand alone page item (as in example number 1), include the value of true to ensure the tightly coupled list item element is not included in the output.

Molecules

• pagination
  • atoms: an array of page atoms