#### Paginations

##### Default

###### Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping `<nav>` element to identify it as a navigation section to screen readers and other assistive technologies.

##### Working With Icons

###### Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with `aria` attributes and the `.sr-only` utility.

##### Disabled And Active States with Link

###### While the `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add `tabindex="-1"` on disabled links and use custom JavaScript to fully disable their functionality.

##### Disabled And Active States with Span

###### You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.

##### Larger Sizing

###### Fancy larger pagination? Add `.pagination-lg` for additional sizes.

##### Small Sizing

###### Fancy smaller pagination? Add `.pagination-sm` for additional sizes.

##### Center Alignment

###### Fancy larger pagination? Add `.pagination-lg` for additional sizes.

##### Right Alignment

###### Fancy smaller pagination? Add `.pagination-sm` for additional sizes.