Skip to main content

Pagination

Pagination breaks up long lists or large amounts of content into separate pages. This component includes navigation controls, such as previous and next buttons, that allow users to move between pages.

Medicaid.gov follows the guidance provided by the United States Web Design System (USWDS) for components like Pagination, maintaining autonomy over our branding and colors.

  • The background color for the current page indicator will be #046791 and #17415F on hover.
  • When hovering over a page indicator that is not the current page, the border color should be #046791.
  • The color for text and symbols is #046791.
  • The visited link color is #862074.

Medicaid Pagination

Anatomy and Visual Specifications

There are specific elements that require consistent styling using the defined Medicaid color palette and typography standards.

The Pagination component includes several key parts:

  • Page Links: Individual numbered links that allow direct access to a specific page.
  • Navigation Controls: Links or buttons for navigating to the previous or next set of pages.
  • Current Page Indicator: The visual element that highlights the page the user is currently viewing.
  • Ellipsis: Used to represent a range of pages omitted from the immediate display to save space.

Visual Styling Notes

All elements within the Pagination component should adhere to Medicaid’s foundational specifications:

  • Color Usage: Links and active states should incorporate Medicaid Brand Blue (#046791), which is the primary color for branding. Text colors should rely on the neutral palette, such as Dark Gray (#363636) for standard text.
  • Typography: All text within the component must conform to the defined Medicaid typography standards.
  • Focus State: The visual indicator that ensures accessibility for keyboard users must use the defined focus outline color, which is #2491FF.
  • Spacing: Use Medicaid spacing units for consistent padding and margins around and between navigation elements, ensuring legibility and appropriate sizing for touch targets.The Secondary Button is used for less critical actions or actions that occur on the current page. It aligns functionally with the USWDS Outline button variant.

Accessibility and Implementation Guidance

Since Medicaid.gov is a government website, accessibility is a core design standard.

  • Keyboard Navigation: Users must be able to navigate through all elements in the pagination using standard keyboard controls (such as the Tab key). Keyboard navigation is a fundamental accessibility tool.
  • Focus Management: A clear visual focus indicator must be displayed when navigating via keyboard. The focus must stay within the component's current state until the user navigates away.
  • Screen Reader Clarity: Necessary ARIA attributes and labels must be included on the component elements to properly identify the component and articulate the current page to screen readers.

Additional Specifications

For any additional information about specifications, guidelines, accessibility and usage, please refer to the Pagination component on the USWDS website:

USWDS - Pagination