Pagination

A pagination component gives users more navigational capability on pages with content views.

Examples

Top

1 - 10 of 36

Top sticky

1 - 10 of 36

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.

Indeterminate (item count is not known)

1 - 10 of many

Bottom

Bottom sticky

Top disabled

1 - 10 of 36

Compact

1 - 10 of 36

Top with display summary modifier

1 - 10 of 36

Top with display full modifier

1 - 10 of 36

Top with responsive display summary and display full modifiers

1 - 10 of 36

Compact display full modifier

1 - 10 of 36

Inset

1 - 10 of 36

Documentation

Note: <button> or <a> elements can be used in .pf-v5-c-pagination__nav-page-select.

Accessibility

Attribute	Applied to	Outcome
`aria-label`	`.pf-v5-c-pagination__nav`	Provides an accessible name for pagination navigation element. Required
`type="number"`	`.pf-v5-c-pagination__nav-page-select` > `.pf-v5-c-form-control`	Defines a field as a number. Required
`value`	`.pf-v5-c-pagination__nav-page-select` > `.pf-v5-c-form-control`	Provides initial integer value. Required
`min`	`.pf-v5-c-pagination__nav-page-select` > `.pf-v5-c-form-control`	Provides minimum integer value. Required
`max`	`.pf-v5-c-pagination__nav-page-select` > `.pf-v5-c-form-control`	Provides max integer value. Required

Usage

Class	Applied to	Outcome
`.pf-v5-c-pagination`	`<div>`	Initiates pagination.
`.pf-v5-c-pagination__current`	`<div>`	Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`.
`.pf-v5-c-pagination__total-items`	`<div>`	Initiates element to replace the options menu on summary.
`.pf-v5-c-pagination__nav`	`<nav>`	Initiates pagination nav.
`.pf-v5-c-pagination__nav-control`	`<div>`	Initiates pagination nav control.
`.pf-v5-c-pagination__nav-page-select`	`<div>`	Initiates pagination nav page select.
`.pf-m-display-summary{-on-[breakpoint]}`	`.pf-v5-c-pagination`	Modifies for summary display pagination component styles at optional breakpoint.
`.pf-m-display-full{-on-[breakpoint]}`	`.pf-v5-c-pagination`	Modifies for full display pagination component styles at optional breakpoint.
`.pf-m-bottom`	`.pf-v5-c-pagination`	Modifies for bottom pagination component styles.
`.pf-m-compact`	`.pf-v5-c-pagination`	Modifies for compact pagination component styles.
`.pf-m-static`	`.pf-v5-c-pagination.pf-m-bottom`	Modifies bottom pagination to not be positioned sticky on summary.
`.pf-m-sticky`	`.pf-v5-c-pagination`	Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-v5-c-pagination.pf-m-bottom`.
`.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}`	`.pf-v5-c-pagination`	Modifies pagination horizontal padding at optional breakpoint.
`.pf-m-page-insets`	`.pf-v5-c-pagination`	Modifies the pagination component padding/inset to visually match padding of page elements.
`.pf-m-first`	`.pf-v5-c-pagination__nav-control`	Indicates the control is for the first page button.
`.pf-m-prev`	`.pf-v5-c-pagination__nav-control`	Indicates the control is for the previous page button.
`.pf-m-next`	`.pf-v5-c-pagination__nav-control`	Indicates the control is for the next page button.
`.pf-m-last`	`.pf-v5-c-pagination__nav-control`	Indicates the control is for the last page button.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-pagination	--pf-v5-c-pagination--inset	0
	.pf-v5-c-pagination	--pf-v5-c-pagination--PaddingRight	0
--pf-v5-c-pagination--PaddingRight --pf-v5-c-pagination--inset 0
	.pf-v5-c-pagination	--pf-v5-c-pagination--PaddingLeft	0
--pf-v5-c-pagination--PaddingLeft --pf-v5-c-pagination--inset 0
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-page-insets--inset	1rem
--pf-v5-c-pagination--m-page-insets--inset --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-page-insets--xl--inset	1.5rem
--pf-v5-c-pagination--m-page-insets--xl--inset --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--child--MarginRight	1.5rem
--pf-v5-c-pagination--child--MarginRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom--child--MarginRight	0
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom--child--md--MarginRight	1.5rem
--pf-v5-c-pagination--m-bottom--child--md--MarginRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-compact--child--MarginRight	0.5rem
--pf-v5-c-pagination--m-compact--child--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-pagination	--pf-v5-c-pagination__nav--Display	none
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-display-summary__nav--Display	none
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-display-full__nav--Display	inline-flex
	.pf-v5-c-pagination	--pf-v5-c-pagination__nav-control--c-button--PaddingRight	0.5rem
