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.

InsureKidsNow.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#0D76AD and #17415F on hover.
  • When hovering over a page indicator that is not the current page, the border color should be #0D76AD.
  • The color for text and symbols is #0D76AD.
  • The visited link color is #664166.

IKN Pagination


Anatomy and Visual Specifications

There are specific elements that require consistent styling using the defined IKN 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 IKN foundational specifications:

  • Color Usage: Links and active states should incorporate IKN Brand Blue (#007EAD), 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 IKN typography standards.
  • Focus State: The visual indicator that ensures accessibility for keyboard users must use the defined IKN focus outline color, which is #2491FF.
  • Spacing:  Use IKN 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 IKN 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