Pagination
Importing
Add rh-pagination to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-pagination/rh-pagination.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Lightdom CSS
This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.
Note
Replace /path/to/ with path to the CSS file, whether local or CDN.
<link rel="stylesheet" href="/path/to/rh-pagination/rh-pagination-lightdom.css">Usage
<rh-pagination>
<ol>
<li><a href="#">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
<li><a href="#4">4</a></li>
<li><a href="#5">5</a></li>
</ol>
</rh-pagination>
<link rel="stylesheet" href="../rh-pagination-lightdom.css">
<script type="module">
import '@rhds/elements/rh-pagination/rh-pagination.js';
</script>rh-pagination
A paginator allows users to navigate between pages of related content.
| Slot Name | Description |
|---|---|
|
An ordered list of links |
go-to-page |
"Go to page" text, defaults to "Page" |
out-of |
"of" text |
| Part Name | Description |
|---|---|
container |
pagination container |
numeric-middle |
container for the numeric control at medium screen widths |
numeric-end |
container for the numeric control at small and large screen widths |
numeric |
shared container for the numeric controls at all widths |
| CSS Property | Description | Default |
|---|---|---|
--rh-pagination-accent-color |
Sets the outline color when the page input has focus. |
var(--rh-color-interactive-blue, #0066cc)
|
--rh-pagination-background-focused |
Sets the disabled stepper color. |
var(--rh-color-gray-20, #c7c7c7)
|
--rh-pagination-stepper-color |
Sets the stepper color. |
var(--rh-color-icon-subtle, #707070)
|
| Token | Copy |
|---|---|
--rh-border-radius-default
|
|
--rh-border-width-lg
|
|
--rh-border-width-md
|
|
--rh-border-width-sm
|
|
--rh-color-border-interactive
|
|
--rh-color-border-subtle
|
|
--rh-color-border-subtle-on-light
|
|
--rh-color-gray-30
|
|
--rh-color-gray-40
|
|
--rh-color-gray-50
|
|
--rh-color-gray-60
|
|
--rh-color-interactive-primary-default
|
|
--rh-color-interactive-primary-hover
|
|
--rh-color-interactive-primary-visited-default
|
|
--rh-color-interactive-primary-visited-hover
|
|
--rh-color-red-40
|
|
--rh-color-red-60
|
|
--rh-color-surface-dark
|
|
--rh-color-surface-darkest
|
|
--rh-color-surface-lighter
|
|
--rh-color-surface-lightest
|
|
--rh-color-text-primary
|
|
--rh-color-text-primary-on-dark
|
|
--rh-color-text-secondary-on-dark
|
|
--rh-font-family-heading
|
|
--rh-font-size-body-text-lg
|
|
--rh-font-size-body-text-md
|
|
--rh-font-size-body-text-xl
|
|
--rh-font-size-heading-xs
|
|
--rh-length-2xl
|
|
--rh-length-3xl
|
|
--rh-length-4xl
|
|
--rh-space-2xl
|
|
--rh-space-lg
|
|
--rh-space-md
|
|
--rh-space-sm
|
|
--rh-space-xs
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
