All classes

Every one of the 931 classes Deck defines, read from src/*.css by tools/docs/extract.mjs. Filter by cascade layer, by API bucket, by name, or by whether a page covers it yet. The filters are a plain form, so they work with JavaScript switched off.

Matches the class name, the comment above it in the source, and the file it lives in.

Clear

Showing 59 of 931 classes.

Every class Deck defines, with its layer, bucket and documentation page
Class Layer Bucket What it does Documented in
.back-to-top deck.components public A link, not a button. #top is a real target at the head of the document, so the browser moves focus there along with the scroll. A button calling scrollTo() leaves a keyboard user parked at the bottom of the page while looking at the top of it, which is the whole bug this component usually ships with. Showing and hiding is a scroll-driven animation, so there is no scroll listener anywhere -- same mechanism as .scroll-progress in 16-motion. visibility is in the keyframe on purpose: it takes the link out of the tab order and out of the accessibility tree while it is off screen, which is what aria-hidden reaches for and which CSS can actually do by itself. deck.js only steps in where animation-timeline is missing, and it uses an IntersectionObserver on a sentinel, not a scroll handler. 22-nav.css:432
.banner deck.components public An announcement strip. Top or bottom, dismissible, out of the way. 22-nav.css:610
.banner-bottom deck.components public Sets inset-block, border-block, border-block-start, border-block-end, and 1 more. 22-nav.css:624
.banner-close deck.components public Sets margin-inline-start, opacity, cursor, flex. 22-nav.css:634
.banner-dark deck.components public Sets background, color, border-color. 22-nav.css:632
.banner-fixed deck.components public Sets position, inset-inline. 22-nav.css:631
.banner-warn deck.components public Sets background, color, border-color. 22-nav.css:633
.chip deck.components public Sets display, align-items, gap, min-block-size, and 9 more. 07-components.css:116
.chip-remove deck.components public Sets display, place-items, opacity. 07-components.css:137
.disclosure deck.components public No declarations. 07-components.css:433
.disclosure-body deck.components public No declarations. 07-components.css:460
.drag-handle deck.components public Sets cursor, touch-action. 26-perf.css:76
.drop-reject deck.components internal Sets outline-color, background. 26-perf.css:119
.drop-target deck.components internal A list that is accepting a drop 26-perf.css:113
.empty deck.components public Sets display, place-items, gap, padding, and 2 more. 07-components.css:745
.empty-art deck.components public Sets inline-size, block-size, display, place-items, and 4 more. 07-components.css:753
.empty-title deck.components public Sets font-size, font-weight, color. 07-components.css:763
.is-visible deck.components internal No declarations. 22-nav.css:506
.jumbotron deck.components public A hero block. Kept deliberately plain so the content carries it. 22-nav.css:641
.jumbotron-actions deck.components public Sets display, flex-wrap, gap. 22-nav.css:664
.jumbotron-center deck.components public Sets text-align, align-items. 22-nav.css:651
.jumbotron-media deck.components public Sets display, gap, align-items, grid-template-columns. 22-nav.css:653
.mega deck.components public A wide panel under a nav item. Built on the popover attribute, so escape and outside-click are the browser's job. 22-nav.css:269
.mega-col deck.components public Sets display, flex-direction, gap. 22-nav.css:295
.mega-feature deck.components public Sets grid-column, padding, border-radius, background, and 1 more. 22-nav.css:315
.mega-footer deck.components public Sets display, gap, flex-wrap, margin-block-start, and 3 more. 22-nav.css:322
.mega-grid deck.components public Sets display, gap, grid-template-columns. 22-nav.css:290
.mega-heading deck.components public Sets font-size, font-weight, color, padding. 22-nav.css:296
.mega-item deck.components public Sets display, align-items, gap, padding, and 4 more. 22-nav.css:302
.mega-item-note deck.components public Sets font-size, color. 22-nav.css:314
.mega-item-title deck.components public Sets font-weight, font-size. 22-nav.css:313
.num deck.components public No declarations. 07-components.css:262
.panel deck.components public Sets background, border-block, padding, margin-inline. 07-components.css:63
.presence deck.components public Sets position. 07-components.css:211
.presence-away deck.components public No declarations. 07-components.css:223
.presence-off deck.components public No declarations. 07-components.css:224
.reaction deck.mobile public Reaction pill, like a Slack or Teams reaction 08-mobile.css:230
.reorder deck.components internal No declarations. 26-perf.css:222
.sortable deck.components internal Deck styles the states; deck-adapters.js drives them with SortableJS when it is present, or with the native HTML drag and drop API when it is not. The class names are SortableJS's defaults, so no configuration is needed. 26-perf.css:75
.sortable-chosen deck.components internal Sets background. 26-perf.css:109
.sortable-drag deck.components internal The item being dragged, following the pointer 26-perf.css:94
.sortable-fallback deck.components internal Sets opacity. 26-perf.css:110
.sortable-ghost deck.components internal The gap left where the item will land 26-perf.css:102
.speed-dial deck.components public A FAB that fans out into related actions. 22-nav.css:335
.speed-dial-action deck.components public Sets display, align-items, gap, opacity, and 5 more. 22-nav.css:371
.speed-dial-actions deck.components public Sets display, flex-direction, align-items, gap. 22-nav.css:352
.speed-dial-button deck.components public Sets inline-size, block-size, border-radius, display, and 6 more. 22-nav.css:400
.speed-dial-label deck.components public Sets padding, border-radius, background, color, and 4 more. 22-nav.css:390
.stat deck.components public Sets display, flex-direction, gap. 07-components.css:767
.stat-delta deck.components public Sets display, align-items, gap, font-size, and 1 more. 07-components.css:776
.stat-delta-down deck.components public Sets color. 07-components.css:778
.stat-delta-up deck.components public Sets color. 07-components.css:777
.stat-label deck.components public Sets font-size, color. 07-components.css:775
.stat-value deck.components public Sets font-size, font-weight, letter-spacing, font-variant-numeric, and 1 more. 07-components.css:768
.status-line deck.components public Live status line: dot plus label, the pattern used in status pages 22-nav.css:769
.stretch deck.components public No declarations. 07-components.css:50
.tabbar deck.mobile public Sets position, inset-inline, inset-block-end, z-index, and 6 more. 08-mobile.css:84
.tabbar-item deck.mobile public Sets flex, min-block-size, padding-block, display, and 10 more. 08-mobile.css:98
.theme-dock deck.print internal Sets display. 99-print.css:61

Reading the columns

Layer
The @layer the rule sits in. Layers earlier in Deck's order lose to layers later in it, and every one of them loses to your own @layer app — which is why overriding Deck never needs !important.
Bucket
Public is frozen: it will not change or disappear without a major version. Internal exists in the stylesheet and is not part of the promise — it is usually a hook the JavaScript sets, and it may move. Deprecated still works and will go.
What it does
The comment written above the rule in the source where there is one. Where there is not, a dimmed summary of the properties the rule sets — honest filler that says what the rule does without pretending to say why.
Documented in
The page that claims the class, or its file and line where none does yet. 59 classes currently have no page; filtering the last select to No page yet lists exactly those.