Scroll Area
Documented primitive for "scrollable content block" — constrains height (or width with the --horizontal variant) and lets our global thin-scrollbar styles take over. Use for arbitrary scrollable consumer-app content like long descriptions, sidebar widgets, log views, code previews. Component-specific scroll regions (Modal body, Sheet body, Dropdown lists) keep their own implementations — they have context-specific padding.
a11y (built in): this is CSS only — the scroll area adds no role, no tabindex and no JS, so when a block has to be reachable and announced as a region, give the instance tabindex="0" plus role="region" and a name yourself. The --fade edges are background layers, not elements, so they add nothing to the accessibility tree, and the global scrollbar (scrollbar-width: thin with a border-strong thumb on a transparent track, ::-webkit-scrollbar kept for older Blink/WebKit) stays visible whenever content overflows.
Usage: <div class="lb-scroll-area">…</div>. Override max-height per instance: style="--max-height: 24rem". Add --fade for scroll-shadow indicators at the edges (pure CSS, no JS — shadows appear only when more content exists in that direction). Add --horizontal for horizontal scroll instead of vertical (use --max-width to constrain).
Default — vertical scroll
Default --max-height: 16rem. Content overflowing the height becomes scrollable; the global thin-scrollbar styles render the visible thumb.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.
Ultima frase — confirms you've reached the end.
With fade indicators — --fade
Subtle gradient shadows at the top and bottom signal there's more content to scroll. Top shadow appears only when scrolled down (the cover gradient masks it at the start position); bottom shadow appears only when more content exists below. Pure CSS via stacked background layers with mixed background-attachment: local and scroll — no JS needed.
Scroll down — notice the top fade only appears once you've scrolled away from the top edge.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
In reprehenderit in voluptate velit esse cillum dolore eu fugiat.
Nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Sunt in culpa qui officia deserunt mollit anim id est laborum.
End of content — bottom fade disappears here.
Horizontal — --horizontal
Flips the scroll axis to horizontal. Useful for chip rows, tag clouds, sticky-row table-like data. white-space: nowrap on the wrap keeps content on one line so it actually scrolls instead of wrapping. Pair with --fade for left/right gradient indicators.
--horizontal --fadeInside a Card — log viewer pattern
Drop a .lb-scroll-area inside a card body for log viewers, change-history panels, or any "long content fits in a fixed slot" use case. Reuses the existing Card component — the scroll area only handles its own scrolling.
Activity log
Last 24 hours
10:42 — Jane invited Mark to the workspace
10:38 — Project "Q2 launch" archived
09:15 — Settings updated by Alex
08:22 — Three new comments on "Dashboard redesign"
Yesterday 18:04 — Deploy to production succeeded
Yesterday 17:50 — PR #842 merged by Priya
Yesterday 16:31 — Database migration complete
Yesterday 15:12 — Two team members joined
Yesterday 14:00 — Sprint retrospective notes added
Yesterday 11:45 — Backup created
Yesterday 09:00 — Monthly invoice generated