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.
Showing 931 of 931 classes.
| Class | Layer | Bucket | What it does | Documented in |
|---|---|---|---|---|
.absolute |
deck.utilities |
public | Sets position. | Position |
.accordion |
deck.components |
public | A bordered container for native <details>. The open state, the keyboard and the accessible name are the element's. Deck restyles the summary, replaces the marker with a chevron, and animates the height using ::details-content plus the interpolate-size opt-in in 02-reset.css — the first time a disclosure could animate to auto height without JavaScript. Give the details elements a shared name attribute for one-at-a-time. | Accordion |
.accordion-body |
deck.components |
public | No declarations. | Accordion |
.actions-cq |
deck.layout |
public | Button rows that go full width when cramped | Display and sizing |
.addon |
deck.components |
public | No declarations. | Input |
.alert |
deck.components |
public | A block of prose the reader is meant to stop and read. The tone is a three-pixel border-inline-start, so it moves to the right edge under dir="rtl" with no second rule. Deck sets no ARIA role: role="alert" on a message that is present at page load interrupts a screen reader before it has read anything. | Alert |
.alert-bad |
deck.components |
public | Something failed, or is about to. | Alert |
.alert-body |
deck.components |
public | The explanatory line. min-inline-size: 0 so a long unbroken string cannot push the alert wider than its container. | Alert |
.alert-good |
deck.components |
public | Confirmation that something worked. | Alert |
.alert-info |
deck.components |
public | Something the reader should know before continuing. | Alert |
.alert-title |
deck.components |
public | The first line of an alert. A weight change, not a heading — if it belongs in the document outline, put this class on a real h2-h4. | Alert |
.alert-warn |
deck.components |
public | A consequence the reader should understand first. | Alert |
.anchor |
deck.components |
public | Put .anchor on the trigger and --anchor on both trigger and panel. Each pair needs a unique name, so generate it server-side in Keel: <button class="anchor" style="--anchor:--menu-<?= $id ?>"> | Popover |
.app-shell |
deck.layout |
public | Header, content, footer in a 100dvh grid whose middle row takes the remaining height — the sticky footer, without the hacks. dvh rather than vh so it tracks a phone browser hiding its chrome. It expects exactly three children. | Container |
.avatar |
deck.components |
public | A round box holding an image or initials. --size drives the width, the height and the font size together, so a size variant is one declaration and the initials can never overflow the circle. | Avatar |
.avatar-lg |
deck.components |
public | 56px. | Avatar |
.avatar-sm |
deck.components |
public | 32px. | Avatar |
.avatar-square |
deck.components |
public | A square avatar, for anything that is not a person — an organisation, a project, a repository. | Avatar |
.avatar-stack |
deck.components |
public | Overlapping avatars. The offset is a fraction of --size, so it stays proportional at every size, and the ring is the surface colour, which is wrong on any other background. | Avatar |
.avatar-xl |
deck.components |
public | 80px. | Avatar |
.avatar-xs |
deck.components |
public | 24px. | Avatar |
.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 |
.backface-hidden |
deck.effects |
public | Sets backface-visibility. | 3D space |
.badge |
deck.components |
public | A small inline status pill. Sized in em, so it tracks whatever text it sits next to rather than needing a size variant per context. | Badge |
.badge-bad |
deck.components |
public | Failed, overdue, rejected. | Badge |
.badge-brand |
deck.components |
public | Brand tint. For a label that names a category rather than a status. | Badge |
.badge-dot |
deck.components |
public | Adds a leading dot in currentColor, so it takes the tone's text colour without a second class. The dot is decoration — never ship one with no text beside it, because colour alone is not a status. | Badge |
.badge-good |
deck.components |
public | Paid, shipped, passing, active. | Badge |
.badge-solid |
deck.components |
public | Filled with the brand colour. The highest-emphasis badge; use one per view or it stops meaning anything. | Badge |
.badge-warn |
deck.components |
public | Pending, expiring: needs attention, nothing is broken. | Badge |
.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 |
.bar |
deck.layout |
public | Push the last child away from the rest | Bar |
.bg-brand |
deck.utilities |
public | Sets background, color. | Colour and surface |
.bg-none |
deck.utilities |
public | Sets background. | Colour and surface |
.bg-soft |
deck.utilities |
public | Sets background, color. | Colour and surface |
.bg-sunken |
deck.utilities |
public | Sets background. | Colour and surface |
.bg-surface |
deck.utilities |
public | Sets background. | Colour and surface |
.bidi-isolate |
deck.utilities |
public | Sets unicode-bidi. | Typography |
.bidi-plaintext |
deck.utilities |
public | Sets unicode-bidi. | Typography |
.bie |
deck.utilities |
public | Sets border-inline-end. | Colour and surface |
.bis |
deck.utilities |
public | Sets border-inline-start. | Colour and surface |
.block |
deck.utilities |
public | Sets display. | Display and sizing |
.border |
deck.utilities |
public | Sets border. | Colour and surface |
.border-0 |
deck.utilities |
public | Sets border. | Colour and surface |
.border-b |
deck.utilities |
public | Sets border-block-end. | Colour and surface |
.border-brand |
deck.utilities |
public | Sets border-color. | Colour and surface |
.border-t |
deck.utilities |
public | Sets border-block-start. | Colour and surface |
.breadcrumb |
deck.components |
public | Sets display, flex-wrap, align-items, gap, and 1 more. | Breadcrumb |
.btn |
deck.components |
public | Every button clears the 44px touch target even when it looks smaller | Button |
.btn-3d |
deck.effects |
public | A button with real thickness. The face moves down into the shadow instead of just changing color. | 3D space |
.btn-accent |
deck.components |
public | A secondary emphasis colour, for upsells and highlights. | Button |
.btn-block |
deck.components |
public | Full width. For a phone, or the primary action at the end of a form. | Button |
.btn-danger |
deck.components |
public | Destructive and irreversible. Pair it with a confirmation. | Button |
.btn-ghost |
deck.components |
public | No border or background until hover. For toolbars and dense rows where seven bordered buttons would be noise. | Button |
.btn-group |
deck.components |
public | Buttons joined into one control, with the inner radii and the doubled border between them removed. Logical radii, so it mirrors under RTL. | Button |
.btn-icon |
deck.components |
public | Square, icon-only button. It has no text, so it needs an aria-label. | Button |
.btn-lg |
deck.components |
public | The large size, from --control-h-lg. | Button |
.btn-link |
deck.components |
public | Looks like a link, behaves like a button. Only for a real <button> that has to sit in a row of links — on an anchor it adds a touch target, a ring offset and nowrap to something that wanted none of them. | Button |
.btn-outline |
deck.components |
public | Brand-coloured border, transparent fill. | Button |
.btn-primary |
deck.components |
public | The one important action in a view. Solid brand fill; use exactly one per screen so it keeps meaning something. | Button |
.btn-round |
deck.components |
public | A fully rounded button, usually paired with .btn-icon. | Button |
.btn-sm |
deck.components |
public | The 34px size. Still clears the 44px touch target, because the target is a pseudo-element rather than the box. | Button |
.btn-soft |
deck.components |
public | Tinted, low weight. Good for an action repeated down a list. | Button |
.bubble |
deck.components |
public | The message body. Its corner radii are logical, which is what lets the grouping flatten the correct side in either writing direction. | Chat |
.bubble-attachment |
deck.components |
public | Sets margin, border-start-start-radius, border-start-end-radius, overflow. | Chat |
.bubble-meta |
deck.components |
public | Sets display, align-items, gap, margin-block-start, and 4 more. | Chat |
.bubble-name |
deck.components |
public | Sets font-weight, font-size, margin-block-end, color. | Chat |
.bubble-system |
deck.components |
public | Sets align-self, background, border, color, and 3 more. | Chat |
.bubble-typing |
deck.components |
public | Typing indicator | Chat |
.capitalize |
deck.utilities |
public | Sets text-transform. | Typography |
.card |
deck.components |
public | A surface with a border, radius and shadow. It brings no padding of its own — put .card-body inside so the header, body and footer can each own their spacing. | Card |
.card-body |
deck.components |
public | The padded region of a card. A column with a gap, so children stack without margins. | Card |
.card-brand |
deck.components |
public | Brand-tinted fill and border, for the one card on a page that is an offer rather than a record. | Card |
.card-flex |
deck.layout |
public | A card that turns into a horizontal media object once it has the room | Card |
.card-flush |
deck.components |
public | A card with no border, shadow or background. Grouping without a box drawn around it. | Card |
.card-footer |
deck.components |
public | The top region of a card. A flex row, so a title and a control sit on one line; the divider below it belongs to the header, so a card with no header has no stray line. | Card |
.card-header |
deck.components |
public | The top region of a card. A flex row, so a title and a control sit on one line; the divider below it belongs to the header, so a card with no header has no stray line. | Card |
.card-link |
deck.components |
public | Whole card is the link, but nested links still work | Card |
.card-media |
deck.components |
public | An image region that reaches the card's edges. The card's own overflow: clip does the rounding, so the image needs no radius. Put it beside .card-body, never inside it. | Card |
.card-raised |
deck.components |
public | A deeper shadow and no visible border, for a surface that should read as floating above the page. | Card |
.card-title |
deck.components |
public | The heading inside a card. Sized independently of h1-h6 so the same card works at any heading level. | Card |
.carousel |
deck.components |
public | Scroll snap does the work. Arrows and dots are progressive enhancement, so it still swipes correctly with JavaScript switched off. | Carousel |
.carousel-arrow |
deck.components |
public | Previous and next. Hidden on a coarse pointer, where the reader swipes instead — so do not also hide the dots. | Carousel |
.carousel-caption |
deck.components |
public | Text over a slide. The generous block-start padding is there to give the scrim room to fade — without a background the near-white text sits directly on the image and disappears over anything light. | Carousel |
.carousel-dot |
deck.components |
internal | the tap target is bigger than the dot | Carousel |
.carousel-dots |
deck.components |
internal | Sets display, justify-content, gap, padding-block-start. | Carousel |
.carousel-multi |
deck.components |
public | No declarations. | Carousel |
.carousel-next |
deck.components |
public | Sets inset-inline-end. | Carousel |
.carousel-peek |
deck.components |
public | No declarations. | Carousel |
.carousel-prev |
deck.components |
public | Sets inset-inline-start. | Carousel |
.carousel-slide |
deck.components |
public | One slide. flex-basis: 100% by default; .carousel-peek makes it 86% so the next one is partly visible, which is the only persistent cue that the track scrolls once the scrollbar is hidden. | Carousel |
.carousel-track |
deck.components |
public | The scroll-snap container holding the slides. | Carousel |
.center |
deck.layout |
public | Center a thing with a max width and no side effects | Stack |
.chart |
deck.components |
public | The frame, and the palette. Six series colours are computed by rotating --hue-brand, so charts retheme with the rest of the app and stay in one family. That also makes them hard to tell apart for a colour-blind reader — label the marks directly rather than relying on hue. | Charts |
.chart-area |
deck.components |
public | Sets fill, opacity, stroke, animation. | Charts |
.chart-area-g |
deck.effects |
public | Area charts read better with a gradient falling off to nothing. | Charts |
.chart-bar |
deck.components |
public | Sets display, grid-template-columns, align-items, gap, and 1 more. | Charts |
.chart-bar-fill |
deck.components |
public | The filled part of a horizontal bar, sized from --value. It grows from the starting edge, which needs transform-origin — a physical property — flipped for RTL in 19-logical.css. | Charts |
.chart-bar-label |
deck.components |
public | Sets color, overflow, text-overflow, white-space. | Charts |
.chart-bar-track |
deck.components |
public | Sets block-size, border-radius, background, overflow. | Charts |
.chart-bar-value |
deck.components |
public | The value printed beside a bar rather than inside it. Prefer this over text on the fill: contrast-color() raises the floor for text on a series colour but does not guarantee AA. | Charts |
.chart-bars |
deck.components |
public | Sets display, flex-direction, gap. | Charts |
.chart-baseline |
deck.components |
public | Sets stroke, stroke-width, vector-effect. | Charts |
.chart-col |
deck.components |
public | A column. Its height is calc(var(--value) * 1%), so rendering a chart is writing numbers into style attributes. data-label and data-value are drawn as generated content, which means they are for sighted readers only. | Charts |
.chart-col-stack |
deck.components |
public | Stacked columns: nest segments inside a .chart-col-stack | Charts |
.chart-columns |
deck.components |
public | <div class="chart-columns"> <div class="chart-col" style="--value:68" data-label="Mar" data-value="68"></div> | Charts |
.chart-dot |
deck.components |
public | Sets fill, stroke, stroke-width, vector-effect. | Charts |
.chart-dot-active |
deck.components |
public | Sets fill. | Charts |
.chart-gridline |
deck.components |
public | Sets stroke, stroke-width, vector-effect. | Charts |
.chart-group |
deck.components |
public | Grouped columns | Charts |
.chart-head |
deck.components |
public | Sets display, align-items, gap, flex-wrap. | Charts |
.chart-heat |
deck.components |
public | A grid of --cols columns whose cells mix the series colour with the sunken background by --value, interpolated in oklab. | Charts |
.chart-legend |
deck.components |
public | The key. Built from real buttons it gets a working toggle state for free, because the faded style keys off [aria-pressed="false"]. | Charts |
.chart-lg |
deck.components |
public | Sets --chart-h. | Charts |
.chart-line |
deck.components |
public | Sets fill, stroke, stroke-width, stroke-linecap, and 5 more. | Charts |
.chart-line-dashed |
deck.components |
public | Sets stroke-dasharray, animation, stroke-dashoffset, opacity. | Charts |
.chart-meter |
deck.components |
public | Sets display, block-size, border-radius, overflow, and 1 more. | Charts |
.chart-note |
deck.components |
public | Sets font-size, color. | Charts |
.chart-plot |
deck.components |
public | Sets display, grid-template-columns. | Charts |
.chart-sm |
deck.components |
public | Sets --chart-h. | Charts |
.chart-svg |
deck.components |
public | <svg class="chart-svg" viewBox="0 0 300 100" preserveAspectRatio="none"> <path class="chart-area" d="..."/> <path class="chart-line" d="..."/> | Charts |
.chart-title |
deck.components |
public | Sets font-size, font-weight. | Charts |
.chart-x |
deck.components |
public | Sets display, justify-content, font-size, color, and 1 more. | Charts |
.chart-y |
deck.components |
public | Sets display, flex-direction, justify-content, font-size, and 5 more. | Charts |
.chat |
deck.components |
public | Conversation view. Consecutive messages from one side group together and only the last one in a run gets the tail. | Chat |
.chat-composer |
deck.components |
public | Composer pinned to the bottom | Chat |
.chat-day |
deck.components |
public | A centred date pill between days. Styling, not structure — a screen reader hears ordinary text. | Chat |
.check |
deck.components |
public | A checkbox or radio and its text, laid out as a row that clears the 44px touch target. Wrap the text in .check-text to add a second line. | Checkbox and radio |
.check-card |
deck.components |
public | Card-style choice, good for pricing and plan pickers | Checkbox and radio |
.check-note |
deck.components |
public | No declarations. | Checkbox and radio |
.check-text |
deck.components |
public | No declarations. | Checkbox and radio |
.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 |
.clamp-2 |
deck.utilities |
public | Sets display, -webkit-box-orient, overflow. | Typography |
.clamp-3 |
deck.utilities |
public | Sets display, -webkit-box-orient, overflow. | Typography |
.cluster |
deck.layout |
public | Horizontal group that wraps instead of overflowing on a phone | Cluster |
.cluster-between |
deck.layout |
public | First item to one end, last to the other. Beware of combining it with wrapping: each line is justified separately, so a lone item on the second line jumps to the far end and looks stranded. .bar with .push is the predictable version. | Cluster |
.cluster-center |
deck.layout |
public | Centres the row. | Cluster |
.cluster-end |
deck.layout |
public | Packs the row against the end edge, which follows the writing direction rather than always being the right. | Cluster |
.cluster-tight |
deck.layout |
public | Kept as the readable name for step 2, which is what most clusters want | Cluster |
.code-ltr |
deck.utilities |
public | Sets direction, unicode-bidi, text-align. | Typography |
.combo |
deck.components |
public | A filtering select. It wraps a real <select> that stays in the DOM and stays in sync, so an ordinary form post works with no server-side handling, server-side rendering is just marking options selected, and without JavaScript the reader still gets a working control. | Combobox |
.combo-check |
deck.components |
internal | No declarations. | Combobox |
.combo-clear |
deck.components |
internal | Sets color. | Combobox |
.combo-control |
deck.components |
internal | The box, styled to match .input so a combobox in a form does not look like a different species. Focus is handled twice — :has(.combo-input:focus) and :focus-within — so a token's remove button lights the box too. | Combobox |
.combo-count |
deck.components |
internal | Sets font-size, font-weight, color, flex. | Combobox |
.combo-create |
deck.components |
internal | Sticky "create new" row for tag-style inputs | Combobox |
.combo-empty |
deck.components |
internal | The no-matches row. Name what was searched for — "No repositories match 'deckk'" tells a reader who mistyped what they actually typed. | Combobox |
.combo-group |
deck.components |
internal | A sticky heading above a group of options. | Combobox |
.combo-hint |
deck.components |
internal | Sets display, gap, padding, border-block-start, and 2 more. | Combobox |
.combo-input |
deck.components |
internal | The text field. deck.js gives it role="combobox" and keeps aria-expanded in step; arrow keys move .is-active rather than focus, so the reader can keep typing while the highlight moves. | Combobox |
.combo-list |
deck.components |
internal | The option list. A positioned sibling by default, which a clipping ancestor can cut off; 25-anchor.css moves it to the top layer where anchor positioning exists, which is the fix for the combobox-inside-a-modal bug. | Combobox |
.combo-loading |
deck.components |
internal | The no-matches row. Name what was searched for — "No repositories match 'deckk'" tells a reader who mistyped what they actually typed. | Combobox |
.combo-option |
deck.components |
internal | The matched substring, wrapped by deck.js | Combobox |
.combo-option-main |
deck.components |
internal | No declarations. | Combobox |
.combo-option-sub |
deck.components |
internal | No declarations. | Combobox |
.combo-option-trail |
deck.components |
internal | No declarations. | Combobox |
.combo-sep |
deck.components |
internal | Sets block-size, background, margin. | Combobox |
.combo-toggle |
deck.components |
internal | Sets inline-size, block-size, display, place-items, and 4 more. | Combobox |
.combo-token |
deck.components |
internal | Sets display, align-items, gap, min-block-size, and 9 more. | Combobox |
.combo-tokens |
deck.components |
internal | Sets display. | Combobox |
.contain |
deck.components |
public | Tell the engine that a component's layout cannot affect anything outside it. On a dashboard with twenty cards this is the difference between one layout pass and twenty. | Display and sizing |
.contain-paint |
deck.components |
public | Sets contain. | Display and sizing |
.container |
deck.layout |
public | Centres content and caps it at --container, with the responsive page gutter already applied. Nest one inside another and the inner one adds a second gutter, so use .container-full instead. | Container |
.container-full |
deck.layout |
public | Keeps the page gutter, drops the max width. This is what to nest inside another container — a second .container would apply the gutter twice. | Container |
.container-lg |
deck.layout |
public | The same 76rem as the bare .container, named. Use it when a page should say which width it means rather than rely on the default. | Container |
.container-md |
deck.layout |
public | An article with a rail, or a form. | Container |
.container-sm |
deck.layout |
public | A single column of prose: about 70 characters at the body size, which is inside the maximum line length WCAG recommends. | Container |
.container-xl |
deck.layout |
public | A wide dashboard or a data grid. | Container |
.contents |
deck.utilities |
public | Sets display. | Display and sizing |
.copy |
deck.components |
public | The behaviour hangs off [data-deck-copy], not off .copy-btn. The class is the look and nothing else, so a button with the class and no attribute looks exactly right and does nothing at all -- the single most common way to get this component wrong. Whether a successful copy raises a toast depends on what is inside the button: a .copy-done element swaps in place and no toast fires; without one, deck-extras.js toasts instead. .copy-inline never toasts. | Copy to clipboard |
.copy-btn |
deck.components |
public | Sets flex, display, align-items, gap, and 9 more. | Copy to clipboard |
.copy-done |
deck.components |
public | No declarations. | Copy to clipboard |
.copy-idle |
deck.components |
public | No declarations. | Copy to clipboard |
.copy-inline |
deck.components |
public | Inline icon-only variant, for an order number or an API key in a table | Copy to clipboard |
.copy-value |
deck.components |
public | No declarations. | Copy to clipboard |
.coverflow |
deck.effects |
public | A horizontal scroller where the off-center items rotate away. Uses scroll snap for the mechanics and 3D only for the read. | 3D space |
.cq |
deck.layout |
public | Container queries: components respond to their slot, not the viewport | Display and sizing |
.cq-lg |
deck.layout |
public | No declarations. | Display and sizing |
.cq-md |
deck.layout |
public | No declarations. | Display and sizing |
.cq-normal |
deck.layout |
public | Sets container-type. | Display and sizing |
.cq-pane |
deck.layout |
public | Sets container. | Display and sizing |
.cq-panel |
deck.layout |
public | Sets container. | Display and sizing |
.cq-row |
deck.layout |
public | Sets container. | Display and sizing |
.cq-shell |
deck.layout |
public | Sets container. | Display and sizing |
.cq-size |
deck.layout |
public | Sets container-type. | Display and sizing |
.cq-sm |
deck.layout |
public | No declarations. | Display and sizing |
.cq-tone |
deck.layout |
public | Query a custom property rather than a size. Set --tone on a container and everything inside it adapts, with no extra classes on the children. Supported in current Chrome and Safari; the fallback is simply no change. | Display and sizing |
.cube |
deck.effects |
public | Six faces for a rotating status block or an empty-state illustration. | 3D space |
.cube-spin |
deck.effects |
public | Sets animation. | 3D space |
.cursor-pointer |
deck.utilities |
public | Sets cursor. | Display and sizing |
.datefield |
deck.components |
public | The trigger for a date picker: an input with a calendar icon inside its starting edge and a clear button at the end. The input is readonly and cursor: pointer, because the value comes from the calendar — which also means a reader who knows the date cannot type it. | Date picker |
.datefield-clear |
deck.components |
public | No declarations. | Date picker |
.datepicker |
deck.components |
public | The calendar panel: a native popover, anchored to its field by 25-anchor.css with the same fallback chain as a menu. Where there is no room below it opens upward, and position-try-order: most-block-size picks the direction with the most room rather than the first that fits — which matters more for a calendar than for a menu. | Date picker |
.datepicker-day |
deck.components |
internal | One day cell. 38px, raised to 42px on a coarse pointer so it approaches the touch target. Eight is- states compose on it, and the range band is built from is-in-range plus logical corner radii on the two ends. | Date picker |
.datepicker-dow |
deck.components |
internal | Sets text-align, font-size, font-weight, color, and 1 more. | Date picker |
.datepicker-foot |
deck.components |
internal | Sets display, align-items, gap, padding, and 2 more. | Date picker |
.datepicker-grid |
deck.components |
internal | Sets display, grid-template-columns, gap. | Date picker |
.datepicker-head |
deck.components |
internal | Sets display, align-items, gap, padding-block-end. | Date picker |
.datepicker-jump |
deck.components |
internal | Opens the month and year grid. A picker without one makes a reader press the next-month arrow twenty-four times to reach a date two years out. | Date picker |
.datepicker-layout |
deck.components |
internal | Sets display, flex-direction. | Date picker |
.datepicker-main |
deck.components |
internal | Sets padding. | Date picker |
.datepicker-month |
deck.components |
internal | Sets display, flex-direction. | Date picker |
.datepicker-months |
deck.components |
internal | Sets display, gap. | Date picker |
.datepicker-nav |
deck.components |
internal | Sets inline-size, block-size, display, place-items, and 3 more. | Date picker |
.datepicker-preset |
deck.components |
internal | Sets padding, min-block-size, border-radius, font-size, and 6 more. | Date picker |
.datepicker-presets |
deck.components |
internal | The shortcut rail — "Last 7 days", "This month". A horizontal scroller below 40rem and a column beside the calendar above it. | Date picker |
.datepicker-readout |
deck.components |
internal | Sets flex, font-size, color, font-variant-numeric, and 1 more. | Date picker |
.datepicker-time |
deck.components |
internal | Sets display, align-items, gap, padding, and 1 more. | Date picker |
.datepicker-title |
deck.components |
internal | Sets flex, display, align-items, justify-content, and 8 more. | Date picker |
.defer |
deck.components |
public | Whole sections below the fold. Cheap and safe on any page. | Display and sizing |
.delay-1 |
deck.motion |
public | Sets transition-delay, animation-delay. | Motion |
.delay-2 |
deck.motion |
public | Sets transition-delay, animation-delay. | Motion |
.delay-3 |
deck.motion |
public | Sets transition-delay, animation-delay. | Motion |
.dg |
deck.components |
public | A real table with a frozen header and pinned columns. Use it when the reader operates on data — sorts, selects, scans — rather than reads it; .table is lighter for presentation. Must sit inside .dg-wrap, which carries the scroll container and every custom property these rules read. | Data grid |
.dg-actions |
deck.components |
public | No declarations. | Data grid |
.dg-cards |
deck.components |
public | Below a breakpoint, restacks each row into a labelled card, taking the column name from data-label on the cell. Costs the column alignment that makes a grid comparable; prefer .dg-cq, which asks the container rather than the viewport. | Data grid |
.dg-cards-wrap |
deck.components |
public | Sets max-block-size, overflow, border, background. | Data grid |
.dg-center |
deck.components |
public | No declarations. | Data grid |
.dg-check |
deck.components |
public | No declarations. | Data grid |
.dg-comfy |
deck.components |
public | 56px rows, for a grid with two lines of content per cell. | Data grid |
.dg-compact |
deck.components |
public | 34px rows and smaller text, for scanning many rows at once. | Data grid |
.dg-cq |
deck.layout |
public | Sets display, inline-size. | Data grid |
.dg-empty |
deck.components |
public | The row that holds an empty state, with its height and padding released so the state can be any size. | Data grid |
.dg-num |
deck.components |
public | No declarations. | Data grid |
.dg-pin-end |
deck.components |
public | No declarations. | Data grid |
.dg-pin-start |
deck.components |
public | No declarations. | Data grid |
.dg-pin-start-2 |
deck.components |
public | No declarations. | Data grid |
.dg-resize |
deck.components |
public | Column resize grip. deck.js writes the width to the th. | Data grid |
.dg-selection |
deck.components |
public | Selection bar that slides in once rows are checked | Data grid |
.dg-sort |
deck.components |
internal | The button deck.js builds inside a th[data-sort]. The styling keys off th[aria-sort], so the arrow direction and the announced sort state are the same value and cannot drift apart. | Data grid |
.dg-sort-icon |
deck.components |
internal | No declarations. | Data grid |
.dg-statusbar |
deck.components |
public | Sets display, align-items, gap, flex-wrap, and 3 more. | Data grid |
.dg-tight |
deck.components |
public | No declarations. | Data grid |
.dg-toolbar |
deck.components |
public | Sets display, align-items, gap, flex-wrap, and 1 more. | Data grid |
.dg-virtual |
deck.components |
public | contain-intrinsic-size is the placeholder height for a skipped row. Get it roughly right and the scrollbar is stable; the `auto` keyword makes the browser remember the real height once a row has been rendered once. | Data grid |
.dg-wrap |
deck.components |
public | The shadow only appears once the grid is actually scrolled sideways. A box-shadow offset is physical, so the geometry lives here and 19-logical mirrors it for RTL once, rather than once per branch below. | Data grid |
.dg-wrap-text |
deck.components |
public | No declarations. | Data grid |
.dg-zebra |
deck.components |
public | Zebra is opt-in, and it never fights the pinned column background | Data grid |
.dir-ltr |
deck.utilities |
public | Sometimes a value has one true direction regardless of the page. An order number, an account number, a URL, and a code block read left to right even on an Arabic page. Isolate them so they do not scramble the text around them. | Typography |
.dir-rtl |
deck.utilities |
public | Sets direction, unicode-bidi. | Typography |
.disclosure |
deck.components |
public | No declarations. | 07-components.css:433 |
.disclosure-body |
deck.components |
public | No declarations. | 07-components.css:460 |
.display |
deck.type |
public | Sets font-size, font-weight, line-height, letter-spacing. | Typography |
.display-cq |
deck.layout |
public | No declarations. | Typography |
.donut |
deck.components |
public | A conic gradient driven by --value, with .donut-center holding a figure in the hole. One element, no SVG. Give it role="img" and a label — the shape carries the meaning and nothing else conveys it. | Charts |
.donut-center |
deck.components |
public | Sets position, display, place-items, text-align, and 1 more. | Charts |
.donut-label |
deck.components |
public | No declarations. | Charts |
.donut-value |
deck.components |
public | No declarations. | Charts |
.donut-wrap |
deck.components |
public | Sets position, display, place-items. | Charts |
.drag-handle |
deck.components |
public | Sets cursor, touch-action. | 26-perf.css:76 |
.drawer |
deck.components |
public | A side panel. The bottom sheet is in 08-mobile; this one comes in from an edge and is the right shape for filters, settings, and a mobile nav. | Drawer |
.drawer-body |
deck.components |
public | The scrolling region. overscroll-behavior: contain stops a scroll that reaches the end from chaining to the page behind. | Drawer |
.drawer-end |
deck.components |
public | Pins the drawer to the ending edge instead of the starting one. The inset is logical and mirrors for free; the translate is not, which is why this rule declares its own. | Drawer |
.drawer-footer |
deck.components |
public | The action row, pinned to the bottom. Pads for the home indicator with max(--space-4, safe-area-inset-bottom). | Drawer |
.drawer-header |
deck.components |
public | The title row. Pads for a notch with max(--space-4, safe-area-inset-top). | Drawer |
.drawer-title |
deck.components |
public | The drawer's heading. Point aria-labelledby at it. | Drawer |
.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 |
.dur-1 |
deck.motion |
public | Sets transition-duration, animation-duration. | Motion |
.dur-2 |
deck.motion |
public | Sets transition-duration, animation-duration. | Motion |
.dur-3 |
deck.motion |
public | Sets transition-duration, animation-duration. | Motion |
.dur-4 |
deck.motion |
public | Sets transition-duration, animation-duration. | Motion |
.dur-5 |
deck.motion |
public | Sets transition-duration, animation-duration. | Motion |
.ease-bounce |
deck.motion |
public | Sets transition-timing-function, animation-timing-function. | Motion |
.ease-in |
deck.motion |
public | Sets transition-timing-function, animation-timing-function. | Motion |
.ease-linear |
deck.motion |
public | Sets transition-timing-function, animation-timing-function. | Motion |
.ease-out |
deck.motion |
public | Sets transition-timing-function, animation-timing-function. | Motion |
.ease-overshoot |
deck.motion |
public | Sets transition-timing-function, animation-timing-function. | Motion |
.ease-spring |
deck.motion |
public | Sets transition-timing-function, animation-timing-function. | Motion |
.editor |
deck.components |
public | A toolbar over a contenteditable region. Deck styles the chrome; deck.js wires the commands. The content area inherits .prose, so what you type looks the way it will look when it is published. | Editor |
.editor-content |
deck.components |
public | The editable region. Its placeholder comes from data-placeholder through :empty::before, so it needs no element and no script to hide it. | Editor |
.editor-count |
deck.components |
public | The character count. .is-over turns it red past data-limit — a soft limit, since silently refusing keystrokes reads as a broken keyboard. The server has to enforce it, and role="status" makes it audible. | Editor |
.editor-footer |
deck.components |
public | Sets display, align-items, gap, padding, and 4 more. | Editor |
.editor-select |
deck.components |
public | Sets block-size, padding-inline, border, border-radius, and 4 more. | Editor |
.editor-sep |
deck.components |
public | Sets inline-size, block-size, background, margin-inline. | Editor |
.editor-tool |
deck.components |
public | Sets inline-size, block-size, display, place-items, and 6 more. | Editor |
.editor-tool-wide |
deck.components |
public | Sets inline-size, padding-inline. | Editor |
.editor-toolbar |
deck.components |
public | The tool row. Pressed state is [aria-pressed="true"], which deck-extras.js rewrites from queryCommandState after every command and selection change, so the toolbar reflects the caret rather than the last button pressed. | Editor |
.emoji |
deck.mobile |
public | Pins the emoji font stack and metrics so an emoji renders at the same size and baseline on Windows, iOS and Android instead of jumping between them. | Emoji |
.emoji-grid |
deck.mobile |
public | Emoji picker grid — drop your own set in | Emoji |
.emoji-hero |
deck.mobile |
public | Sets font-size, line-height. | Emoji |
.emoji-lg |
deck.mobile |
public | Sets font-size, vertical-align. | Emoji |
.emoji-tile |
deck.mobile |
public | Emoji as an avatar or a status marker | Emoji |
.emoji-tile-round |
deck.mobile |
public | Sets border-radius. | Emoji |
.emoji-xl |
deck.mobile |
public | Sets font-size, vertical-align. | Emoji |
.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 |
.enter |
deck.motion |
public | One-shot, on load. Use for content that appears, not for every section. | Motion |
.enter-blur |
deck.motion |
public | Sets animation. | Motion |
.enter-drop |
deck.motion |
public | Sets animation. | Motion |
.enter-end |
deck.motion |
public | Sets animation. | Motion |
.enter-pop |
deck.motion |
public | Sets animation. | Motion |
.enter-rise |
deck.motion |
public | Sets animation. | Motion |
.enter-start |
deck.motion |
public | Sets animation. | Motion |
.error |
deck.components |
public | A validation message below a control. Lightened for dark mode with light-dark(), and aligned to flex-start so an icon stays on the first line of a two-line message. | Field |
.expand |
deck.motion |
public | Real height:auto transitions, no measuring in JS. Needs interpolate-size, which tokens opts into on :root. | Motion |
.fab |
deck.components |
public | Floating action button, parked above the tab bar and the notch | Button |
.face-back |
deck.effects |
public | No declarations. | 3D space |
.face-bottom |
deck.effects |
public | No declarations. | 3D space |
.face-end |
deck.effects |
public | No declarations. | 3D space |
.face-front |
deck.effects |
public | No declarations. | 3D space |
.face-start |
deck.effects |
public | No declarations. | 3D space |
.face-top |
deck.effects |
public | No declarations. | 3D space |
.fade-swap |
deck.motion |
public | Anything that goes display:none can still animate out. | Motion |
.field |
deck.components |
public | One form control and everything attached to it: label, input, help text, error. The vertical gap between them comes from here, so a field never needs margins. | Field |
.field-row |
deck.components |
public | Two fields side by side on anything wider than a phone | Field |
.field-row-cq |
deck.layout |
public | Form fields that pair up inside their own container, not the viewport. This is the one that keeps biting people: a two-up field row inside a narrow modal should stay stacked even on a desktop. | Field |
.fieldset |
deck.components |
public | A bordered group of controls that answer one question. Its legend is the group's accessible name, which is what a radio group needs and what a .label above one does not provide. | Fieldset |
.file |
deck.components |
public | A dashed drop zone wrapping a real file input. The input is 1px and transparent rather than display: none, so it keeps its place in the tab order, and :focus-within is what makes that focus visible. Deck styles the zone; dropping needs a handler of your own. | File |
.fixed |
deck.utilities |
public | Sets position. | Position |
.flash |
deck.motion |
public | Sets animation. | Motion |
.flash-good |
deck.motion |
public | Sets animation. | Motion |
.flat |
deck.effects |
public | Sets transform-style. | 3D space |
.flex |
deck.utilities |
public | Sets display. | Display and sizing |
.flex-col |
deck.utilities |
public | Sets flex-direction. | Display and sizing |
.flex-row |
deck.utilities |
public | Sets flex-direction. | Display and sizing |
.flip |
deck.effects |
public | Two faces, one footprint. Front and back are stacked in the same grid cell so the card is exactly as tall as its taller side. | 3D space |
.flip-back |
deck.effects |
public | No declarations. | 3D space |
.flip-front |
deck.effects |
public | No declarations. | 3D space |
.flip-hover |
deck.effects |
public | No declarations. | 3D space |
.flip-x |
deck.effects |
public | Sets transition. | 3D space |
.float |
deck.components |
public | Two things about the markup that this file cannot enforce and that fail silently when they are wrong: 1. The label must come AFTER the control. Every lift selector below is `~ label`, and the general sibling combinator only looks forward. Label first and it simply never moves. 2. The control needs placeholder=" " (one space). Without a placeholder attribute :placeholder-shown never matches, so the label sits lifted over an empty field. FINDINGS 61: .float.is-invalid only colours the label. .field.is-invalid in 06-forms.css also reddens the control's border; there is no equivalent rule here, so the same class name does two different amounts of work depending on which wrapper it is on. :user-invalid is unaffected -- it matches the control directly through the 06-forms.css rule. | Floating label |
.float-outline |
deck.components |
public | Outlined variant, where the label sits in a notch in the border | Floating label |
.footer |
deck.components |
public | A real component rather than the demo's ad-hoc one. | Footer |
.footer-bottom |
deck.components |
public | Sets display, flex-wrap, align-items, gap, and 3 more. | Footer |
.footer-brand |
deck.components |
public | Sets display, flex-direction, gap, max-inline-size. | Footer |
.footer-col |
deck.components |
public | Sets display, flex-direction, gap. | Footer |
.footer-grid |
deck.components |
public | Sets display, gap, grid-template-columns, padding-block-end. | Footer |
.footer-heading |
deck.components |
public | Sets font-size, font-weight, color, margin-block-end. | Footer |
.footer-social |
deck.components |
public | Sets display, gap, margin-inline-start. | Footer |
.form-actions |
deck.components |
public | Sticky save bar for long forms on mobile | Field |
.form-actions-sticky |
deck.components |
public | Pins the action row to the bottom of the viewport with a blur behind it and a safe-area inset for the home indicator. Add matching bottom padding to the form, or the last field sits underneath it. | Field |
.fw-bold |
deck.utilities |
public | Sets font-weight. | Typography |
.fw-medium |
deck.utilities |
public | Sets font-weight. | Typography |
.fw-normal |
deck.utilities |
public | Sets font-weight. | Typography |
.fw-semi |
deck.utilities |
public | Semibold. The weight for a label or a name that needs to lead without becoming a heading. | Typography |
.g-bad |
deck.effects |
public | Sets background-image, color. | Gradients |
.g-bar-fill |
deck.effects |
public | Sets background-image. | Gradients |
.g-border |
deck.effects |
public | Two backgrounds with different clip boxes. Works with any border-radius, unlike border-image, and leaves the inside a real surface color. | Gradients |
.g-border-soft |
deck.effects |
public | Sets background. | Gradients |
.g-border-spin |
deck.effects |
public | Sets animation. | Gradients |
.g-brand |
deck.effects |
public | Sets background-image, color. | Gradients |
.g-brand-soft |
deck.effects |
public | Sets background-image. | Gradients |
.g-conic |
deck.effects |
public | Sets background-image. | Gradients |
.g-dark |
deck.effects |
public | Sets background-image, color. | Gradients |
.g-dots |
deck.effects |
public | Sets background-image, background-size. | Gradients |
.g-fade-block |
deck.effects |
public | Sets mask-image, -webkit-mask-image. | Gradients |
.g-fade-end |
deck.effects |
public | Sets mask-image, -webkit-mask-image. | Gradients |
.g-fade-inline |
deck.effects |
public | Content that runs off the edge should fade, not be cut with a hard line. | Gradients |
.g-fade-more |
deck.effects |
public | Long text that is collapsed: fade the bottom instead of a hard cut | Gradients |
.g-good |
deck.effects |
public | Sets background-image, color. | Gradients |
.g-grid-lines |
deck.effects |
public | Not gradients as decoration — gradients standing in for an image. These cost nothing to download and retint automatically. | Gradients |
.g-hairline |
deck.effects |
public | A single glowing hairline along the top edge — good for a nav or a modal | Gradients |
.g-hatch |
deck.effects |
public | Hatching for a "pending" or "unavailable" block in a schedule | Gradients |
.g-mesh |
deck.effects |
public | Three soft radial blooms. No image, no SVG filter, no blur — blur on a large area is expensive and this reads the same. | Gradients |
.g-mesh-drift |
deck.effects |
public | Sets animation. | Gradients |
.g-mesh-subtle |
deck.effects |
public | Sets background-image, background-size, background-repeat. | Gradients |
.g-mesh-warm |
deck.effects |
public | Sets --hue-brand. | Gradients |
.g-ring |
deck.effects |
public | Sets border-radius, background, mask, -webkit-mask. | Gradients |
.g-ring-spin |
deck.effects |
public | Sets animation. | Gradients |
.g-scrim |
deck.effects |
public | A caption over a photo needs a legible floor. A flat 50% black overlay dulls the whole image; an eased scrim only darkens where the text sits. | Gradients |
.g-scrim-top |
deck.effects |
public | No declarations. | Gradients |
.g-sheen |
deck.effects |
public | A highlight that sweeps across on hover. --sheen is registered, so it animates as a real percentage instead of jumping. | Gradients |
.g-shimmer |
deck.effects |
public | Sets background-image, background-size, background-repeat. | Gradients |
.g-stripes |
deck.effects |
public | Sets background-image. | Gradients |
.g-sunken |
deck.effects |
public | Sets background-image. | Gradients |
.g-surface |
deck.effects |
public | Quiet. These sit behind content and must never fight it. | Gradients |
.g-text |
deck.effects |
public | background-clip on the text. Always keep a real color underneath so the text is still readable if the clip fails. | Gradients |
.g-text-shine |
deck.effects |
public | Sets color, background-image, background-size, -webkit-background-clip, and 2 more. | Gradients |
.g-warn |
deck.effects |
public | Sets background-image, color. | Gradients |
.gallery |
deck.components |
public | A simple gallery grid, when equal tiles are wanted instead | Gallery |
.gap-0 |
deck.utilities |
public | Sets gap. | Spacing |
.gap-1 |
deck.utilities |
public | Sets gap. | Spacing |
.gap-2 |
deck.utilities |
public | Sets gap. | Spacing |
.gap-3 |
deck.utilities |
public | Sets gap. | Spacing |
.gap-4 |
deck.utilities |
public | Sets gap. | Spacing |
.gap-6 |
deck.utilities |
public | Sets gap. | Spacing |
.gap-8 |
deck.utilities |
public | Sets gap. | Spacing |
.gap-cq |
deck.layout |
public | No declarations. | Spacing |
.grid |
deck.layout |
public | Auto-fitting grid: no breakpoints needed, it responds to its own width | Grid |
.grid-2 |
deck.layout |
public | Two-ish columns: an auto-fit grid with a 24rem floor. Identical in effect to .grid-wide, but it writes grid-template-columns directly rather than setting --min, so --min cannot adjust it afterwards. Prefer .grid-wide. | Grid |
.grid-fixed-2 |
deck.layout |
public | Exactly two equal columns at every width, including a phone. Only for a count that is part of the meaning — a 2x2 comparison. It does not reflow, so it does not satisfy the reflow criterion on its own. | Grid |
.grid-fixed-3 |
deck.layout |
public | Exactly three equal columns at every width. See .grid-fixed-2. | Grid |
.grid-fixed-4 |
deck.layout |
public | Exactly four equal columns at every width. On a phone that is four 70px columns; reach for .grid with a --min instead. | Grid |
.grid-tight |
deck.layout |
public | Narrows the auto-fit column floor to 12rem, so the grid packs more columns in before it wraps. | Grid |
.grid-wide |
deck.layout |
public | Widens the auto-fit column floor to 24rem, so the grid packs fewer, wider columns before it wraps. For cards with a paragraph in them. | Grid |
.grow |
deck.utilities |
public | Sets flex, min-inline-size. | Display and sizing |
.h-full |
deck.utilities |
public | Sets block-size. | Display and sizing |
.h1 |
deck.type |
public | Sets font-family, font-weight, line-height, letter-spacing, and 1 more. | Typography |
.h2 |
deck.type |
public | Sets font-family, font-weight, line-height, letter-spacing, and 1 more. | Typography |
.h3 |
deck.type |
public | Sets font-family, font-weight, line-height, letter-spacing, and 1 more. | Typography |
.h4 |
deck.type |
public | Sets font-family, font-weight, line-height, letter-spacing, and 1 more. | Typography |
.h5 |
deck.type |
public | Sets font-family, font-weight, line-height, letter-spacing, and 1 more. | Typography |
.h6 |
deck.type |
public | Sets font-family, font-weight, line-height, letter-spacing, and 1 more. | Typography |
.has-value |
deck.components |
public | No declarations. | Date picker |
.help |
deck.components |
public | A hint below a control. Needs aria-describedby on the control to reach a screen reader — sitting next to it is not an association. | Field |
.hidden |
deck.utilities |
public | Sets display. | Display and sizing |
.icon |
deck.mobile |
public | An SVG icon sized in em, so it scales with the text it sits beside and lands on the baseline. Icons are filled with currentColor and inherit the surrounding colour. | Icon |
.icon-fill |
deck.mobile |
public | Sets fill, stroke. | Icon |
.icon-follow |
deck.motion |
public | Sets transition. | Icon |
.icon-lg |
deck.mobile |
public | A 1.6em icon, for icon tiles and empty states where the default would look undersized. | Icon |
.icon-muted |
deck.mobile |
public | Sets color. | Icon |
.icon-sm |
deck.mobile |
public | Small icons reference the heavier cut of the sprite, not a thicker stroke: the symbols are filled outlines, so stroke-width does nothing to them. Every icon ships twice, #name at wght 400 and #name-sm at wght 500, and .icon-sm goes with the -sm symbol. CSS cannot rewrite a <use href>, so the pairing lives in the markup: <svg class="icon icon-sm"><use href="deck-icons.svg#check-sm"></use></svg> | Icon |
.icon-spin |
deck.mobile |
public | Sets animation. | Icon |
.icon-tile |
deck.mobile |
public | Icon in a tinted tile — for feature rows and empty states | Icon |
.icon-tile-bad |
deck.mobile |
public | Sets background, color. | Icon |
.icon-tile-good |
deck.mobile |
public | Sets background, color. | Icon |
.icon-tile-lg |
deck.mobile |
public | Sets inline-size, block-size, border-radius. | Icon |
.icon-tile-warn |
deck.mobile |
public | Sets background, color. | Icon |
.icon-xl |
deck.mobile |
public | Sets inline-size, block-size, stroke-width. | Icon |
.indicator |
deck.components |
public | Status dots, counts on an icon, and unread markers. | Indicator |
.indicator-bad |
deck.components |
public | Sets background. | Indicator |
.indicator-badge |
deck.components |
public | No declarations. | Indicator |
.indicator-badge-brand |
deck.components |
public | No declarations. | Indicator |
.indicator-badge-dot |
deck.components |
public | No declarations. | Indicator |
.indicator-brand |
deck.components |
public | Sets background. | Indicator |
.indicator-good |
deck.components |
public | Sets background. | Indicator |
.indicator-lg |
deck.components |
public | Sets inline-size, block-size. | Indicator |
.indicator-ring |
deck.components |
public | Sets box-shadow. | Indicator |
.indicator-warn |
deck.components |
public | Sets background. | Indicator |
.inline-block |
deck.utilities |
public | Sets display. | Display and sizing |
.inline-flex |
deck.utilities |
public | Sets display. | Display and sizing |
.input |
deck.components |
public | Marks a field invalid from your own validation, producing the same border and ring as :user-invalid without needing the browser to agree. One of the few states an author writes by hand. | Input |
.input-group |
deck.components |
public | A prefix, suffix or attached button joined to a control. The group takes over the border, radius and shadow, and the input inside strips its own, so the seam does not double up. :focus-within puts the ring around the whole assembly. | Input |
.inset-0 |
deck.utilities |
public | Sets inset. | Position |
.inset-be-0 |
deck.utilities |
public | Sets inset-block-end. | Position |
.inset-bs-0 |
deck.utilities |
public | Sets inset-block-start. | Position |
.inset-ie-0 |
deck.utilities |
public | Sets inset-inline-end. | Position |
.inset-is-0 |
deck.utilities |
public | Sets inset-inline-start. | Position |
.is-above |
deck.components |
internal | No declarations. | Combobox |
.is-active |
deck.components |
public | No declarations. | Combobox |
.is-animating |
deck.motion |
internal | No declarations. | Motion |
.is-behind-end |
deck.effects |
internal | No declarations. | 3D space |
.is-behind-start |
deck.effects |
internal | No declarations. | 3D space |
.is-blocked |
deck.components |
internal | No declarations. | Date picker |
.is-copied |
deck.components |
internal | No declarations. | Copy to clipboard |
.is-current |
deck.components |
public | No declarations. | Stepper |
.is-disabled |
deck.components |
public | No declarations. | Combobox |
.is-dismissed |
deck.effects |
internal | No declarations. | 3D space |
.is-done |
deck.components |
public | No declarations. | Timeline |
.is-down |
deck.motion |
internal | No declarations. | Motion |
.is-dragging |
deck.components |
internal | No declarations. | Toast |
.is-fanned |
deck.effects |
internal | No declarations. | 3D space |
.is-flipped |
deck.effects |
internal | No declarations. | 3D space |
.is-front |
deck.effects |
internal | No declarations. | 3D space |
.is-in-range |
deck.components |
internal | No declarations. | Date picker |
.is-invalid |
deck.components |
public | No declarations. | Floating label |
.is-leaving |
deck.components |
internal | No declarations. | Toast |
.is-lifted |
deck.components |
internal | No declarations. | List |
.is-loaded |
deck.components |
internal | No declarations. | Gallery |
.is-loading |
deck.reset |
public | No declarations. | Data grid |
.is-new |
deck.components |
internal | No declarations. | Data grid |
.is-open |
deck.components |
public | No declarations. | Icon |
.is-outside |
deck.components |
internal | No declarations. | Date picker |
.is-over |
deck.components |
internal | No declarations. | Editor |
.is-preview |
deck.components |
internal | No declarations. | Date picker |
.is-range-end |
deck.components |
internal | No declarations. | Date picker |
.is-range-start |
deck.components |
internal | No declarations. | Date picker |
.is-resizing |
deck.components |
internal | No declarations. | Data grid |
.is-revealed |
deck.motion |
internal | No declarations. | Motion |
.is-scrolled-end |
deck.components |
internal | No declarations. | Data grid |
.is-scrolled-x |
deck.components |
internal | No declarations. | Data grid |
.is-selected |
deck.components |
public | No declarations. | Date picker |
.is-tilting |
deck.effects |
internal | No declarations. | 3D space |
.is-today |
deck.components |
internal | No declarations. | Date picker |
.is-up |
deck.motion |
internal | No declarations. | Motion |
.is-valid |
deck.components |
public | No declarations. | Phone input |
.is-visible |
deck.components |
internal | No declarations. | 22-nav.css:506 |
.items-baseline |
deck.utilities |
public | Sets align-items. | Display and sizing |
.items-center |
deck.utilities |
public | Sets align-items. | Display and sizing |
.items-end |
deck.utilities |
public | Sets align-items. | Display and sizing |
.items-start |
deck.utilities |
public | Sets align-items. | Display and sizing |
.items-stretch |
deck.utilities |
public | Sets align-items. | Display and sizing |
.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 |
.justify-between |
deck.utilities |
public | Sets justify-content. | Display and sizing |
.justify-center |
deck.utilities |
public | Sets justify-content. | Display and sizing |
.justify-end |
deck.utilities |
public | Sets justify-content. | Display and sizing |
.justify-start |
deck.utilities |
public | Sets justify-content. | Display and sizing |
.kanban |
deck.components |
public | The obvious thing to build once you have drag and drop. An issue queue by status is the same shape as a board. | Kanban |
.kanban-body |
deck.components |
public | The scrolling card region, with a 5rem floor so an empty column is still something you can drop onto. | Kanban |
.kanban-card |
deck.components |
public | One card. .kanban-card-title is styling, not a heading — if the card opens something, make the title a link. | Kanban |
.kanban-card-meta |
deck.components |
public | Sets display, align-items, gap, font-size, and 1 more. | Kanban |
.kanban-card-title |
deck.components |
public | Sets font-size, font-weight. | Kanban |
.kanban-col |
deck.components |
public | One column: a fixed width with a viewport cap so a phone still shows a sliver of the next, capped in height by --kanban-height. | Kanban |
.kanban-count |
deck.components |
public | Sets margin-inline-start, font-size, font-weight, color, and 5 more. | Kanban |
.kanban-empty |
deck.components |
public | Shown in an empty column and hidden by :has(.kanban-card) as soon as one arrives, so nothing has to remember to toggle it. | Kanban |
.kanban-head |
deck.components |
public | The column title and count, outside the scrolling area so they stay visible while cards scroll. | Kanban |
.keep-together |
deck.print |
public | Sets break-inside, page-break-inside. | Printing |
.label |
deck.components |
public | The label for a control. A flex row, so a "required" or "optional" marker sits beside the text without extra markup. | Field |
.lazy |
deck.components |
public | A placeholder that holds the space so nothing shifts, and fades the image in once it decodes. Set the aspect ratio on the frame and the layout is stable before a byte arrives. | Gallery |
.lazy-block |
deck.components |
public | Generic content placeholder while a region streams in | Gallery |
.lazy-blur |
deck.components |
public | A blurred low-res preview underneath, if you have one | Gallery |
.lede |
deck.type |
public | Sets font-size, line-height, color, max-inline-size. | Typography |
.lg |
deck.utilities |
public | No declarations. | Display and sizing |
.lift |
deck.motion |
public | Sets transition. | Motion |
.link-quiet |
deck.type |
public | Sets color, text-decoration. | Typography |
.list |
deck.components |
public | A bordered, clipped column of rows. Use it when the reader reads one row at a time; if they compare values down a column, that is a table. | List |
.list-header |
deck.components |
public | A group heading inside a list. Styling only: a screen reader hears ordinary text, so if the grouping is meaningful use a real heading. | List |
.list-main |
deck.components |
public | No declarations. | List |
.list-row |
deck.components |
public | One row. min-block-size: var(--tap) puts every row at the touch target, and the colour and text-decoration resets mean the row can be an <a> directly — one element, one tab stop, the whole row clickable. | List |
.list-sub |
deck.components |
public | No declarations. | List |
.list-title |
deck.components |
public | No declarations. | List |
.list-trail |
deck.components |
public | No declarations. | List |
.list-virtual |
deck.components |
public | No declarations. | List |
.m-0 |
deck.utilities |
public | Sets margin. | Spacing |
.marquee |
deck.motion |
public | For a status strip: recalls, open campaigns, parts on backorder. | Motion |
.marquee-track |
deck.motion |
public | Sets display, gap, flex, padding-inline-end, and 2 more. | Motion |
.masonry |
deck.components |
public | Two implementations. Columns is universal and good for photos where the reading order down each column is fine. Grid masonry is the real thing and preserves row order; it is used automatically where supported. | Gallery |
.masonry-2 |
deck.components |
public | Sets --cols. | Gallery |
.masonry-3 |
deck.components |
public | Sets --cols. | Gallery |
.max-w-lg |
deck.utilities |
public | Sets max-inline-size. | Display and sizing |
.max-w-md |
deck.utilities |
public | Sets max-inline-size. | Display and sizing |
.max-w-prose |
deck.utilities |
public | Sets max-inline-size. | Display and sizing |
.max-w-sm |
deck.utilities |
public | Sets max-inline-size. | Display and sizing |
.mb-0 |
deck.utilities |
public | Sets margin-block-end. | Spacing |
.mb-1 |
deck.utilities |
public | Sets margin-block-end. | Spacing |
.mb-2 |
deck.utilities |
public | Sets margin-block-end. | Spacing |
.mb-3 |
deck.utilities |
public | Sets margin-block-end. | Spacing |
.mb-4 |
deck.utilities |
public | Sets margin-block-end. | Spacing |
.mb-6 |
deck.utilities |
public | Sets margin-block-end. | Spacing |
.mb-8 |
deck.utilities |
public | Sets margin-block-end. | Spacing |
.md |
deck.utilities |
public | No declarations. | Display and sizing |
.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 |
.menu |
deck.components |
public | A dropdown built on the native popover attribute: light dismiss, Escape, the top layer and one-at-a-time behaviour all come from the platform. 25-anchor.css positions it against its trigger with anchor positioning and a fallback chain, so it flips when there is no room below. | Menu |
.menu-item |
deck.components |
public | One row in a menu. Works on a button or an anchor — colour and text-decoration are reset so a link needs no help. Hover and focus share a style, so a keyboard user sees what a mouse user sees. 40px tall, which is under the 44px target: a deliberate density trade for a list of eight. | Menu |
.menu-item-danger |
deck.components |
public | A destructive item. Red is not announced, so the label has to say what it does and a confirmation should stand behind it. | Menu |
.menu-label |
deck.components |
public | A small heading above a group of items. Styling only — a screen reader hears ordinary text. | Menu |
.menu-match |
deck.components |
public | A dropdown that should match the width of the field it belongs to | Menu |
.menu-sep |
deck.components |
public | A one-pixel divider between groups of items. | Menu |
.metarow |
deck.layout |
public | List rows that reveal their metadata as space allows | Display and sizing |
.mie-0 |
deck.utilities |
public | Sets margin-inline-end. | Spacing |
.mie-1 |
deck.utilities |
public | Sets margin-inline-end. | Spacing |
.mie-2 |
deck.utilities |
public | Sets margin-inline-end. | Spacing |
.mie-3 |
deck.utilities |
public | Sets margin-inline-end. | Spacing |
.mie-4 |
deck.utilities |
public | Sets margin-inline-end. | Spacing |
.mie-6 |
deck.utilities |
public | Sets margin-inline-end. | Spacing |
.mie-8 |
deck.utilities |
public | Sets margin-inline-end. | Spacing |
.mie-auto |
deck.utilities |
public | Sets margin-inline-end. | Spacing |
.min-h-screen |
deck.utilities |
public | Sets min-block-size. | Display and sizing |
.min-is-0 |
deck.utilities |
public | Sets min-inline-size. | Display and sizing |
.mirror-rtl |
deck.rtl |
public | No declarations. | Display and sizing |
.mis-0 |
deck.utilities |
public | Same seven steps as every other spacing family: 0 1 2 3 4 6 8. | Spacing |
.mis-1 |
deck.utilities |
public | Sets margin-inline-start. | Spacing |
.mis-2 |
deck.utilities |
public | Sets margin-inline-start. | Spacing |
.mis-3 |
deck.utilities |
public | Sets margin-inline-start. | Spacing |
.mis-4 |
deck.utilities |
public | Sets margin-inline-start. | Spacing |
.mis-6 |
deck.utilities |
public | Sets margin-inline-start. | Spacing |
.mis-8 |
deck.utilities |
public | Sets margin-inline-start. | Spacing |
.mis-auto |
deck.utilities |
public | The short physical-looking names in the utility layer (.mt-4, .px-3) are already logical underneath — .mt-4 sets margin-block-start. These are the explicitly named versions for when the distinction matters in review. | Spacing |
.modal |
deck.components |
public | A native <dialog>. Open it with showModal(), never show() and never the open attribute: only showModal() gives the top layer, the backdrop, the focus trap and an inert background. The open and close animate because display and overlay are in the transition with allow-discrete, which is what keeps the element rendered long enough to fade out. | Modal |
.modal-body |
deck.components |
public | The scrolling region. The modal caps at min(85dvh, 48rem) and clips, so a long body scrolls while the header and footer stay put — which is what keeps the actions above the fold. | Modal |
.modal-footer |
deck.components |
public | The action row, end-aligned. Below 32rem it becomes column-reverse with full-width buttons, so the primary action — last in the markup — is on top where a thumb reaches it, without changing DOM order. | Modal |
.modal-header |
deck.components |
public | The title row. A flex row aligned to flex-start, so a long title and a close button line up on the first line. | Modal |
.modal-title |
deck.components |
public | The dialog's heading. Give it an id and point aria-labelledby at it, or the dialog is announced with no name. | Modal |
.mono |
deck.utilities |
public | Sets font-family. | Typography |
.mouse-only |
deck.utilities |
public | Sets display. | Display and sizing |
.msg |
deck.components |
public | One message row. .msg-out flips it to the other edge and reverses the row so the avatar swaps sides. The incoming/outgoing distinction is position and colour only, so name the sender in text for anyone not seeing it. | Chat |
.msg-out |
deck.components |
public | Sets align-self, flex-direction. | Chat |
.mt-0 |
deck.utilities |
public | Sets margin-block-start. | Spacing |
.mt-1 |
deck.utilities |
public | Sets margin-block-start. | Spacing |
.mt-2 |
deck.utilities |
public | Sets margin-block-start. | Spacing |
.mt-3 |
deck.utilities |
public | Sets margin-block-start. | Spacing |
.mt-4 |
deck.utilities |
public | Sets margin-block-start. | Spacing |
.mt-6 |
deck.utilities |
public | Sets margin-block-start. | Spacing |
.mt-8 |
deck.utilities |
public | Sets margin-block-start. | Spacing |
.mx-auto |
deck.utilities |
public | Sets margin-inline. | Spacing |
.nav-link |
deck.components |
public | One destination in a .navbar. Carries the hover and current-page states; use .btn only for actions, never for navigation. | Nav bar |
.navbar |
deck.components |
public | Sets display, align-items, gap, min-block-size, and 2 more. | Nav bar |
.navbar-brand |
deck.components |
public | Sets display, align-items, gap, font-weight, and 4 more. | Nav bar |
.navbar-links |
deck.components |
public | Sets display, gap, align-items. | Nav bar |
.no-flip |
deck.rtl |
public | No declarations. | Display and sizing |
.no-motion |
deck.motion |
public | Sets transition, animation. | Motion |
.no-print |
deck.utilities |
public | Sets display. | Printing |
.no-print-url |
deck.print |
public | No declarations. | Printing |
.no-select |
deck.utilities |
public | Sets user-select. | Display and sizing |
.no-underline |
deck.utilities |
public | Sets text-decoration. | Typography |
.nowrap |
deck.utilities |
public | Sets flex-wrap, white-space. | Display and sizing |
.nudge |
deck.motion |
public | Sets animation. | Motion |
.num |
deck.components |
public | No declarations. | 07-components.css:262 |
.number |
deck.components |
public | Native spinners are tiny and inconsistent across browsers. These are real buttons that clear the touch target. | Number input |
.number-sm |
deck.components |
public | Sets --number-width. | Number input |
.number-unit |
deck.components |
public | Sets display, place-items, padding-inline, background, and 4 more. | Number input |
.nums |
deck.utilities |
public | Tabular figures, so numbers line up in a column and do not jitter when they change. | Typography |
.opacity-60 |
deck.utilities |
public | Sets opacity. | Display and sizing |
.optional |
deck.components |
public | No declarations. | Field |
.overflow-auto |
deck.utilities |
public | Sets overflow. | Display and sizing |
.overflow-clip |
deck.utilities |
public | Sets overflow. | Display and sizing |
.overflow-hidden |
deck.utilities |
public | Sets overflow. | Display and sizing |
.p-0 |
deck.utilities |
public | The scale is 0 1 2 3 4 6 8, declared in 04-layout.css. Every family below implements all seven, so a step that exists anywhere exists everywhere. | Spacing |
.p-1 |
deck.utilities |
public | Sets padding. | Spacing |
.p-2 |
deck.utilities |
public | Sets padding. | Spacing |
.p-3 |
deck.utilities |
public | Sets padding. | Spacing |
.p-4 |
deck.utilities |
public | Sets padding. | Spacing |
.p-6 |
deck.utilities |
public | Sets padding. | Spacing |
.p-8 |
deck.utilities |
public | Sets padding. | Spacing |
.pad-cq |
deck.layout |
public | No declarations. | Spacing |
.page-break |
deck.print |
public | Sets break-before, page-break-before. | Printing |
.page-break-after |
deck.print |
public | Sets break-after, page-break-after. | Printing |
.pagination |
deck.components |
public | Sets display, gap, align-items, flex-wrap. | Pagination |
.panel |
deck.components |
public | Sets background, border-block, padding, margin-inline. | 07-components.css:63 |
.parallax |
deck.effects |
public | True 3D parallax: layers sit at different Z depths inside a perspective container, so the browser does the math on the compositor. No scroll handler, no jank. | 3D space |
.parallax-back |
deck.effects |
public | Sets transform. | 3D space |
.parallax-front |
deck.effects |
public | Sets transform. | 3D space |
.parallax-layer |
deck.effects |
public | Sets position, inset, transform-origin. | 3D space |
.parallax-mid |
deck.effects |
public | Sets transform. | 3D space |
.pbe-0 |
deck.utilities |
public | Sets padding-block-end. | Spacing |
.pbe-1 |
deck.utilities |
public | Sets padding-block-end. | Spacing |
.pbe-2 |
deck.utilities |
public | Sets padding-block-end. | Spacing |
.pbe-3 |
deck.utilities |
public | Sets padding-block-end. | Spacing |
.pbe-4 |
deck.utilities |
public | Sets padding-block-end. | Spacing |
.pbe-6 |
deck.utilities |
public | Sets padding-block-end. | Spacing |
.pbe-8 |
deck.utilities |
public | Sets padding-block-end. | Spacing |
.pbs-0 |
deck.utilities |
public | Sets padding-block-start. | Spacing |
.pbs-1 |
deck.utilities |
public | Sets padding-block-start. | Spacing |
.pbs-2 |
deck.utilities |
public | Sets padding-block-start. | Spacing |
.pbs-3 |
deck.utilities |
public | Sets padding-block-start. | Spacing |
.pbs-4 |
deck.utilities |
public | Sets padding-block-start. | Spacing |
.pbs-6 |
deck.utilities |
public | Sets padding-block-start. | Spacing |
.pbs-8 |
deck.utilities |
public | Sets padding-block-start. | Spacing |
.phone |
deck.components |
public | Country select welded to the number. The number stays LTR even in an RTL document, because a phone number always reads left to right. | Phone input |
.phone-code |
deck.components |
public | Sets font-variant-numeric, color, font-weight. | Phone input |
.phone-country |
deck.components |
public | No declarations. | Phone input |
.phone-flag |
deck.components |
public | Sets font-size, line-height. | Phone input |
.phone-status |
deck.components |
public | Sets display, place-items, padding-inline, flex. | Phone input |
.pie-0 |
deck.utilities |
public | Sets padding-inline-end. | Spacing |
.pie-1 |
deck.utilities |
public | Sets padding-inline-end. | Spacing |
.pie-2 |
deck.utilities |
public | Sets padding-inline-end. | Spacing |
.pie-3 |
deck.utilities |
public | Sets padding-inline-end. | Spacing |
.pie-4 |
deck.utilities |
public | Sets padding-inline-end. | Spacing |
.pie-6 |
deck.utilities |
public | Sets padding-inline-end. | Spacing |
.pie-8 |
deck.utilities |
public | Sets padding-inline-end. | Spacing |
.pile |
deck.effects |
public | Sets display, transform-style, perspective. | 3D space |
.ping |
deck.motion |
public | Ping ring for a live indicator — a dot with a halo going out | Motion |
.pis-0 |
deck.utilities |
public | Sets padding-inline-start. | Spacing |
.pis-1 |
deck.utilities |
public | Sets padding-inline-start. | Spacing |
.pis-2 |
deck.utilities |
public | Sets padding-inline-start. | Spacing |
.pis-3 |
deck.utilities |
public | Sets padding-inline-start. | Spacing |
.pis-4 |
deck.utilities |
public | Sets padding-inline-start. | Spacing |
.pis-6 |
deck.utilities |
public | Sets padding-inline-start. | Spacing |
.pis-8 |
deck.utilities |
public | Sets padding-inline-start. | Spacing |
.place-center |
deck.utilities |
public | Sets place-items. | Display and sizing |
.pointer-none |
deck.utilities |
public | Sets pointer-events. | Display and sizing |
.pop |
deck.components |
public | A richer tooltip: a heading, body copy, and actions. Used for the "what does this labor code mean" pattern. | Popover |
.pop-actions |
deck.components |
public | The action row at the bottom of a popover card. A button here can close the panel with popovertargetaction="hide" and no script. | Popover |
.pop-body |
deck.components |
public | The explanatory text inside a popover card. | Popover |
.pop-title |
deck.components |
public | The heading inside a popover card. | Popover |
.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 |
.press |
deck.motion |
public | Sets transition. | Motion |
.print-footer |
deck.print |
public | Sets position, inset-block-end, inset-inline, font-size, and 1 more. | Printing |
.print-header |
deck.print |
public | Repeat a header on every page of a long report | Printing |
.print-keep |
deck.print |
public | No declarations. | Printing |
.print-only |
deck.print |
public | Hidden on screen, shown on paper | Printing |
.progress |
deck.components |
public | Three ways to say "something is happening", and the choice is only ever about one thing: whether you know how much is left. .progress and .ring do, .spinner does not. There is no standalone meter -- a bar drawn from a value rather than from an element is .chart-meter, in 14-charts.css. .progress goes on a real <progress>, so the element carries the value, the maximum and the role. The two vendor pseudo-elements have to be written as separate rules: a vendor pseudo-element in a shared selector invalidates the whole rule for the other engine. Same constraint as .range. | Progress |
.prose |
deck.type |
public | Prose: for anything that came out of a WYSIWYG or markdown | Typography |
.pulse |
deck.motion |
public | Sets animation. | Motion |
.push |
deck.utilities |
public | Pushes this element and everything after it to the far end of a flex row. The one-class replacement for a spacer div. | Bar |
.px-0 |
deck.utilities |
public | Sets padding-inline. | Spacing |
.px-1 |
deck.utilities |
public | Sets padding-inline. | Spacing |
.px-2 |
deck.utilities |
public | Sets padding-inline. | Spacing |
.px-3 |
deck.utilities |
public | Sets padding-inline. | Spacing |
.px-4 |
deck.utilities |
public | Sets padding-inline. | Spacing |
.px-6 |
deck.utilities |
public | Sets padding-inline. | Spacing |
.px-8 |
deck.utilities |
public | Sets padding-inline. | Spacing |
.py-0 |
deck.utilities |
public | Sets padding-block. | Spacing |
.py-1 |
deck.utilities |
public | Sets padding-block. | Spacing |
.py-2 |
deck.utilities |
public | Sets padding-block. | Spacing |
.py-3 |
deck.utilities |
public | Sets padding-block. | Spacing |
.py-4 |
deck.utilities |
public | Sets padding-block. | Spacing |
.py-6 |
deck.utilities |
public | Sets padding-block. | Spacing |
.py-8 |
deck.utilities |
public | Sets padding-block. | Spacing |
.qr |
deck.components |
public | deck.js renders the modules into this frame. Kept square, with a quiet zone, so it stays scannable at any size. | QR code |
.qr-caption |
deck.components |
internal | Sets margin-block-start, font-size, color, text-align, and 2 more. | QR code |
.qr-lg |
deck.components |
internal | Sets --qr-size. | QR code |
.qr-logo |
deck.components |
internal | A logo punched out of the middle. Only safe at error correction Q or H. | QR code |
.qr-logo-mark |
deck.components |
internal | No declarations. | QR code |
.qr-sm |
deck.components |
internal | Sets --qr-size. | QR code |
.r-end |
deck.utilities |
public | Sets border-start-end-radius, border-end-end-radius. | Colour and surface |
.r-full |
deck.utilities |
public | Sets border-radius. | Colour and surface |
.r-lg |
deck.utilities |
public | Sets border-radius. | Colour and surface |
.r-md |
deck.utilities |
public | Sets border-radius. | Colour and surface |
.r-sm |
deck.utilities |
public | Sets border-radius. | Colour and surface |
.r-start |
deck.utilities |
public | Radius on the leading and trailing edges, not left and right | Colour and surface |
.r-xs |
deck.utilities |
public | Sets border-radius. | Colour and surface |
.range |
deck.components |
public | A slider. The track and thumb are vendor pseudo-elements with different names and different box models per engine, so every declaration is written twice — WebKit needs a negative block-start margin to centre the thumb and Firefox does not. | Range |
.range-pair |
deck.components |
public | Two stacked native range inputs. Real inputs mean real keyboard support and a real form post; the track between them is drawn from --lo and --hi. | Range |
.range-readout |
deck.components |
public | The current value of a slider. Put it on an <output>, which is an implicit live region, so the value is announced as the slider moves. | Range |
.range-ticks |
deck.components |
public | Ticks under a single or paired range | Range |
.rating |
deck.components |
public | The inputs are written HIGHEST value first -- 5, 4, 3, 2, 1 -- and row-reverse draws them 1 to 5. That is not a quirk, it is the whole mechanism: to light a star and everything below it, the selector has to reach forward from the chosen one, and CSS has no previous-sibling combinator. Reversing the row turns "everything below" into "everything after". Get the order wrong and it fails recognisably: the stars fill from the wrong end and the posted value is the mirror of the one clicked. :focus-visible + label uses the ADJACENT sibling, so each label must come immediately after its own input. | Rating |
.rating-fill |
deck.components |
public | No declarations. | Rating |
.rating-lg |
deck.components |
public | Sets --star. | Rating |
.rating-sm |
deck.components |
public | Sets --star. | Rating |
.rating-static |
deck.components |
public | Read-only display: a fill percentage rather than whole stars | Rating |
.ratio-16x9 |
deck.layout |
public | Aspect boxes for media | Display and sizing |
.ratio-1x1 |
deck.layout |
public | Sets aspect-ratio, object-fit, inline-size. | Display and sizing |
.ratio-4x3 |
deck.layout |
public | Sets aspect-ratio, object-fit, inline-size. | Display and sizing |
.reaction |
deck.mobile |
public | Reaction pill, like a Slack or Teams reaction | 08-mobile.css:230 |
.relative |
deck.utilities |
public | Sets position. | Position |
.reorder |
deck.components |
internal | No declarations. | 26-perf.css:222 |
.required |
deck.components |
public | No declarations. | Field |
.reveal |
deck.motion |
public | Sets animation, animation-timeline, animation-range. | Motion |
.reveal-fade |
deck.motion |
public | Sets animation-name. | Motion |
.reveal-late |
deck.motion |
public | Sets animation-range. | Motion |
.reveal-pop |
deck.motion |
public | Sets animation-name. | Motion |
.ring |
deck.components |
public | A conic gradient for the fill, a radial mask for the hole. Three custom properties shape it: --value, --size, --thickness. The mask is the thing to understand. It applies to this element AND its whole subtree, so a label centred inside a .ring is punched out along with the middle -- it renders, it takes up space, it is in the accessibility tree, and it is invisible. That is what .ring-wrap and .ring-label below exist for: an unmasked wrapper that stacks the label over the ring as a sibling rather than a child. FINDINGS 60: place-items and the three font declarations here are the fossil of the approach that does not work. They style a child nobody can see -- .ring-label repeats all three on the sibling, which is the tell. Due for removal; kept for now because the API is frozen. | Progress |
.ring-label |
deck.components |
public | No declarations. | Progress |
.ring-wrap |
deck.components |
public | Sets position, display, place-items. | Progress |
.ripple |
deck.motion |
public | Ripple. deck.js sets --rx/--ry from the pointer position. | Motion |
.ripple-ink |
deck.motion |
public | No declarations. | Motion |
.row-meta |
deck.layout |
public | No declarations. | Display and sizing |
.row-meta-wide |
deck.layout |
public | No declarations. | Display and sizing |
.s-bad |
deck.components |
public | Sets --series. | Charts |
.s-good |
deck.components |
public | Sets --series. | Charts |
.s-muted |
deck.components |
public | Sets --series. | Charts |
.s-warn |
deck.components |
public | Sets --series. | Charts |
.s1 |
deck.components |
public | Series 1. Every chart mark reads --series, so a colour is set once on the element and the fill, stroke and legend swatch all follow. | Charts |
.s2 |
deck.components |
public | Sets --series. | Charts |
.s3 |
deck.components |
public | Sets --series. | Charts |
.s4 |
deck.components |
public | Sets --series. | Charts |
.s5 |
deck.components |
public | Sets --series. | Charts |
.s6 |
deck.components |
public | Sets --series. | Charts |
.safe-bottom |
deck.mobile |
public | Sets padding-block-end. | Spacing |
.safe-top |
deck.mobile |
public | Sets padding-block-start. | Spacing |
.safe-x |
deck.mobile |
public | Sets padding-inline. | Spacing |
.scene |
deck.effects |
public | A scene establishes the vanishing point. Children need preserve-3d to stay in the same space instead of being flattened. | 3D space |
.scene-far |
deck.effects |
public | Sets --perspective. | 3D space |
.scene-near |
deck.effects |
public | Sets --perspective. | 3D space |
.scroll-progress |
deck.motion |
public | A progress bar that fills as the page scrolls — good for long reports | Motion |
.scroller |
deck.layout |
public | Everything stays on one line and scrolls sideways — cards, chips, dates | Scroller |
.search |
deck.components |
public | A control with an icon inside its starting edge. The icon is pointer-events: none, so clicking it focuses the field underneath rather than doing nothing. | Input |
.section |
deck.layout |
public | Vertical page rhythm: a block of --space-section, which is a clamp that grows with the viewport. For spacing inside a component reach for .stack instead. | Section |
.segmented |
deck.components |
public | A one-of-N control: equal-width children in a sunken track with the selected one raised. Styled from [aria-selected="true"] or .is-active. Built from radio inputs it needs no JavaScript and gets arrow keys free — but Deck does not style :has(:checked), so that version needs one rule of your own. | Segmented |
.select |
deck.components |
public | Marks a field invalid from your own validation, producing the same border and ring as :user-invalid without needing the browser to agree. One of the few states an author writes by hand. | Select |
.shadow-0 |
deck.utilities |
public | Sets box-shadow. | Colour and surface |
.shadow-1 |
deck.utilities |
public | Sets box-shadow. | Colour and surface |
.shadow-2 |
deck.utilities |
public | Sets box-shadow. | Colour and surface |
.shadow-3 |
deck.utilities |
public | Sets box-shadow. | Colour and surface |
.shadow-4 |
deck.utilities |
public | Sets box-shadow. | Colour and surface |
.shake |
deck.motion |
public | Sets animation. | Motion |
.sheet |
deck.mobile |
public | <dialog class="sheet"> on a phone, a centred modal from 40rem up. | Sheet |
.sheet-body |
deck.mobile |
public | The scrolling region. Pads for the home indicator, and contains its overscroll so reaching the end does not scroll the page behind. | Sheet |
.sheet-grip |
deck.mobile |
public | The drag handle at the top of a bottom sheet. Deck draws it and does not implement the drag — swiping down does nothing — so always ship a real close button as well. | Sheet |
.sheet-header |
deck.mobile |
public | The title row of a sheet. | Sheet |
.sheet-title |
deck.mobile |
public | The sheet's heading. Point aria-labelledby at it. | Sheet |
.shrink-0 |
deck.utilities |
public | Sets flex. | Display and sizing |
.shrink-on-scroll |
deck.motion |
public | Sticky header that condenses once you scroll past the top | Motion |
.sidebar |
deck.components |
public | Sets display, flex-direction, gap, padding. | Sidebar |
.sidebar-group |
deck.components |
public | Sets font-size, font-weight, color, padding. | Sidebar |
.sidebar-link |
deck.components |
public | Sets display, align-items, gap, min-block-size, and 7 more. | Sidebar |
.skeleton |
deck.components |
public | Sets background, background-size, animation, border-radius, and 3 more. | Skeleton |
.skeleton-circle |
deck.components |
public | Sets border-radius. | Skeleton |
.skeleton-text |
deck.components |
public | Sets block-size, margin-block. | Skeleton |
.skip-link |
deck.utilities |
public | Sets position, inset-block-start, inset-inline-start, z-index, and 4 more. | Display and sizing |
.sm |
deck.utilities |
public | No declarations. | Display and sizing |
.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 |
.space |
deck.effects |
public | Sets transform-style. | 3D space |
.span-2 |
deck.components |
public | No declarations. | Gallery |
.span-wide |
deck.components |
public | No declarations. | Gallery |
.sparkline |
deck.components |
public | A tiny inline chart for a table cell or a stat block. | Charts |
.sparkline-bad |
deck.components |
public | No declarations. | Charts |
.sparkline-good |
deck.components |
public | No declarations. | Charts |
.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 |
.spinner |
deck.components |
public | Exempt from the reduced-motion reset in 02-reset.css: instead of freezing it slows to 2.4s. A frozen spinner reads as a hung page, which is worse for everyone than a slow one. Note border-block-start-color rather than border-top-color -- the lit segment starts at the block start in any writing mode. | Progress |
.spinner-lg |
deck.components |
public | Sets inline-size, block-size, border-width. | Progress |
.split |
deck.layout |
public | Content + rail. Collapses to one column below the width it needs. | Split |
.split-rail-start |
deck.layout |
public | Puts the rail on the starting edge without touching markup order, so the main column stays first for a screen reader and for the keyboard. Use it for supplementary navigation; not for a rail holding the first thing a reader needs. | Split |
.square |
deck.utilities |
public | Sets aspect-ratio. | Display and sizing |
.sr-only |
deck.utilities |
public | Sets position, inline-size, block-size, padding, and 5 more. | Display and sizing |
.stack |
deck.layout |
public | Vertical rhythm without margin collapse surprises | Stack |
.stack-0 |
deck.layout |
public | No gap. For two elements that must touch. | Stack |
.stack-1 |
deck.layout |
public | A hairline. A label and the control it names, when the two read as one thing. | Stack |
.stack-2 |
deck.layout |
public | Tight vertical rhythm, for a label and its control or a title and its subtitle. | Stack |
.stack-3 |
deck.layout |
public | The default rhythm for related blocks inside a card or a section. | Stack |
.stack-4 |
deck.layout |
public | The default, named. Same as .stack with no step class. | Stack |
.stack-6 |
deck.layout |
public | Loose vertical rhythm, for separating whole sections of a page. | Stack |
.stack-8 |
deck.layout |
public | Very loose, for whole sections of a page where .section is too much. | Stack |
.stagger |
deck.motion |
public | Past twelve everything holds the last step rather than snapping back to zero. Without sibling-index() that is as far as CSS can count. .pile in 21-space3d.css has the same fallback and is MISSING this line, so its ninth card stacks on top of the first. | Motion |
.stagger-fast |
deck.motion |
public | Sets --stagger-step. | Motion |
.stagger-slow |
deck.motion |
public | Sets --stagger-step. | Motion |
.stat |
deck.components |
public | Sets display, flex-direction, gap. | 07-components.css:767 |
.stat-cq |
deck.layout |
public | A stat block that stacks tight, then spreads, then goes inline | Display and sizing |
.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 |
.step |
deck.components |
public | Sets flex, min-inline-size, display, flex-direction, and 3 more. | Stepper |
.step-label |
deck.components |
public | Sets font-size, font-weight, color. | Stepper |
.step-marker |
deck.components |
public | Sets display, align-items, gap. | Stepper |
.step-note |
deck.components |
public | Sets font-size, color. | Stepper |
.stepper |
deck.components |
public | A wizard. The timeline in 07 records what happened; this one shows where you are in a process you are actively moving through. | Stepper |
.stepper-auto |
deck.components |
public | Horizontal where there is room, vertical below a breakpoint. Prefer this over .stepper-vertical: four steps with notes do not fit across a phone, and a horizontal stepper that squashes is unreadable. | Stepper |
.stepper-vertical |
deck.components |
public | Vertical on a phone, where five steps side by side never fits | Stepper |
.sticky |
deck.utilities |
public | Sets position. | Position |
.sticky-top |
deck.layout |
public | A sticky header. Where scroll-state container queries are supported the blur and shadow live on an ::after that is transparent until the header actually sticks, so in flow it looks like part of the page. The treatment rides on a pseudo-element because a scroll-state container can style its descendants but not itself. | Container |
.stretch |
deck.components |
public | No declarations. | 07-components.css:50 |
.sweep |
deck.motion |
public | Underline that draws in from the start edge | Motion |
.switch |
deck.components |
public | An on/off control that takes effect immediately, drawn over a real checkbox. If the reader has to press Save afterwards, use .check instead. Add role="switch" when "on"/"off" reads better than "checked"/"unchecked". | Switch |
.tab |
deck.components |
public | One trigger. Styled from [aria-selected="true"], so the visual state and the accessible state are the same attribute and cannot disagree. The unselected state carries the same transparent border, so selecting one changes a colour and never moves anything. | Tabs |
.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 |
.table |
deck.components |
public | A real table, kept a table at every width, because values in a column are only comparable while the columns exist. | Table |
.table-compact |
deck.components |
public | Tighter cell padding, for a table the reader scans rather than reads. | Table |
.table-stack |
deck.components |
public | Below 40rem, restacks each row into labelled lines, taking the label from data-label on the cell. Every cell needs one. The thead is clipped rather than removed, so header association survives; print undoes the whole thing, because paper is never narrow. | Table |
.table-wrap |
deck.components |
public | The scroll container for a table, and not optional. It carries the border, radius, background and overflow-x, without which a wide table pushes the whole page sideways. Add tabindex="0" when the table overflows, or a keyboard user cannot scroll it. | Table |
.tabs |
deck.components |
public | The strip. Scrolls sideways rather than wrapping, because tabs that wrap stop reading as a strip. Deck styles the tabs and ships no keyboard behaviour: if you use role="tablist" you must add the roving tabindex and the arrow keys yourself, or the role promises what the page does not do. | Tabs |
.text-2xl |
deck.utilities |
public | Sets font-size. | Typography |
.text-2xs |
deck.utilities |
public | Sets font-size. | Typography |
.text-bad |
deck.utilities |
public | Sets color. | Colour and surface |
.text-base |
deck.utilities |
public | Sets font-size. | Typography |
.text-brand |
deck.utilities |
public | Sets color. | Colour and surface |
.text-center |
deck.utilities |
public | Sets text-align. | Typography |
.text-cq |
deck.layout |
public | No declarations. | Typography |
.text-end |
deck.utilities |
public | Sets text-align. | Typography |
.text-faint |
deck.utilities |
public | Sets color. | Colour and surface |
.text-good |
deck.utilities |
public | Sets color. | Colour and surface |
.text-inherit |
deck.utilities |
public | Sets color. | Colour and surface |
.text-lg |
deck.utilities |
public | Sets font-size. | Typography |
.text-md |
deck.utilities |
public | Sets font-size. | Typography |
.text-muted |
deck.utilities |
public | Secondary text colour. Still meets contrast against every surface Deck defines, so it is safe for body copy rather than decoration only. | Colour and surface |
.text-sm |
deck.utilities |
public | One step down the type scale, for secondary text and dense rows. | Typography |
.text-start |
deck.utilities |
public | Sets text-align. | Typography |
.text-warn |
deck.utilities |
public | Sets color. | Colour and surface |
.text-xl |
deck.utilities |
public | Sets font-size. | Typography |
.text-xs |
deck.utilities |
public | Sets font-size. | Typography |
.textarea |
deck.components |
public | Grows with its content instead of scrolling in a 4-row box | Textarea |
.th-vertical |
deck.utilities |
public | A rotated column header that still measures and aligns correctly | Typography |
.theme-dock |
deck.print |
internal | Sets display. | 99-print.css:61 |
.tick |
deck.motion |
public | Sets transition. | Motion |
.tilt |
deck.effects |
public | deck.js writes --tilt-x and --tilt-y from the pointer position. Both are registered angles, so they interpolate smoothly back to rest. | 3D space |
.tilt-lift |
deck.effects |
public | No declarations. | 3D space |
.tilt-lift-sm |
deck.effects |
public | No declarations. | 3D space |
.timeline |
deck.components |
public | Sets display, flex-direction. | Timeline |
.timeline-dot |
deck.components |
public | Sets inline-size, block-size, border-radius, background, and 4 more. | Timeline |
.timeline-item |
deck.components |
public | Sets display, grid-template-columns, gap, padding-block-end, and 1 more. | Timeline |
.tip |
deck.components |
public | The ::after tooltip could never flip. This one can, and it can carry a real arrow that stays pointed at the anchor. | Tooltip |
.tip-arrow |
deck.components |
public | The arrow on a .tip. background: inherit takes the tip's colour, and justify-self: anchor-center keeps it pointed at the trigger whichever way the tip has flipped. | Tooltip |
.toast |
deck.components |
public | One notification. The accent colour is a single custom property, --toast-accent, which paints the edge, the icon and the timer together, so a kind is one declaration. Built by Deck.toast() rather than written by hand; touch-action: pan-y lets a horizontal swipe dismiss it while a vertical drag still scrolls the page. | Toast |
.toast-action |
deck.components |
internal | Sets font-size, font-weight, color, cursor, and 1 more. | Toast |
.toast-actions |
deck.components |
internal | Sets display, gap, margin-block-start. | Toast |
.toast-bad |
deck.components |
internal | Sets --toast-accent. | Toast |
.toast-close |
deck.components |
internal | Sets flex, inline-size, block-size, display, and 6 more. | Toast |
.toast-good |
deck.components |
internal | Sets --toast-accent. | Toast |
.toast-icon |
deck.components |
internal | The leading glyph, coloured by --toast-accent so it matches the kind without a rule of its own. | Toast |
.toast-info |
deck.components |
internal | Sets --toast-accent. | Toast |
.toast-loading |
deck.components |
internal | Sets --toast-accent. | Toast |
.toast-main |
deck.components |
internal | The text column of a toast. min-inline-size: 0 so a long unbroken string cannot push the close button off the end. | Toast |
.toast-region |
deck.components |
internal | The fixed container. pointer-events: none on the region and auto on each toast, so the empty area does not swallow clicks on the page beneath. Sits above a .tabbar when the page has one, and clears the home indicator. | Toast |
.toast-region-center |
deck.components |
internal | Sets inset-inline, margin-inline. | Toast |
.toast-region-stacked |
deck.components |
internal | No declarations. | Toast |
.toast-region-start |
deck.components |
internal | Sets inset-inline. | Toast |
.toast-region-top |
deck.components |
internal | Sets inset-block, flex-direction. | Toast |
.toast-text |
deck.components |
internal | Sets color. | Toast |
.toast-timer |
deck.components |
internal | The auto-dismiss bar. A CSS animation rather than a JavaScript countdown, which is what allows hovering or focusing the region to pause every timer in it with one declaration — so a reader moving toward an Undo button does not have it vanish as they arrive. | Toast |
.toast-title |
deck.components |
internal | Sets font-weight. | Toast |
.toast-undo |
deck.components |
internal | Sets --toast-accent. | Toast |
.toast-warn |
deck.components |
internal | Sets --toast-accent. | Toast |
.tone-icon |
deck.layout |
public | Sets color. | Colour and surface |
.tone-surface |
deck.layout |
public | Sets background, border-color. | Colour and surface |
.tone-text |
deck.layout |
public | Sets color. | Colour and surface |
.tooltip |
deck.components |
public | A CSS-only tooltip: the text comes from data-tip through ::after, so there is no second element. It cannot flip near a window edge, cannot escape an overflow:hidden ancestor, and is hidden entirely on a coarse pointer. Never put anything essential in it, and pair it with aria-label — generated content is not a reliable accessible name. | Tooltip |
.touch-only |
deck.utilities |
public | Sets display. | Display and sizing |
.transition |
deck.motion |
public | Sets transition. | Motion |
.transition-colors |
deck.motion |
public | Sets transition. | Motion |
.transition-move |
deck.motion |
public | Sets transition. | Motion |
.transition-opacity |
deck.motion |
public | Sets transition. | Motion |
.transition-size |
deck.motion |
public | Sets transition. | Motion |
.truncate |
deck.utilities |
public | Sets overflow, text-overflow, white-space, min-inline-size. | Typography |
.turn-in |
deck.effects |
public | Sets animation, transform-origin. | 3D space |
.turn-out |
deck.effects |
public | Sets animation, transform-origin. | 3D space |
.uppercase |
deck.utilities |
public | Sets text-transform, letter-spacing. | Typography |
.video |
deck.components |
public | A responsive frame for a native video or an embed, plus styling for the native controls where the browser allows it. | Video |
.video-cover |
deck.components |
public | No declarations. | Video |
.video-duration |
deck.components |
public | Sets padding, border-radius, background, font-variant-numeric. | Video |
.video-meta |
deck.components |
public | Sets position, inset-block-end, inset-inline-start, z-index, and 5 more. | Video |
.video-play |
deck.components |
public | Sets position, z-index, inline-size, block-size, and 9 more. | Video |
.video-portrait |
deck.components |
public | Sets --ratio. | Video |
.video-poster |
deck.components |
public | Poster overlay with a play button, for a click-to-load embed | Video |
.video-square |
deck.components |
public | Sets --ratio. | Video |
.video-wide |
deck.components |
public | Sets --ratio. | Video |
.virtual |
deck.components |
public | Any long stack of cards: an activity feed, a chat log, search results | Display and sizing |
.virtual-lg |
deck.components |
public | No declarations. | Display and sizing |
.virtual-sm |
deck.components |
public | No declarations. | Display and sizing |
.vt-header |
deck.motion |
public | Sets view-transition-name. | Motion |
.vt-hold |
deck.motion |
public | Elements that persist across the navigation. Give the same view-transition-name to the matching element on both pages and the browser tweens between them — a row in a list morphing into a detail header. | Motion |
.vt-main |
deck.motion |
public | Sets view-transition-name. | Motion |
.vt-tabbar |
deck.motion |
public | Sets view-transition-name. | Motion |
.w-auto |
deck.utilities |
public | Sets inline-size. | Display and sizing |
.w-full |
deck.utilities |
public | Sets inline-size. | Display and sizing |
.was-shaken |
deck.motion |
internal | No declarations. | Motion |
.will-move |
deck.motion |
public | No declarations. | Motion |
.with-indicator |
deck.components |
public | A count or dot anchored to a corner of something | Indicator |
.wrap |
deck.utilities |
public | Sets flex-wrap. | Display and sizing |
.writing-normal |
deck.utilities |
public | Sets writing-mode. | Typography |
.writing-sideways |
deck.utilities |
public | Sets writing-mode. | Typography |
.writing-upright |
deck.utilities |
public | Sets text-orientation, letter-spacing. | Typography |
.writing-vertical |
deck.utilities |
public | Vertical text for a table header that would otherwise need a 40 character column, or for a sidebar label. | Typography |
.writing-vertical-lr |
deck.utilities |
public | Sets writing-mode. | Typography |
.z-1 |
deck.utilities |
public | Sets z-index. | Position |
.z-lift-1 |
deck.effects |
public | Lift an element toward the viewer inside a scene, rather than faking it with a bigger shadow. | 3D space |
.z-lift-2 |
deck.effects |
public | Sets transform. | 3D space |
.z-lift-3 |
deck.effects |
public | Sets transform. | 3D space |
.z-sink |
deck.effects |
public | Sets transform. | 3D space |
Reading the columns
- Layer
-
The
@layerthe 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.