Scroll utilities

tier 2 — classes

A region that is allowed to scroll on its own instead of growing the page. Both classes bring the library's scroll shadows with them, so the cut edge fades rather than ending abruptly.

A scroll container needs to be reachable Give it tabindex="0" and a name — role="group" with an aria-label — or a keyboard user cannot scroll it and a screen reader cannot say what it holds. Every demo below does.

Vertical

.sedna-scroll caps a block's height and scrolls the overflow. --sm, --md and --lg are 12rem, 20rem and 32rem; for anything else set --scroll-max yourself, as the log block above does. The shadows read --surface-here, so a scroller inside a card, a modal, a drawer or a popover is already correct without being named.

sedna-scroll--sm caps this at 12rem.

EU-Central

EU-West

SD-Applications

SD-Infrastructure

NA-East

NA-West

APAC

LATAM

sedna-scroll--md caps this at 20rem.

EU-Central

EU-West

SD-Applications

SD-Infrastructure

NA-East

NA-West

APAC

LATAM

sedna-scroll--lg caps this at 32rem, which this content does not reach.

EU-Central

2026-09-08 06:12:04Z  sync started
2026-09-08 06:12:07Z  1 211 accounts read
2026-09-08 06:12:19Z  7 differences held for approval
2026-09-08 06:12:19Z  sync finished

<div class="sedna-col sedna-gap-2" style="max-width:420px">
    <div class="sedna-scroll sedna-scroll--sm" tabindex="0" role="group" aria-label="Assignment groups"
         style="border:1px dashed var(--border); padding:8px">
        <p class="sedna-mt-0">sedna-scroll--sm caps this at 12rem.</p>
        <p>EU-Central</p><p>EU-West</p><p>SD-Applications</p><p>SD-Infrastructure</p>
        <p>NA-East</p><p>NA-West</p><p>APAC</p><p class="sedna-mb-0">LATAM</p>
    </div>
    <div class="sedna-scroll sedna-scroll--md" tabindex="0" role="group" aria-label="Regions, medium cap"
         style="border:1px dashed var(--border); padding:8px">
        <p class="sedna-mt-0">sedna-scroll--md caps this at 20rem.</p>
        <p>EU-Central</p><p>EU-West</p><p>SD-Applications</p><p>SD-Infrastructure</p>
        <p>NA-East</p><p>NA-West</p><p>APAC</p><p class="sedna-mb-0">LATAM</p>
    </div>
    <div class="sedna-scroll sedna-scroll--lg" tabindex="0" role="group" aria-label="Regions, large cap"
         style="border:1px dashed var(--border); padding:8px">
        <p class="sedna-mt-0">sedna-scroll--lg caps this at 32rem, which this content does not reach.</p>
        <p class="sedna-mb-0">EU-Central</p>
    </div>
    <pre class="sedna-scroll code-block" style="--scroll-max: 6rem">2026-09-08 06:12:04Z  sync started
2026-09-08 06:12:07Z  1 211 accounts read
2026-09-08 06:12:19Z  7 differences held for approval
2026-09-08 06:12:19Z  sync finished</pre>
</div>

Horizontal

.sedna-scroll-x is the wrapper a wide table goes in, so the table scrolls sideways inside the page instead of the page scrolling sideways under the frame; combine it with .sedna-scroll for both axes. A table that is wide because it has too many columns is a different problem — see Tables for pinned columns and the stacked layout.

Order	Customer	Region	Warehouse	Total
ORD-4182	Priya Nair	EU-West	Rotterdam	1,240.00
ORD-4183	Tomás Ferreira	EU-Central	Hamburg	318.40

<div class="sedna-scroll-x sedna-scroll" tabindex="0" role="group" aria-label="Order detail table"
     style="border:1px dashed var(--border); max-width:420px">
    <table class="table" style="min-width:640px">
        <thead><tr><th>Order</th><th>Customer</th><th>Region</th><th>Warehouse</th><th class="col-num">Total</th></tr></thead>
        <tbody>
            <tr><td>ORD-4182</td><td>Priya Nair</td><td>EU-West</td><td>Rotterdam</td><td class="col-num">1,240.00</td></tr>
            <tr><td>ORD-4183</td><td>Tomás Ferreira</td><td>EU-Central</td><td>Hamburg</td><td class="col-num">318.40</td></tr>
        </tbody>
    </table>
</div>