# Class reference

> **Generated** from source by `scripts/gen-class-reference.js` —
> run `npm run docs:classes` to refresh. Do not edit by hand.

**305 .sf-classes, 15 .sf-is-classes.** Every `.sf-*` layout/macro class and `.sf-is-*` state class.
See [architecture.md](architecture.md) for layer order and naming conventions.

## Layout primitives (`core/layout.css`)

146 classes.

| Class |
|---|
| `.sf-alternate` |
| `.sf-bento` |
| `.sf-bento--2` |
| `.sf-bento--3` |
| `.sf-bento--6` |
| `.sf-bento--row-compact` |
| `.sf-bento--row-tall` |
| `.sf-bento-featured` |
| `.sf-bento-full` |
| `.sf-bento-tall` |
| `.sf-bento-wide` |
| `.sf-bg-layer` |
| `.sf-box` |
| `.sf-breakout` |
| `.sf-center` |
| `.sf-center--intrinsic` |
| `.sf-cluster` |
| `.sf-cluster--2xl` |
| `.sf-cluster--between` |
| `.sf-cluster--center` |
| `.sf-cluster--end` |
| `.sf-cluster--l` |
| `.sf-cluster--m` |
| `.sf-cluster--no-wrap` |
| `.sf-cluster--s` |
| `.sf-cluster--xl` |
| `.sf-cluster--xs` |
| `.sf-container` |
| `.sf-container--full` |
| `.sf-container--narrow` |
| `.sf-container--prose` |
| `.sf-container--wide` |
| `.sf-content-grid` |
| `.sf-cover` |
| `.sf-cover--max` |
| `.sf-cover--min` |
| `.sf-cover--padding-l` |
| `.sf-cover--padding-s` |
| `.sf-cover__center` |
| `.sf-cq` |
| `.sf-divide` |
| `.sf-divide--vertical` |
| `.sf-divider` |
| `.sf-divider--dashed` |
| `.sf-divider--dotted` |
| `.sf-divider--gradient` |
| `.sf-divider--soft` |
| `.sf-divider--strong` |
| `.sf-divider--vertical` |
| `.sf-equal` |
| `.sf-equal--2` |
| `.sf-equal--3` |
| `.sf-equal--4` |
| `.sf-equal--6` |
| `.sf-fluid-cq` |
| `.sf-frame` |
| `.sf-frame--3-2` |
| `.sf-frame--4-3` |
| `.sf-frame--cinema` |
| `.sf-frame--golden` |
| `.sf-frame--portrait` |
| `.sf-frame--square` |
| `.sf-frame--video` |
| `.sf-full-bleed` |
| `.sf-gap` |
| `.sf-gap--2xl` |
| `.sf-gap--l` |
| `.sf-gap--m` |
| `.sf-gap--s` |
| `.sf-gap--xl` |
| `.sf-gap--xs` |
| `.sf-grid` |
| `.sf-grid--2xl` |
| `.sf-grid--dense` |
| `.sf-grid--fit` |
| `.sf-grid--l` |
| `.sf-grid--m` |
| `.sf-grid--s` |
| `.sf-grid--xl` |
| `.sf-grid--xs` |
| `.sf-grid-cols-1` |
| `.sf-grid-cols-1-2` |
| `.sf-grid-cols-1-3` |
| `.sf-grid-cols-2` |
| `.sf-grid-cols-2-1` |
| `.sf-grid-cols-3` |
| `.sf-grid-cols-3-1` |
| `.sf-grid-cols-4` |
| `.sf-grid-cols-6` |
| `.sf-grid-flex` |
| `.sf-grid-flex--2xl` |
| `.sf-grid-flex--center` |
| `.sf-grid-flex--l` |
| `.sf-grid-flex--m` |
| `.sf-grid-flex--s` |
| `.sf-grid-flex--xl` |
| `.sf-grid-flex--xs` |
| `.sf-header--l` |
| `.sf-header--m` |
| `.sf-header--s` |
| `.sf-header--xl` |
| `.sf-header--xs` |
| `.sf-icon` |
| `.sf-icon--2xl` |
| `.sf-icon--boxed` |
| `.sf-icon--l` |
| `.sf-icon--m` |
| `.sf-icon--s` |
| `.sf-icon--xl` |
| `.sf-icon--xs` |
| `.sf-imposter` |
| `.sf-imposter--contain` |
| `.sf-imposter--fixed` |
| `.sf-overlay` |
| `.sf-pancake` |
| `.sf-place-center` |
| `.sf-reel` |
| `.sf-section` |
| `.sf-section--2xl` |
| `.sf-section--collapse` |
| `.sf-section--guttered` |
| `.sf-section--l` |
| `.sf-section--m` |
| `.sf-section--s` |
| `.sf-section--xl` |
| `.sf-section--xs` |
| `.sf-section-group` |
| `.sf-sidebar` |
| `.sf-sidebar--narrow` |
| `.sf-sidebar--right` |
| `.sf-sidebar--wide` |
| `.sf-stack` |
| `.sf-stack--2xl` |
| `.sf-stack--center` |
| `.sf-stack--end` |
| `.sf-stack--l` |
| `.sf-stack--m` |
| `.sf-stack--s` |
| `.sf-stack--stretch` |
| `.sf-stack--xl` |
| `.sf-stack--xs` |
| `.sf-subgrid` |
| `.sf-subgrid-rows` |
| `.sf-switcher` |
| `.sf-switcher--no-wrap` |
| `.sf-switcher--vertical` |

