classes.md

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 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