Luxury Hotels (Editorial Pagination)

Features

• The active page rides the design system's selection fill/ink pair, uses cards-radius for cards and icon-buttons-radius for the folio nodes, and receives theme-derived elevation.
• Pagination retains a 44px target and moves focus to the active page after navigation.
• Classic numbered pagination with previous/next chevrons and ellipsis-collapsed ranges
• Active page uses the high-contrast selection fill/ink pair of whatever design system is applied, with springy scale-press feedback on the controls
• Luxury-hotel card gallery with hero image, gold price, serif title, location, and spec row
• Correct disabled states at the first and last page
• Keyboard navigation (Arrow keys, Home/End)
• Direction-aware page changes: the outgoing grid eases toward the chosen page and incoming cards settle in with a short three-card stagger
• Card and pagination shapes consume their design-system card and icon-button radius contracts
• Cards retain a subtle theme-derived elevation rather than a fixed shadow or flat surface
• Responsive flex-wrap card layout with 44px pagination targets, persistent focus after page changes, :focus-visible outlines, and reduced-motion support

Accessibility

ARIA labels

Every pagination button has an aria-label

Current page

aria-current="page" on the active node

Disabled ends

disabled attribute on prev/next at the range ends

Keyboard nav

ArrowLeft/ArrowRight for page navigation

Focus continuity

Clicking a page or using an arrow shortcut moves focus to the newly active page

Touch targets

Every pagination button remains at least 44px in both desktop and mobile layouts

Ellipsis

Decorative collapsed-range dots are hidden from assistive technology

Focus indicators

:focus-visible with --ring outline on all elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Live regions

aria-live="polite" on the card container for page changes

Viewport

100dvh for a mobile-safe viewport height

Customise it with AI

Open Luxury Hotels (Editorial Pagination) in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the pagination is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.