## Macro classes (`core/macros.css`)

51 classes.

| Class |
|---|
| `.sf-aspect` |
| `.sf-content-auto` |
| `.sf-drop-shadow-l` |
| `.sf-drop-shadow-m` |
| `.sf-drop-shadow-s` |
| `.sf-drop-shadow-xl` |
| `.sf-drop-shadow-xs` |
| `.sf-equal-height` |
| `.sf-flow` |
| `.sf-line-clamp-2` |
| `.sf-line-clamp-3` |
| `.sf-line-clamp-N` |
| `.sf-link--reverse` |
| `.sf-link--subtle` |
| `.sf-link-external` |
| `.sf-no-tap-highlight` |
| `.sf-not-prose` |
| `.sf-overflow-fade` |
| `.sf-overflow-fade--block` |
| `.sf-overflow-fade--bottom` |
| `.sf-overflow-fade--inline` |
| `.sf-overflow-fade--left` |
| `.sf-overflow-fade--right` |
| `.sf-overflow-fade--top` |
| `.sf-overlap` |
| `.sf-overlap--down` |
| `.sf-overlap-host` |
| `.sf-prose` |
| `.sf-scrim` |
| `.sf-scrim--bottom` |
| `.sf-scrim--full` |
| `.sf-scrim--top` |
| `.sf-scrim__content` |
| `.sf-scroll-shadow` |
| `.sf-scroll-snap` |
| `.sf-surface` |
| `.sf-surface--action` |
| `.sf-surface--danger` |
| `.sf-surface--info` |
| `.sf-surface--inverse` |
| `.sf-surface--neutral` |
| `.sf-surface--primary` |
| `.sf-surface--secondary` |
| `.sf-surface--success` |
| `.sf-surface--tertiary` |
| `.sf-surface--warning` |
| `.sf-surface-bg` |
| `.sf-tabular-nums` |
| `.sf-text-gradient` |
| `.sf-text-protect` |
| `.sf-truncate` |

## State classes (`core/states.css`)

15 classes.

| Class |
|---|
| `.sf-is-disabled` |
| `.sf-is-draggable` |
| `.sf-is-dragging` |
| `.sf-is-drop-target` |
| `.sf-is-empty` |
| `.sf-is-error` |
| `.sf-is-highlighted` |
| `.sf-is-info` |
| `.sf-is-invalid` |
| `.sf-is-loading` |
| `.sf-is-selected` |
| `.sf-is-shimmer` |
| `.sf-is-success` |
| `.sf-is-valid` |
| `.sf-is-warning` |

## Accessibility (`core/accessibility.css`)

7 classes.

| Class |
|---|
| `.sf-clickable-parent` |
| `.sf-clickable-parent__overlay` |
| `.sf-focus-parent` |
| `.sf-focus-shadow` |
| `.sf-is-loading` |
| `.sf-text-gradient` |
| `.sf-touch-target` |

