3

use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. 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.

#### Default Pagination

it’s advisable to provide a descriptive `aria-label` for the `nav` to reflect its purpose

#### Pagination 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.

#### Pagination With Active state

Pagination links are customizable for different circumstances. Use `.active`for links that appear un-clickable.

#### Pagination With disabled state

Pagination links are customizable for different circumstances. Use `.disabled` for links that appear un-clickable.

#### Center Alignment Pagination

Change the alignment of pagination components with flexbox utilities.

#### Right Alignment Pagination

Change the alignment of pagination components with flexbox utilities.

#### Left Alignment Pagination

Change the alignment of pagination components with flexbox utilities.

#### Large Pagination

Fancy larger pagination? Add `.pagination-lg` additional size.

#### Small Pagination

Fancy smaller pagination? Add `.pagination-sm` additional size.

Search results
Headphone 1

Gadget

$300 $400

Sale

Headphone 1

Gadget

$300 $400

New

Headphone 1

Gadget

$300 $400

New

Headphone 1

Gadget

$300 $400

New