--pf-v5-c-pagination__nav-control--c-button--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-pagination	--pf-v5-c-pagination__nav-control--c-button--PaddingLeft	0.5rem
--pf-v5-c-pagination__nav-control--c-button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-pagination	--pf-v5-c-pagination__nav-control--c-button--FontSize	1rem
--pf-v5-c-pagination__nav-control--c-button--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset	calc(0.25rem * -1)
--pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset calc(--pf-v5-global--spacer--xs * -1) calc($pf-v5-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1)
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop	1rem
--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom	1rem
--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight	1rem
--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop	0.375rem
--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight	0.5rem
--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom	0.375rem
--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft	0.5rem
--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft	1rem
--pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination__nav-page-select--FontSize	0.875rem
--pf-v5-c-pagination__nav-page-select--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-v5-c-pagination	--pf-v5-c-pagination__nav-page-select--PaddingLeft	1rem
--pf-v5-c-pagination__nav-page-select--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination__nav-page-select--PaddingRight	1rem
--pf-v5-c-pagination__nav-page-select--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination__nav-page-select--child--MarginRight	0.25rem
--pf-v5-c-pagination__nav-page-select--child--MarginRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-pagination	--pf-v5-c-pagination__nav-page-select--c-form-control--width-base	calc(0.5rem * 2 + 1px * 2)
--pf-v5-c-pagination__nav-page-select--c-form-control--width-base calc(--pf-v5-global--spacer--sm * 2 + --pf-v5-global--BorderWidth--sm * 2) calc($pf-v5-global--spacer--sm * 2 + $pf-v5-global--BorderWidth--sm * 2) calc(pf-size-prem(8px) * 2 + 1px * 2) calc(0.5rem * 2 + 1px * 2)
	.pf-v5-c-pagination	--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars	2
	.pf-v5-c-pagination	--pf-v5-c-pagination__nav-page-select--c-form-control--Width	calc(calc(0.5rem * 2 + 1px * 2) + (2 * 1ch))
--pf-v5-c-pagination__nav-page-select--c-form-control--Width calc(--pf-v5-c-pagination__nav-page-select--c-form-control--width-base + (--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars * 1ch)) calc(calc(--pf-v5-global--spacer--sm * 2 + --pf-v5-global--BorderWidth--sm * 2) + (2 * 1ch)) calc(calc($pf-v5-global--spacer--sm * 2 + $pf-v5-global--BorderWidth--sm * 2) + (2 * 1ch)) calc(calc(pf-size-prem(8px) * 2 + 1px * 2) + (2 * 1ch)) calc(calc(0.5rem * 2 + 1px * 2) + (2 * 1ch))
	.pf-v5-c-pagination	--pf-v5-c-pagination__total-items--Display	block
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-display-summary__total-items--Display	block
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-display-full__total-items--Display	none
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-sticky--BackgroundColor	#fff
--pf-v5-c-pagination--m-sticky--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-sticky--BoxShadow	0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-v5-c-pagination--m-sticky--BoxShadow --pf-v5-global--BoxShadow--sm-bottom $pf-v5-global--BoxShadow--sm-bottom 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .16) 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-sticky--md--PaddingTop	1rem
--pf-v5-c-pagination--m-sticky--md--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-sticky--md--PaddingRight	1rem
--pf-v5-c-pagination--m-sticky--md--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-sticky--md--PaddingBottom	1rem
--pf-v5-c-pagination--m-sticky--md--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-sticky--md--PaddingLeft	1rem
--pf-v5-c-pagination--m-sticky--md--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-sticky--ZIndex	100
--pf-v5-c-pagination--m-sticky--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-sticky--Top	0
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom--BackgroundColor	#fff
--pf-v5-c-pagination--m-bottom--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom--BoxShadow	0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-v5-c-pagination--m-bottom--BoxShadow --pf-v5-global--BoxShadow--sm-top $pf-v5-global--BoxShadow--sm-top 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .16) 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom--Bottom	0
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom--md--PaddingTop	1rem
--pf-v5-c-pagination--m-bottom--md--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom--md--PaddingRight	1rem
--pf-v5-c-pagination--m-bottom--md--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom--md--PaddingBottom	1rem
--pf-v5-c-pagination--m-bottom--md--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom--md--PaddingLeft	1rem
--pf-v5-c-pagination--m-bottom--md--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom--xl--PaddingRight	1.5rem
--pf-v5-c-pagination--m-bottom--xl--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom--xl--PaddingLeft	1.5rem
--pf-v5-c-pagination--m-bottom--xl--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow	0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow --pf-v5-global--BoxShadow--sm-top $pf-v5-global--BoxShadow--sm-top 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .16) 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-v5-c-pagination	--pf-v5-c-pagination--c-menu-toggle--FontSize	0.875rem
--pf-v5-c-pagination--c-menu-toggle--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-v5-c-pagination	--pf-v5-c-pagination--c-menu-toggle--Display--base	inline-flex
	.pf-v5-c-pagination	--pf-v5-c-pagination--c-menu-toggle--Display	none
	.pf-v5-c-pagination	--pf-v5-c-pagination--c-menu-toggle--md--Display	inline-flex
