Components · Extended

Prev/Next Navigation

A two-card footer pattern for stepping sequentially through an ordered set of content — documentation chapters, tutorial steps, paginated articles. Hover either card and watch the arrow: that's the same rolling-chevron affordance documented on the Motion page, reused verbatim rather than a new animation invented for this component.

Live

Hover to see the rolling chevron

Real component, real animation — not a screenshot. The arrow fades out while a duplicate slides in from behind and off the far edge, on a 1.6s loop, using --ease-glide.

Spec

Token reference

Card padding

var(--space-4) var(--space-5) — 16px vertical, 24px horizontal

Card gap (icon-to-text)

var(--space-3) (12px)

Grid gap (between cards)

var(--space-4) (16px)

Top offset

var(--space-9) margin-top (64px) + var(--space-6) padding-top (32px) above a 1px separator

Label

12px, --fw-bold, uppercase, 0.06em tracking, --ig-tertiary-text

Title

15px, --fw-semibold, --ig-primary-text, single-line ellipsis truncation

Hover state

Border brightens to --ig-stroke, background gets --ig-hover-overlay tint

Roll animation

1.6s infinite, --ease-glide — translateX(-100%) to translateX(125%), fading in/out at the 10%/90% marks

Rolling chevron — the reused Motion-page keyframe

/* Same keyframe as globals.css and Motion's documented affordance —
   redeclared locally because CSS Modules scope keyframe references. */
@keyframes ig-rolling {
  0%   { transform: translateX(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(125%); opacity: 0; }
}

.card:hover .icon { opacity: 0; }
.card:hover .roll {
  opacity: 1;
  animation: ig-rolling 1.6s infinite var(--ease-glide);
}

Do

Reuse the exact rolling-chevron keyframe from Motion — Don't invent a second hover-arrow animation — this system has one signature version, used everywhere an arrow needs hover motion.
Truncate long titles with ellipsis, never wrap — A two-line title breaks the card's fixed height and the grid alignment between the prev and next cards.
Hide the whole component when there's nothing to link to — At the start or end of a sequence, render nothing rather than a disabled-looking empty card — see the real component's `if (!prev && !next) return null`.
Keep prev on the left, next on the right — Matches reading direction — mirror this in RTL contexts per RTL & Internationalization, since the arrows are directional.

Don’t

Don't use this for non-sequential jumps — Prev/Next implies a linear order. For unordered related links, use a plain link list instead.
Don't add more than the label + title to each card — No description text, no thumbnail — this is a lightweight sequential stepper, not a card component.