Drag-to-scroll card strip

A single row of cards you can drag with the mouse or swipe, with arrow buttons that scroll one screen and a scrollbar that only shows while scrolling.

drag-scrolloverflowscroll-byscrollbar-autohidescroll-smoothingstripcardsswipeinteractive

About this block

Four small attributes make an overflow row feel native on every device: data-drag-scroll (mouse drag), data-scrollbar-autohide (a data-scrolling flag your CSS uses to show the bar), data-scroll-smoothing (eased wheel) and, on buttons, data-scroll-by with data-scroll-step.

How to customize it

  • The arrows need the row to have an id; put the same id in data-scroll-by on each button. data-scroll-step is -1 or 1 and moves by the row's own width.
  • data-scrollbar-autohide takes a time (1200ms). The scrollbar is hidden by [scrollbar-width:none] and shown while data-[scrolling] is set.
  • Add data-wheel-horizontal to let the vertical mouse wheel pan the row sideways (best on rows that fill the viewport).
Previous
Navigation
Next
Stripe

Browse other blocks

Same library cards — preview live and grab the code from any block.

View full library

Dropdown menu

CSS-first click dropdown with trigger button and option panel. Zero JavaScript required.

Animated cards row

Three feature cards with staggered scroll-triggered fade-up entrance animations.

Accordion FAQ

Collapsible FAQ built on native details/summary elements, so it opens and closes with no JavaScript. Only one answer is open at a time.

Modal dialog

Click-triggered modal with backdrop overlay, content panel, and close behavior.

Newsletter popup modal

Popup that opens once per visitor when the page loads, with an email signup form. Closing it is remembered, so it doesn't come back.

Cookie consent banner

Fixed bottom bar that auto-shows on first page load. Persists accepted/rejected state in localStorage. Shows only once per visitor.

Logo marquee

Logo strip that scrolls sideways in a seamless loop and pauses on hover. Logos sit grey and faded until hovered.

Hover lift card

Card with hover lift animation. Floats up on hover, settles on release.

Contact CTA with modal form

Accent-coloured CTA card whose button opens a centred contact modal with a name, email and message form. Fits bento grids, footers and pre-footer bands.

Image carousel

Image slideshow that shows one photo at a time, with previous and next arrows and dot indicators.

Tabs content switcher

Tabbed interface with 3 panels. Click a tab to show its content and hide the others; the active tab is underlined in the primary colour.

Scroll-pinned horizontal panels

A section that stays pinned while vertical scrolling slides a row of step panels sideways, then releases.