<nav class="paging">
  <div class="prev pg-block disabled"><a><i class="petalicon"></i>PREV</a></div>
  <ul class="pg-list">
    <li class="pg-block active"><a>1</a></li>
    <li class="pg-block"><a>2</a></li>
    <li class="pg-block"><a>3</a></li>
    <li class="pg-ellipsis">⋯</li>
    <li class="pg-block"><a>9</a></li>
    <li class="pg-block"><a>10</a></li>
  </ul>
  <div class="next pg-block"><a>NEXT<i class="petalicon"></i></a></div>
</nav>

Paging module. The topmost .paging wrapper is set as an inline-block, so you can center easily by adding text-align: center to the parent container if you want to.

Use .disabled class on .pg-block to disable.

If you want to make a paging module with just the prev/next pager buttons, remove the pg-list inbetween; same thing if you want it vice versa with only the page list.

Inline Variant

Add .inline to paging container if you want an inline version without any backgrounds and box shadows.

Stretched

Add .pg-stretch to paging container if you want to align the pager buttons to the ends.