# Luxury Hotels (Editorial Pagination)

> An editorial luxury-hotel card gallery paginated with an elegant serif control bar — a warm canvas, high-contrast typography, fine detail marks, a soft atmosphere, an accented active folio, ellipsis-collapsed ranges, and keyboard navigation.

- Category: Pagination
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Ember Studio
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: cards, editorial
- Page: https://builder.atheros.ai/components/luxe
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_luxe/preview-a7aa940597fe.webp

## 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

## Keyboard shortcuts

- `ArrowLeft` — Previous page
- `ArrowRight` — Next page

## Common questions

**Which frameworks is Luxury Hotels (Editorial Pagination) available in?**

Luxury Hotels (Editorial Pagination) ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Luxury Hotels (Editorial Pagination) free?**

Luxury Hotels (Editorial Pagination) is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Luxury Hotels (Editorial Pagination) support dark mode?**

Yes. Luxury Hotels (Editorial Pagination) ships light and dark themes, both drawn from the Ember Studio design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Luxury Hotels (Editorial Pagination) live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/luxe

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt