CSS framework classes

Tier 1 — every pattern expressible in pure HTML and CSS: its partial, its representative classes, and whether it is config-authored.

Tier 1 is every pattern expressible in pure HTML and CSS, built on modern platform features — Anchor Positioning, Popover, Invoker Commands, <details>, subgrid, container queries, scroll-driven animations. Reach here before anything else.

A config-authored pattern comes from patterns.items in your design system, so it gets the full token cascade — base declarations, states, role variants and --<prop>-<pattern> override hooks. Everything else is a structural partial with none of those. SeeComponent patterns for how that cascade resolves.

Classes shown are representative. The framework's vocabulary is defined by naming rules, not a list — see theclass vocabulary for the full grammar, and the Patterns page for live demos.

`badge`

Partial: patterns/tag.css
Classes: badge, badge-indicator
Config-authored: patterns.items.badge
Recommended call: .badge — a STATIC label. Use tag if it is dismissable or editable.
Also in: this tier only

`banner`

Partial: patterns/banner.css
Classes: banner, banner__content, banner__action
Config-authored: patterns.items.banner
Recommended call: .banner; wrap in <wc-dismissable> for a close button that works.
Also in: this tier only

`btn`

Partial: none
Classes: btn
Config-authored: patterns.items.btn
Recommended call: <button> gets it with no class; .btn carries it to other tags. fill: false, so states drive color.
Also in: this tier only

`card`

Partial: patterns/card.css
Classes: card
Config-authored: patterns.items.card
Recommended call: <Cards> — it emits <wc-cards> itself, so do NOT add your own wrapper. <Subgrid> is the same grid without the click enhancement.
Also in: Web component, Astro

`carousel`

Partial: patterns/carousel.css
Classes: carousel, carousel__track, carousel__slide, carousel__media, carousel__hint
Config-authored: patterns.items.carousel
Recommended call: <Carousel slides={…} label="…" /> — it emits <wc-carousel> itself, so do NOT add your own wrapper. .carousel is the shell and .carousel__track the scroller; add loop for the cloned infinite strip (autoplay implies it).
Also in: Web component, Astro, Bricks

`centered`

Partial: layout.css
Classes: centered, spotlight, breakout, fullbleed
Config-authored: none
Recommended call: .centered as a track grid. Children land in measure — give it a track child to lay out inside.
Also in: Bricks

`cluster`

Partial: patterns/cluster.css
Classes: cluster, cluster-between, cluster-start
Config-authored: none
Recommended call: .cluster plus an alignment variant.
Also in: this tier only

`code`

Partial: patterns/code.css
Classes: none
Config-authored: none
Recommended call: Element selectors on pre/code; no class needed.
Also in: this tier only

`color-scheme-toggle`

Partial: patterns/icon.css
Classes: none
Config-authored: none
Recommended call: <wc-color-scheme-toggle></wc-color-scheme-toggle>. Renamed from <color-scheme-toggle> in 4.0. Shadow DOM, so it is absent rather than broken without JS.
Also in: Web component, Bricks

`combobox`

Partial: patterns/combobox.css
Classes: combobox, combobox__listbox, combobox__option
Config-authored: patterns.items.combobox
Recommended call: CSS shell only — the Lit component is a TODO, so it is not interactive yet.
Also in: this tier only

`comment`

Partial: patterns/comment.css
Classes: comment, comment__author, comment-thread
Config-authored: patterns.items.comment
Recommended call: .comment inside .comment-thread.
Also in: this tier only

`consent`

Partial: patterns/consent.css
Classes: consent, consent__body, consent__options, consent__actions
Config-authored: none
Recommended call: <CookieConsent />. Its own Lit-free bundle so a site needing consent does not download a rendering framework.
Also in: Web component, Astro

`copy`

Partial: patterns/copy.css
Classes: copy, copy__button, copy__icon, copy__tooltip
Config-authored: none
Recommended call: <wc-copy> around the content and a [data-copy] button.
Also in: Web component, Bricks

`counter`

Partial: patterns/counter.css
Classes: counter, counter__value, counter__presentation
Config-authored: none
Recommended call: <Counter value="94%" /> — it emits <wc-counter> itself, so do NOT add your own wrapper. The final value is parsed from the fallback text, never passed separately.
Also in: Web component, Astro

`cta`

Partial: none
Classes: cta, cta-danger
Config-authored: patterns.items.cta
Recommended call: .cta on any element — usually <a>, since a CTA navigates. Filled, with role variants.
Also in: this tier only

`details`

Partial: patterns/details.css
Classes: details, details-trigger, details-icon
Config-authored: patterns.items.details
Recommended call: <Details> — or hand-write <details>. No JS at either tier; ::details-content animates in CSS.
Also in: Astro

`dialog`

Partial: patterns/dialog.css
Classes: dialog__header, dialog__body, dialog__footer
Config-authored: patterns.items.dialog
Recommended call: Native <dialog> plus the .dialog__* parts. No JS beyond showModal().
Also in: this tier only

`dismissable`

Partial: patterns/banner.css
Classes: banner__close, notification__close
Config-authored: none
Recommended call: <wc-dismissable> around any banner/notification containing a [data-dismiss] control.
Also in: Web component, Bricks

`drawer`

Partial: patterns/drawer.css
Classes: drawer, drawer--start, drawer--end
Config-authored: patterns.items.drawer
Recommended call: <Drawer> — <dialog class="drawer"> plus an Invoker Commands trigger. No JS.
Also in: Astro

`dropdown`

Partial: patterns/dropdown.css
Classes: dropdown--show-on-hover, dropdown-menu
Config-authored: patterns.items.dropdown
Recommended call: .dropdown — Popover API based.
Also in: this tier only

`entries`

Partial: patterns/table.css
Classes: entries__table, entries__scroll, entries__nav
Config-authored: none
Recommended call: <wc-entries> around <h3> + <dl> pairs. The tier-2 exemplar: semantic pairs with no JS, a table with it.
Also in: Web component, Bricks

`forms`

Partial: patterns/forms.css
Classes: form-group, input-group, fieldset, custom-check
Config-authored: patterns.items.forms
Recommended call: Wrap text controls in .form-group or .input-group — a bare <input> gets browser defaults.
Also in: this tier only

`gallery`

Partial: patterns/gallery.css
Classes: gallery, gallery__item, gallery__trigger, gallery__thumb
Config-authored: patterns.items.gallery
Recommended call: <Gallery images={…} label="…" /> — it emits <wc-gallery> itself, so do NOT add your own wrapper. Each thumbnail is a command="show-modal" invoker for its own <dialog class="lightbox-dialog"> (see lightbox), so it is a working modal lightbox with no JS.
Also in: Web component, Astro

`grouped`

Partial: patterns/grouped.css
Classes: group, group-inline, bordered
Config-authored: none
Recommended call: .group-inline / .group-block to join adjacent controls.
Also in: this tier only

`horizontal-scroll`

Partial: patterns/horizontal-scroll.css
Classes: horizontal-scroll
Config-authored: none
Recommended call: .horizontal-scroll for a snap strip.
Also in: this tier only

`icon`

Partial: patterns/icon.css
Classes: icon, icon-button, icon-mask
Config-authored: none
Recommended call: <Icon name="menu" />. Names are semantic and resolve per configured set; a name containing : passes through.
Also in: Astro, Bricks

`icon-picker`

Partial: patterns/icon.css
Classes: none
Config-authored: none
Recommended call: Not shipped. See color-wheel.
Also in: Web component

`image-compare`

Partial: patterns/splitter.css
Classes: image-compare, image-compare__before, image-compare__handle
Config-authored: none
Recommended call: <wc-image-compare> with two images. Both are visible without JS.
Also in: Web component, Bricks

`lightbox`

Partial: patterns/lightbox.css
Classes: lightbox-dialog, lightbox-dialog__content, lightbox-dialog__image, lightbox-dialog__nav-button
Config-authored: patterns.items.lightbox
Recommended call: The <dialog class="lightbox-dialog"> half of a lightbox. Use gallery for the thumbnail grid that drives it — <Gallery /> emits both.
Also in: this tier only

`link`

Partial: patterns/anchor-link.css
Classes: link, skip-link, stretched-link, raised
Config-authored: patterns.items.link
Recommended call: <a> gets it at zero specificity; .link for other tags. .stretched-link makes one link cover its positioned ancestor (whole-card click, no JS — but the card text stops being selectable); .raised lifts content back above that overlay.
Also in: this tier only

`list`

Partial: patterns/list.css
Classes: facet-list, filtered-list
Config-authored: patterns.items.list
Recommended call: .facet-list / .filtered-list.
Also in: this tier only

`marquee`

Partial: patterns/marquee.css
Classes: marquee, marquee__content, marquee__item
Config-authored: none
Recommended call: <wc-marquee> around one .marquee__content. Scrolls via CSS alone; JS only removes the seam.
Also in: Web component

`masonry`

Partial: patterns/masonry.css
Classes: masonry, masonry__item
Config-authored: none
Recommended call: .masonry — CSS columns based.
Also in: this tier only

`media`

Partial: patterns/media.css
Classes: media, media__figure, tile
Config-authored: none
Recommended call: .media for a figure/body pair; .tile for the stacked form.
Also in: this tier only

`multi-field`

Partial: patterns/forms.css
Classes: form-group, input-group, fieldset
Config-authored: none
Recommended call: <wc-multi-field> around a field template. One row submits fine with no JS.
Also in: Web component, Bricks

`nav`

Partial: patterns/nav.css
Classes: menu, navbar, nav-collapse, drawer-nav
Config-authored: patterns.items.nav
Recommended call: .menu / .navbar. See navbar and navshell for the newer shells.
Also in: this tier only

`navbar`

Partial: patterns/navbar.css
Classes: navbar, navbar--sticky, nav-items
Config-authored: none
Recommended call: .navbar with --start/--center/--end.
Also in: this tier only

`navshell`

Partial: patterns/navshell.css
Classes: navshell, navshell__bar, navshell__panel, navshell-toggle
Config-authored: none
Recommended call: <NavShell> with a nav slot, plus <NavShellToggle> if the toggle must live outside the shell.
Also in: Astro

`notification`

Partial: patterns/notification.css
Classes: notification, notification__title, notification__actions
Config-authored: patterns.items.notification
Recommended call: .notification with a role variant; wrap in <wc-dismissable> to make it dismissable.
Also in: this tier only

`overlay`

Partial: patterns/overlay.css
Classes: overlay
Config-authored: none
Recommended call: .overlay for a scrim.
Also in: this tier only

`popover`

Partial: patterns/popover.css
Classes: popover, popover-trigger, popover-anchor
Config-authored: patterns.items.popover
Recommended call: <Popover> — native Popover API + CSS Anchor Positioning. No JS.
Also in: Astro

`pull-quote`

Partial: patterns/pull-quote.css
Classes: pull-quote, pull-quote__attribution
Config-authored: patterns.items.pull-quote
Recommended call: .pull-quote. Note the type role quote is separate.
Also in: this tier only

`reveal`

Partial: patterns/reveal.css
Classes: reveal, reveal-fade, reveal-h
Config-authored: none
Recommended call: .reveal — scroll-driven, no JS. Hosts the interpolate-size that <details> animation needs.
Also in: this tier only

`scroll-based`

Partial: patterns/scroll-based.css
Classes: parallax, scroll-progress, scroll-spy
Config-authored: none
Recommended call: Scroll-timeline driven; no JS.
Also in: this tier only

`scroll-target`

Partial: patterns/scroll-target.css
Classes: scroll-target-group, toc-sidebar
Config-authored: none
Recommended call: .scroll-target-group for :target-current highlighting.
Also in: this tier only