## Motion / entrances (`core/motion.css`)

22 classes.

| Class |
|---|
| `.sf-color-pulse` |
| `.sf-entrance--fade` |
| `.sf-entrance--fade-down` |
| `.sf-entrance--fade-left` |
| `.sf-entrance--fade-right` |
| `.sf-entrance--fade-up` |
| `.sf-entrance--scale-up` |
| `.sf-exit--fade` |
| `.sf-exit--fade-down` |
| `.sf-exit--fade-left` |
| `.sf-exit--fade-right` |
| `.sf-exit--fade-up` |
| `.sf-exit--scale-down` |
| `.sf-fade-in` |
| `.sf-fade-out` |
| `.sf-scale-down` |
| `.sf-scale-up` |
| `.sf-slide-in-down` |
| `.sf-slide-in-left` |
| `.sf-slide-in-right` |
| `.sf-slide-in-up` |
| `.sf-stagger` |

## Print utilities (`core/print.css`)

1 classes.

| Class |
|---|
| `.sf-link-external` |

## Theme utilities (`core/themes.css`)

3 classes.

| Class |
|---|
| `.sf-theme-dark` |
| `.sf-theme-light` |
| `.sf-theme-transition` |

## Forms (`optional/forms.css`)

1 classes.

| Class |
|---|
| `.sf-live-validate` |

## Components (`optional/components.css`)

32 classes.

| Class |
|---|
| `.sf-btn` |
| `.sf-btn--action` |
| `.sf-btn--base` |
| `.sf-btn--block` |
| `.sf-btn--block-cq` |
| `.sf-btn--danger` |
| `.sf-btn--gradient` |
| `.sf-btn--info` |
| `.sf-btn--l` |
| `.sf-btn--neutral` |
| `.sf-btn--outline` |
| `.sf-btn--primary` |
| `.sf-btn--s` |
| `.sf-btn--secondary` |
| `.sf-btn--soft` |
| `.sf-btn--success` |
| `.sf-btn--tertiary` |
| `.sf-btn--warning` |
| `.sf-btn--xl` |
| `.sf-btn--xs` |
| `.sf-card` |
| `.sf-card--bordered` |
| `.sf-card--elevated` |
| `.sf-card--interactive` |
| `.sf-card__avatar` |
| `.sf-card__body` |
| `.sf-card__footer` |
| `.sf-card__header` |
| `.sf-card__media` |
| `.sf-card__title` |
| `.sf-is-disabled` |
| `.sf-is-loading` |

## Utilities (`optional/utilities.css`)

48 classes.

| Class |
|---|
| `.sf-h1` |
| `.sf-h2` |
| `.sf-h3` |
| `.sf-h4` |
| `.sf-h5` |
| `.sf-h6` |
| `.sf-hover-float` |
| `.sf-hover-grow` |
| `.sf-hover-shrink` |
| `.sf-hover-sink` |
| `.sf-hover-slide-end` |
| `.sf-hover-slide-start` |
| `.sf-invisible` |
| `.sf-list-none` |
| `.sf-marker--action` |
| `.sf-marker--primary` |
| `.sf-marker--secondary` |
| `.sf-marker--tertiary` |
| `.sf-prose` |
| `.sf-selection--alt` |
| `.sf-sticky` |
| `.sf-sticky--l` |
| `.sf-sticky--m` |
| `.sf-sticky--s` |
| `.sf-text-2xl` |
| `.sf-text-2xs` |
| `.sf-text-3xl` |
| `.sf-text-4xl` |
| `.sf-text-l` |
| `.sf-text-m` |
| `.sf-text-s` |
| `.sf-text-xl` |
| `.sf-text-xs` |
| `.sf-visible` |
| `.sf-width-10` |
| `.sf-width-20` |
| `.sf-width-30` |
| `.sf-width-40` |
| `.sf-width-50` |
| `.sf-width-60` |
| `.sf-width-70` |
| `.sf-width-80` |
| `.sf-width-90` |
| `.sf-width-auto` |
| `.sf-width-fit` |
| `.sf-width-full` |
| `.sf-width-max` |
| `.sf-width-min` |