--pf-v5-c-pagination--c-menu-toggle--md--Display --pf-v5-c-pagination--c-menu-toggle--Display--base inline-flex
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display	none
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display	inline-flex
--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display --pf-v5-c-pagination--c-menu-toggle--Display--base inline-flex
	.pf-v5-c-pagination	--pf-v5-c-pagination--m-bottom--c-menu-toggle--Display	inline-flex
--pf-v5-c-pagination--m-bottom--c-menu-toggle--Display --pf-v5-c-pagination--c-menu-toggle--Display--base inline-flex
	.pf-v5-c-pagination.pf-m-bottom	--pf-v5-c-pagination--child--MarginRight	0
--pf-v5-c-pagination--child--MarginRight --pf-v5-c-pagination--m-bottom--child--MarginRight 0
	.pf-v5-c-pagination.pf-m-bottom	--pf-v5-c-pagination__nav-control--c-button--PaddingRight	1rem
--pf-v5-c-pagination__nav-control--c-button--PaddingRight --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination.pf-m-bottom	--pf-v5-c-pagination__nav-control--c-button--PaddingLeft	1rem
--pf-v5-c-pagination__nav-control--c-button--PaddingLeft --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination.pf-m-bottom	--pf-v5-c-pagination--m-sticky--BoxShadow	0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-v5-c-pagination--m-sticky--BoxShadow --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow --pf-v5-global--BoxShadow--sm-top $pf-v5-global--BoxShadow--sm-top 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .16) 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-v5-c-pagination.pf-m-bottom	--pf-v5-c-pagination--m-sticky--Top	auto
	.pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control .pf-v5-c-button	--pf-v5-c-button--PaddingTop	1rem
--pf-v5-c-button--PaddingTop --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control .pf-v5-c-button	--pf-v5-c-button--PaddingBottom	1rem
--pf-v5-c-button--PaddingBottom --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination.pf-m-bottom.pf-m-static	--pf-v5-c-pagination--m-bottom--MarginTop	0
	.pf-v5-c-pagination.pf-m-bottom.pf-m-static	--pf-v5-c-pagination--m-bottom--BorderTopWidth	0
	.pf-v5-c-pagination.pf-m-sticky	--pf-v5-c-pagination--m-bottom--Bottom	0
	.pf-v5-c-pagination.pf-m-compact	--pf-v5-c-pagination--child--MarginRight	0.5rem
--pf-v5-c-pagination--child--MarginRight --pf-v5-c-pagination--m-compact--child--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-pagination.pf-m-page-insets	--pf-v5-c-pagination--inset	1rem
--pf-v5-c-pagination--inset --pf-v5-c-pagination--m-page-insets--inset --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination.pf-m-display-summary	--pf-v5-c-pagination__nav--Display	none
--pf-v5-c-pagination__nav--Display --pf-v5-c-pagination--m-display-summary__nav--Display none
	.pf-v5-c-pagination.pf-m-display-summary	--pf-v5-c-pagination--c-menu-toggle--Display	none
--pf-v5-c-pagination--c-menu-toggle--Display --pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display none
	.pf-v5-c-pagination.pf-m-display-summary	--pf-v5-c-pagination__total-items--Display	block
--pf-v5-c-pagination__total-items--Display --pf-v5-c-pagination--m-display-summary__total-items--Display block
	.pf-v5-c-pagination.pf-m-display-full	--pf-v5-c-pagination__nav--Display	inline-flex
--pf-v5-c-pagination__nav--Display --pf-v5-c-pagination--m-display-full__nav--Display inline-flex
	.pf-v5-c-pagination.pf-m-display-full	--pf-v5-c-pagination--c-menu-toggle--Display	inline-flex
--pf-v5-c-pagination--c-menu-toggle--Display --pf-v5-c-pagination--m-display-full--c-menu-toggle--Display --pf-v5-c-pagination--c-menu-toggle--Display--base inline-flex
	.pf-v5-c-pagination.pf-m-display-full	--pf-v5-c-pagination__total-items--Display	none
--pf-v5-c-pagination__total-items--Display --pf-v5-c-pagination--m-display-full__total-items--Display none
	.pf-v5-c-pagination.pf-m-inset-none	--pf-v5-c-pagination--inset	0
	.pf-v5-c-pagination.pf-m-inset-sm	--pf-v5-c-pagination--inset	0.5rem
--pf-v5-c-pagination--inset --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-pagination.pf-m-inset-md	--pf-v5-c-pagination--inset	1rem
--pf-v5-c-pagination--inset --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-pagination.pf-m-inset-lg	--pf-v5-c-pagination--inset	1.5rem
--pf-v5-c-pagination--inset --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-pagination.pf-m-inset-xl	--pf-v5-c-pagination--inset	2rem
--pf-v5-c-pagination--inset --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-pagination.pf-m-inset-2xl	--pf-v5-c-pagination--inset	3rem
--pf-v5-c-pagination--inset --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem

View source on GitHub