`separator`

Partial: patterns/separator.css
Classes: separator, separator__text, separator__ornament
Config-authored: none
Recommended call: .separator, optionally with text or an ornament.
Also in: this tier only

`sitenav`

Partial: patterns/sitenav.css
Classes: sitenav, sitenav__link, sitenav--drawer-start
Config-authored: none
Recommended call: .sitenav with --bp-* and a drawer direction. <details> + Invoker Commands, no JS.
Also in: Bricks

`split`

Partial: layout.css
Classes: split, split-1-2, split-reverse
Config-authored: none
Recommended call: .split plus a ratio class. Pure CSS; md-split-1-2 for the responsive form.
Also in: Bricks

`split-link`

Partial: patterns/split-link.css
Classes: split-link, split-link__toggle, split-link__panel
Config-authored: none
Recommended call: .split-link — a link plus a disclosure toggle. No JS.
Also in: Bricks

`split-panel`

Partial: patterns/splitter.css
Classes: splitter, splitter__panel, splitter__handle
Config-authored: none
Recommended call: <wc-split-panel> with two children. Unenhanced they simply stack.
Also in: Web component, Bricks

`stack`

Partial: patterns/stack.css
Classes: stack, stack__card
Config-authored: none
Recommended call: .stack for overlapping cards.
Also in: this tier only

`status`

Partial: patterns/tag.css
Classes: status, status-dot--pulse
Config-authored: patterns.items.status
Recommended call: .status with a role variant.
Also in: this tier only

`sticky`

Partial: patterns/sticky.css
Classes: sticky, sticky-header, sticky-nav
Config-authored: none
Recommended call: .sticky-header etc. Pure CSS.
Also in: this tier only

`subgrid`

Partial: patterns/subgrid.css
Classes: subgrid, subgrid-card, pricing-grid
Config-authored: none
Recommended call: <Subgrid> — emits <ul class="subgrid" role="list">; author <li class="card subgrid-card"> items yourself, so tranches align across the set.
Also in: Astro

`svg`

Partial: patterns/svg.css
Classes: svg-container, svg-shape, svg-animated
Config-authored: none
Recommended call: .svg-* helpers for inline SVG.
Also in: this tier only

`table`

Partial: patterns/table.css
Classes: table, table-wrapper
Config-authored: patterns.items.table
Recommended call: .table inside .table-wrapper. See entries for the responsive-to-table pattern.
Also in: this tier only

`tabs`

Partial: none
Classes: tabs
Config-authored: patterns.items.tabs
Recommended call: Generated pattern only; no structural partial and no component yet.
Also in: this tier only

`tag`

Partial: patterns/tag.css
Classes: tag, tag__remove, tag__icon, tag-list
Config-authored: patterns.items.tag
Recommended call: .tag — an editable/dismissable label. Its group is label, not tag.
Also in: this tier only

`text-effects`

Partial: patterns/text-effects.css
Classes: typing, text-highlight, text-gradient-animate, text-stagger
Config-authored: none
Recommended call: .typing, .text-highlight, … CSS animation only.
Also in: this tier only

`theme-editor`

Partial: patterns/theme-editor.css
Classes: ed-panel, ed-launch, ed-input
Config-authored: none
Recommended call: <wc-theme-editor manifest="…">. TOOLING, not a page pattern — the one deliberate tier-2 exception, quarantined in its own opt-in bundle.
Also in: Web component

`tooltip`

Partial: patterns/tooltip.css
Classes: tooltip-trigger
Config-authored: patterns.items.tooltip
Recommended call: .tooltip-trigger — CSS only, anchor-positioned.
Also in: this tier only

`tree`

Partial: patterns/tree.css
Classes: tree, tree__item, tree__content, tree__summary, tree__toggle, tree__label
Config-authored: patterns.items.tree
Recommended call: <Tree items={…} /> — it emits <wc-tree> itself, so do NOT add your own wrapper.
Also in: Web component, Astro