Riverside bakery
Menu, hours and pre-orders on one page.
See the site: Riverside bakeryWebsite elementsNavigation & layout
Scrollbox
A horizontal scroll cards, built into your site with no plugin and no library. A row of cards or chips that scrolls sideways inside its container: a named, focusable region the keyboard can scroll, with edge fades that appear only on a side with more to see (measured on scroll and resize) and optional left/right buttons that are never the only way to scroll. Optional scroll-snap. Without JavaScript it is a plain horizontal scroll.
Hill country tours
Seven tours, one booking form.
See the site: Hill country toursNorthside dental
New-patient forms before the visit.
See the site: Northside dentalOak and iron
A furniture maker’s portfolio.
See the site: Oak and ironHarbor yoga
Class times that update themselves.
See the site: Harbor yogaGreenline gardens
Seasonal lists and a plant finder.
See the site: Greenline gardensFit a long row of projects, products or categories into one line, and let the edges show there is more to scroll.
Also called
horizontal scrollerscroll rowoverflow rowscroll shadowsedge fadehorizontal scroll sectionchip row
What it replaces
- page-builder “horizontal scroll” sections and scroll-shadow snippets
- a carousel used only to fit a row that is too wide
- overflow rows that hide their scrollbar and give no hint there is more
Good for
A row that is useful at a glance and fine to explore: related products, recent projects, category chips, a filter bar on a phone. The visitor moves it, at their pace, however they like to scroll.
Not for
A carousel: when the row should page one screen at a time with dots and a count, or move by itself, or show one card at a time, that is card-slider. Also not for content every visitor must read (a row hides most of what it holds: use a grid), and not for a data table (that scrolls in its own element, with its headers).
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- The scroller is role="region" named by `label`, with tabindex="0": a keyboard focuses it and scrolls it with ← →. The items’ own links are ordinary tab stops, and a focused one is scrolled into view clear of the fade.
- The fades are a visual hint only, drawn with a mask so they suit any background. Each shows only while that side has more to scroll; `npm run check` runs the measuring function the page actually ships.
- The buttons are real buttons named “Scroll left” and “Scroll right”, 44 px, aria-controls naming the region. Each shows only while there is more that way; one that reaches its end while focused stays, dimmed and aria-disabled, until focus leaves it, so focus is never dropped. They are never the only way to scroll: the scrollbar always shows, and touch, trackpad, wheel and keys work as the browser’s own.
- prefers-reduced-motion: a button press jumps at once instead of gliding. Nothing moves by itself.
- Without JavaScript: a plain horizontal scroll with its scrollbar, no fades and no buttons.
Where it's live
- superherotech.ai: /elements/scrollbox/ (demo)
How to ask for it
“The scrollbox on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Sticker. Or see all of them working.
More in Navigation & layout
See them all working- Mega menu
Put every page a visitor might want one click from the header, grouped the way your customers think about them.
- Accordion / FAQ
FAQ page design that gets people their answer fast: each question opens with a tap, every answer is findable with Ctrl+F, and search engines and AI assistants can read them as questions and answers.
- Tabs
Put several related answers in one place, a tab each, that folds into a simple list on a phone.
- Off-canvas panel
Keep the cart, the filters or the account menu one tap away, sliding in from the edge instead of crowding the page.
Want the scrollbox on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.