Every class in the framework

All 690 public classes, grouped by module and family, with the properties each one sets. This page is generated from the CSS source on every build — a hand-written index is out of date the day after it ships.

690 classes 12 modules Generated at build time

How to read this

“Declares” lists the properties a rule sets, not its values — the values are tokens and you can change them. “Applies when” names the media or container query a class sits inside; an empty cell means it always applies. Families of more than a dozen near-identical classes are printed as a list of names rather than a table of eighty identical rows.

Classless

Styles bare semantic elements — headings, links, buttons, fields, tables, code, quotes, details, dialogs — with no classes. Every rule is wrapped in :where() and sits in the lowest cascade layer, and it only touches elements that carry no class, so any PolyFish component placed on top wins.

PolyFishCSS-Classless.css · element selectors only

Core

Required. Tokens and colour roles, the reset, the fluid type scale, layout primitives, buttons, focus handling and the reduced-motion and forced-colours policies.

PolyFishCSS-Core.css · 85 public classes

Scoped Density And Retinting

Class	Declares	Applies when
`pf-compact`	—	—
`pf-airy`	—	—
`pf-retint`	—	—

Intrinsic Layout Primitives

Class	Declares	Applies when
`pf-switcher`	display, flex-wrap, gap, flex-grow, flex-basis, min-inline-size	—
`pf-sidebar`	display, flex-wrap, gap	—
`pf-sidebar__side`	flex-basis, flex-grow	—
`pf-sidebar__main`	flex-basis, flex-grow, min-inline-size	—
`pf-cover`	display, flex-direction, min-block-size, padding, margin-block, margin-block-start, margin-block-end	—
`pf-cover__main`	margin-block-start, margin-block-end, margin-block	—
`pf-center`	box-sizing, max-inline-size, margin-inline, padding-inline	—
`pf-center--intrinsic`	display, flex-direction, align-items	—
`pf-icon`	inline-size, block-size, flex-shrink, align-self	—
`pf-with-icon`	display, align-items, gap, align-self	—
`pf-imposter`	position, inset-block-start, inset-inline-start, transform	—
`pf-imposter--contain`	max-inline-size, max-block-size, overflow	—

Tokens

Class	Declares	Applies when
`pf-invert`	background-color, color	—

Typography

Class	Declares	Applies when
`pf-prose`	line-height, padding-inline-start, display, gap, color, margin-top, min-inline-size	—

Layout Primitives

Sets width, max-width, margin-inline, padding-inline, display… — 34 classes.

pf-container pf-container--narrow pf-container--wide pf-stack pf-stack--sm pf-stack--lg pf-measure-prose pf-measure-wide pf-cluster pf-cluster--between pf-cluster--center pf-grid pf-grid--2 pf-grid--3 pf-grid--4 pf-grid--auto pf-grid--auto-sm pf-grid--auto-md pf-grid--auto-lg pf-grid--auto-xl pf-shell pf-shell--narrow pf-shell--aside pf-split pf-logo pf-logo--sm pf-lockup pf-brand-well pf-fg-brand pf-brand-rule pf-span-full pf-stretched-link pf-facet pf-facet--sw

Buttons

Class	Declares	Applies when
`pf-btn`	display, align-items, justify-content, gap, background, color, border, border-radius, font-family, font-size, font-weight, line-height, padding, text-decoration, cursor, transition, border-color, transform, pointer-events, opacity, content, width, height, border-top-color, animation, min-height, forced-color-adjust	@media (pointer: coarse) @media (forced-colors: active)
`pf-btn--secondary`	transform, background, border-color, color	—
`pf-btn--ghost`	transform, background, border-color, color	—
`pf-btn--link`	transform, padding-inline, text-decoration, text-underline-offset, background, border-color, color	—
`pf-btn--accent-2`	background, border-color	—
`pf-btn--icon`	width, height, padding, border-radius, font-size, line-height	—
`pf-btn--square`	border-radius	—
`pf-btn--sm`	width, height, font-size, padding	—
`pf-btn--lg`	font-size, padding	—
`pf-btn--block`	display, width	—

Pills, Markers, Focus

Sets display, align-items, gap, background, border… — 24 classes.

pf-pill pf-pill--accent pf-pill--accent-2 pf-mark pf-mark--accent-2 pf-dot pf-skip pf-scroll-lock pf-visually-hidden pf-card pf-plan pf-alert pf-table-wrap pf-code pf-input pf-select pf-textarea pf-progress__bar pf-meter__seg--on pf-meter__seg--warn pf-switch__track pf-range pf-spinner pf-switch

Headers

Navigation bars, heroes, page heads and breadcrumbs — everything above the content.

PolyFishCSS-Headers.css · 37 public classes

Announcement Bar

Class	Declares	Applies when
`pf-topbar`	background, border-bottom, color, font-size, font-weight	—
`pf-topbar__inner`	display, flex-wrap, align-items, justify-content, gap, padding-block, text-align	—
`pf-topbar--accent`	background, border-color, color, text-decoration-color	—

Navigation

Class	Declares	Applies when
`pf-nav`	position, top, z-index, background, -webkit-backdrop-filter, backdrop-filter, border-bottom, content, inset, height, pointer-events	—
`pf-nav--static`	position, -webkit-backdrop-filter, backdrop-filter	—
`pf-nav--flush`	background, border-bottom-color, display	—
`pf-nav__inner`	display, align-items, justify-content, gap, min-height, position	@media (max-width: 860px)
`pf-nav__brand`	display, align-items, gap, color, font-family, font-size, font-weight, letter-spacing, text-decoration, flex, width, height, align-self, border, border-radius, padding	—
`pf-nav__menu`	display, align-items, gap, margin-inline-start, position, inset, background, border-bottom, padding, max-height, overflow-y, overscroll-behavior, padding-bottom, visibility, opacity, transform, transition, min-inline-size	@media (max-width: 860px)
`pf-nav__links`	display, align-items, gap, margin, color, font-size, font-weight, text-decoration, padding-block, position, content, inset-inline-start, inset-inline-end, bottom, height, background, flex-direction, min-height	@media (max-width: 860px) @media (pointer: coarse)
`pf-nav__actions`	display, align-items, gap, flex-direction	@media (max-width: 860px)
`pf-nav__checkbox`	display, position, opacity, pointer-events, outline, outline-offset, visibility, transform, background	@media (max-width: 860px)
`pf-nav__burger`	display, width, height, border, border-radius, cursor, place-items, background, content, transition, transform, outline, outline-offset	@media (max-width: 860px)

Hero

Sets position, overflow, background, padding-block, content… — 24 classes.

pf-hero pf-hero__inner pf-hero--center pf-hero__lede pf-hero__eyebrow pf-hero__title pf-hero__actions pf-hero__meta pf-hero--split pf-hero__media pf-hero--photo pf-pagehead--roomy pf-pagehead pf-pagehead__inner pf-pagehead__title pf-pagehead__lede pf-breadcrumb pf-hero--panel pf-hero--compact pf-hero--hub pf-hero__assure pf-hero__glance pf-hero--art pf-hero__art

Content

Sections, cards, plans, stats, tables, alerts, code blocks, accordions, side navigation and CTA bands.

PolyFishCSS-Content.css · 96 public classes

Sections

Sets padding-block, background, border-top, display, gap… — 15 classes.

pf-section pf-section--tight pf-section--roomy pf-section--vast pf-section--alt pf-section--raised pf-section__head pf-section__head--center pf-eyebrow pf-lede pf-muted pf-prose pf-table-wrap pf-code pf-alert

Cards

Sets display, flex-direction, gap, background, border… — 14 classes.

pf-card pf-card__title pf-card__body pf-card__foot pf-card--facet pf-card--accent pf-card--flat pf-card--link pf-card__icon pf-card__icon--accent-2 pf-feature pf-checks pf-checks--accent-2 pf-checks--muted

Plan Cards

Class	Declares	Applies when
`pf-plan`	position, display, flex-direction, gap, background, border, border-radius, padding	—
`pf-plan--featured`	border-color, background	—
`pf-plan__name`	font-size	—
`pf-plan__note`	color, font-size	—
`pf-plan__price`	display, align-items, gap, font-family, font-size, font-weight, letter-spacing, color	—
`pf-plan__badge`	position, top, inset-inline-end, background, border-radius, color, font-size, font-weight, padding	—
`pf-plan__foot`	margin-top, padding-top	—

Stats

Class	Declares	Applies when
`pf-stats`	display, gap, grid-template-columns, margin	—
`pf-stat`	display, gap, border-inline-start, padding-inline-start, min-inline-size	—
`pf-stat__value`	font-family, font-size, font-weight, letter-spacing, line-height, forced-color-adjust, background, -webkit-background-clip, background-clip, color	—
`pf-stat__label`	color, font-size	—

Tables

Class	Declares	Applies when
`pf-table`	font-size, line-height, min-width, padding, text-align, vertical-align, background, color, font-family, font-weight, white-space, border-top, caption-side, padding-top	—
`pf-table--zebra`	background	—
`pf-table--compact`	padding, font-size	—
`pf-table--roomy`	padding	—
`pf-table--bordered`	border	—
`pf-table--hover`	background	—
`pf-table--fixed`	table-layout	—
`pf-table-wrap--tall`	max-height, overflow	—
`pf-table--sticky`	position, top, z-index	—
`pf-table--stack`	display, min-width, position, width, height, overflow, clip-path, white-space, border, border-radius, margin-bottom, padding, border-top, justify-content, gap, padding-inline, text-align, content, color, font-size, font-weight, padding-inline-end	@media (max-width: 620px)

Alerts And Quotes

Class	Declares	Applies when
`pf-alert__title`	font-family, font-size, font-weight, color	—
`pf-alert--info`	border-inline-start-color	—
`pf-alert--success`	border-inline-start-color, background	—
`pf-alert--warn`	border-inline-start-color, background	—
`pf-alert--danger`	border-inline-start-color, background	—
`pf-quote`	border-inline-start, padding-inline-start, font-size, line-height, color, margin-top	—

Code

Class	Declares	Applies when
`pf-code__bar`	display, align-items, justify-content, gap, background, border-bottom, color, font-family, font-size, padding	—
`pf-code__copy`	background, border, border-radius, color, cursor, font-family, font-size, padding, min-height, border-color	—
`pf-th-sort`	display, align-items, gap, background, border, color, cursor, font, padding, content, width, height, opacity, clip-path, transform	—
`pf-tag`	color	—
`pf-attr`	color	—
`pf-str`	color	—
`pf-comment`	color	—

Forms

Class	Declares	Applies when
`pf-field`	display, gap, min-inline-size	—
`pf-label`	font-size, font-weight	—
`pf-help`	color, font-size, line-height	—
`pf-input`	width, background, border, border-radius, color, font-size, padding, transition, border-color, box-shadow, outline, cursor, opacity, -webkit-box-shadow, -webkit-text-fill-color, caret-color, min-height, flex	@media (pointer: coarse)
`pf-select`	width, background, border, border-radius, color, font-size, padding, transition, border-color, box-shadow, outline, cursor, opacity, -webkit-box-shadow, -webkit-text-fill-color, caret-color, appearance, background-image, background-position, background-size, background-repeat, padding-inline-end	@media (pointer: coarse)
`pf-textarea`	width, background, border, border-radius, color, font-size, padding, transition, border-color, box-shadow, outline, cursor, opacity, -webkit-box-shadow, -webkit-text-fill-color, caret-color, min-height, resize	@media (pointer: coarse)
`pf-choice`	display, align-items, gap, font-size, accent-color, width, height	@media (pointer: coarse)
`pf-inline-form`	display, flex-wrap, gap, flex, width	—

Accordion

Class	Declares	Applies when
`pf-accordion`	display, gap, background, border, border-radius, padding, align-items, justify-content, cursor, font-family, font-size, font-weight, list-style, content, width, height, flex, clip-path, transition, transform, margin-bottom, color, line-height, interpolate-size, block-size, overflow-y, min-inline-size	@supports (interpolate-size: allow-keywords) @media (prefers-reduced-motion: no-preference)
`pf-sidenav`	display, gap, align-content, min-inline-size	—
`pf-sidenav--sticky`	position, top	—
`pf-sidenav__group`	display, gap, min-inline-size	—
`pf-sidenav__heading`	font-family, font-size, font-weight, color	—
`pf-sidenav__links`	display, gap, margin, color, font-size, text-decoration, min-inline-size, min-height, align-items	@media (pointer: coarse)

Gallery

Class	Declares	Applies when
`pf-gallery`	display, gap, grid-template-columns, margin	—
`pf-tile`	position, overflow, border, border-radius, aspect-ratio, background, width, height, object-fit, inset, color, font-size, padding	—
`pf-scroller`	display, grid-auto-flow, grid-auto-columns, gap, overflow-x, overscroll-behavior-x, scroll-snap-type, scroll-padding-inline, padding-bottom, margin, scrollbar-width, scroll-snap-align, scroll-behavior	@media (prefers-reduced-motion: no-preference)
`pf-scroller--sm`	—	—
`pf-scroller--lg`	—	—
`pf-scroller--stop`	grid-auto-flow, grid-template-columns, overflow	@media (min-width: 900px)

Steps

Class	Declares	Applies when
`pf-steps`	counter-reset, display, gap, margin, counter-increment, position, padding-inline-start, max-width, inset-inline-start, inset-block-start, content, place-items, width, height, background, border, border-radius, color, font-family, font-size, margin-bottom, line-height, min-inline-size	—
`pf-screen`	display, place-items, min-height, background-image, min-inline-size	—
`pf-screen__panel`	width	—
`pf-tile__fill`	width, height	—
`pf-specimen`	font-family, font-size, font-weight, line-height, letter-spacing, margin	—

Cta Band

Class	Declares	Applies when
`pf-cta`	position, overflow, background, border, border-radius, padding, content, inset, background-image, -webkit-mask-image, mask-image, pointer-events, font-size, max-width, color	—
`pf-cta__inner`	position, display, flex-wrap, align-items, justify-content, gap	—
`pf-card--numbered`	counter-increment, position, content, inset-block-start, inset-inline-end, color, font-family, font-size, opacity, counter-reset	—
`pf-card--media`	padding, overflow, aspect-ratio, background, object-fit, inline-size, display, border-block-end, margin-inline, margin-block-start, margin-block-end	—
`pf-card__media`	aspect-ratio, background, object-fit, inline-size, display, border-block-end, margin-inline, margin-block-start	—
`pf-alert--inline`	display, align-items, gap, padding, font-size, border-width, border-inline-start-width	—
`pf-table--numeric`	font-variant-numeric, text-align	—
`pf-quote--pull`	border-inline-start, border-block, padding, margin-block, padding-inline, font-size, line-height, text-align, text-wrap, margin-top	—

Forms

Fields and labels, every native control, validation that waits until someone has typed, fieldsets, ranges and file inputs.

PolyFishCSS-Forms.css · 37 public classes

Sizes

Class	Declares	Applies when
`pf-input--sm`	font-size, padding	@media (pointer: coarse)
`pf-select--sm`	font-size, padding	@media (pointer: coarse)
`pf-input--lg`	font-size, padding	—
`pf-select--lg`	font-size, padding	—

Floating Labels

Class	Declares	Applies when
`pf-float`	position, padding-top, padding-bottom, transform, color	—
`pf-input`	padding-top, padding-bottom, transform, color, border-color, box-shadow	—
`pf-select`	padding-top, padding-bottom, transform, border-color	—
`pf-textarea`	padding-top, padding-bottom, transform, color, border-color	—
`pf-float__label`	position, top, inset-inline-start, color, font-size, pointer-events, transform-origin, transition, transform	—

Validation States And Feedback

Class	Declares	Applies when
`pf-feedback`	display, align-items, gap, font-size, line-height, content, width, height, margin-top, flex, background, clip-path	—
`pf-feedback--error`	color	—
`pf-feedback--ok`	color, clip-path	—
`pf-feedback--hint`	color, display	—
`pf-label--required`	content, color, margin-inline-start	—

Fieldsets And Legends

Class	Declares	Applies when
`pf-fieldset`	border, border-radius, padding, min-width	—
`pf-fieldset--plain`	border, padding, padding-inline	—
`pf-legend`	color, font-family, font-size, font-weight, padding-inline	—

Range

Class	Declares	Applies when
`pf-range`	width, height, appearance, background, cursor, outline, outline-offset, border-radius, margin-top, border	—

File Input

Class	Declares	Applies when
`pf-file`	width, background, border, border-radius, color, font-size, padding, margin-inline-end, cursor, font, border-color, outline, outline-offset	—

Checks And Radios

Class	Declares	Applies when
`pf-checks-group`	display, gap, min-inline-size	—
`pf-checks-group--inline`	display, flex-wrap, gap	—
`pf-choice-card`	display, align-items, gap, background, border, border-radius, cursor, padding, transition, border-color, accent-color, margin-top, outline, outline-offset	—
`pf-choice-card__title`	font-weight, font-size	—
`pf-choice-card__body`	color, font-size	—

Form Layout

Class	Declares	Applies when
`pf-form`	display, gap, min-inline-size	—
`pf-form__row`	display, gap, min-inline-size	—
`pf-form__row--2`	grid-template-columns	@media (max-width: 620px)
`pf-form__row--3`	grid-template-columns	@media (max-width: 620px)
`pf-form__row--split`	grid-template-columns	@media (max-width: 620px)
`pf-form__actions`	display, flex-wrap, justify-content, gap, flex	@media (max-width: 620px)
`pf-btn`	flex	@media (max-width: 620px)
`pf-field--horizontal`	display, grid-template-columns, align-items, gap, grid-column	@media (max-width: 760px)
`pf-help`	grid-column	@media (max-width: 760px)

Counters And Hints

Class	Declares	Applies when
`pf-label-row`	display, align-items, justify-content, gap	—
`pf-counter`	color, font-family, font-size, font-variant-numeric	—
`pf-counter--over`	color	—
`pf-textarea--auto`	field-sizing, min-block-size, max-block-size	—

Components

Application UI: badges, button groups, pagination, progress, lists, avatars, switches, tabs, menus, dialogs, popovers, drawers, toasts.

PolyFishCSS-Components.css · 106 public classes

Badges And Chips

Class	Declares	Applies when
`pf-badge`	display, align-items, gap, background, border, border-radius, color, font-size, font-weight, line-height, padding, white-space	—
`pf-badge--accent`	background, border-color, color	—
`pf-badge--secondary`	background, border-color, color	—
`pf-badge--danger`	background, border-color, color	—
`pf-badge--muted`	background, color	—
`pf-badge--outline`	background, border-color, color	—
`pf-badge--count`	min-width, justify-content, padding-inline	—
`pf-chip`	display, align-items, gap, background, border, border-radius, color, font-size, padding, text-decoration, border-color	—
`pf-chip__x`	color, font-size, line-height	—

Button Groups

Class	Declares	Applies when
`pf-btn-group`	display, flex-wrap, border-radius, margin-inline-start, border-start-start-radius, border-end-start-radius, border-start-end-radius, border-end-end-radius, position, z-index, background, border-color, color	—
`pf-btn`	border-radius, margin-inline-start, border-start-start-radius, border-end-start-radius, border-start-end-radius, border-end-end-radius, position, z-index, background, border-color, color, flex	—
`pf-btn-group--square`	border-radius	—
`pf-btn-group--block`	display, flex	—

Segment

Class	Declares	Applies when
`pf-segment`	display, flex-wrap, position, opacity, pointer-events, align-items, justify-content, min-height, padding, background, border, color, cursor, font-size, font-weight, margin-inline-start, transition, border-start-start-radius, border-end-start-radius, border-start-end-radius, border-end-end-radius, z-index, border-color, outline, outline-offset	—
`pf-segment--block`	display, flex	—

Pagination

Class	Declares	Applies when
`pf-pagination`	display, flex-wrap, align-items, gap	—
`pf-pagination__item`	display, align-items, justify-content, min-width, min-height, padding-inline, background, border, border-radius, color, font-size, text-decoration, transition, border-color, font-weight, opacity, pointer-events	@media (pointer: coarse)
`pf-pagination__gap`	color, padding-inline	—

Progress And Meter

Class	Declares	Applies when
`pf-progress`	overflow, height, background, border-radius	—
`pf-progress__bar`	height, width, background, border-radius, transition	—
`pf-progress--lg`	height	—
`pf-progress--secondary`	background	—
`pf-meter`	display, gap, height	—
`pf-meter__seg`	flex, background, border-radius	—
`pf-meter__seg--on`	background	—
`pf-meter__seg--warn`	background	—

Spinner

Class	Declares	Applies when
`pf-spinner`	display, width, height, border-radius, background, -webkit-mask, mask, animation, vertical-align	—
`pf-spinner--lg`	width, height	—

List Group

Class	Declares	Applies when
`pf-list`	display, flex-direction, border, border-radius, overflow, margin	—
`pf-list__item`	display, align-items, justify-content, gap, background, color, font-size, padding, text-decoration, max-width, border-top, box-shadow, padding-inline	—
`pf-list__item--link`	background	—
`pf-list__title`	font-weight	—
`pf-list__meta`	color, font-size	—
`pf-list--flush`	border, border-radius, background, padding-inline	—

Avatar

Class	Declares	Applies when
`pf-avatar`	display, place-items, width, height, flex, background, border, border-radius, color, font-size, font-weight, letter-spacing, object-fit, overflow, margin-inline-start, box-shadow	—
`pf-avatar--sm`	width, height, font-size	—
`pf-avatar--lg`	width, height, font-size	—
`pf-avatar--accent`	background, border-color, color	—
`pf-avatars`	display, margin-inline-start, box-shadow	—

Switch

Class	Declares	Applies when
`pf-switch`	display, align-items, gap, cursor, font-size, position, opacity, width, height, margin, background, border-color, transform, outline, outline-offset	—
`pf-switch__track`	position, width, height, flex, background, border, border-radius, transition, content, top, inset-inline-start, transform, border-color, outline, outline-offset, opacity	—

Input Group

Class	Declares	Applies when
`pf-input-group`	display, align-items, width, border-radius, border-start-start-radius, border-end-start-radius, border-start-end-radius, border-end-end-radius, margin-inline-start, flex, min-width, position, z-index	—
`pf-input`	flex, min-width, position, z-index	—
`pf-input-group__addon`	display, align-items, background, border, color, font-size, padding-inline, white-space	—

Tabs

Class	Declares	Applies when
`pf-tabs`	display, grid-template-columns, border-bottom, column-gap, grid-auto-flow, justify-content, overflow-x, overscroll-behavior-x, scrollbar-width	@media (max-width: 620px)
`pf-tabs__panel`	grid-column, grid-row, display, padding-top	@media (max-width: 620px)
`pf-tabs__list`	display	—
`pf-tabs__radio`	position, opacity, pointer-events, border-bottom-color, color, outline, outline-offset, display	—
`pf-tabs__label`	grid-row, padding, border-bottom, color, cursor, font-size, font-weight, white-space, border-bottom-color, outline, outline-offset	—

Disclosure Menu

Class	Declares	Applies when
`pf-menu`	position, display, border-color	—
`pf-menu__trigger`	display, align-items, gap, background, border, border-radius, color, cursor, font-size, font-weight, list-style, padding, content, width, height, clip-path, border-color	—
`pf-menu__list`	position, z-index, top, inset-inline-start, min-width, max-width, display, background, border, border-radius, box-shadow, padding, inset-inline-end, min-inline-size	—
`pf-menu--end`	inset-inline-start, inset-inline-end	—
`pf-menu__item`	display, align-items, gap, background, border, border-radius, color, cursor, font-size, padding, text-align, text-decoration, width	—
`pf-menu__item--danger`	color	—
`pf-menu__sep`	border, border-top, margin	—

Dialog

Class	Declares	Applies when
`pf-dialog`	max-width, background, border, border-radius, color, padding, transition, opacity, transform, background-color	@media (prefers-reduced-motion: no-preference) @starting-style
`pf-dialog-target`	position, inset, z-index, display, place-items, padding, background	—
`pf-dialog__panel`	position, width, background, border, border-radius, padding	—
`pf-dialog__close`	position, top, inset-inline-end, color, font-size, line-height, text-decoration	—
`pf-dialog__title`	font-family, font-size	—
`pf-dialog__foot`	display, flex-wrap, justify-content, gap, margin-top	—

Native Overlays: Popover And Invoker Commands

Class	Declares	Applies when
`pf-popover`	transition, opacity, transform, margin, inset, min-width, max-width, background, border, border-radius, box-shadow, color, padding, position, inset-block-start, inset-inline, margin-inline, position-anchor, position-area, margin-block-start, position-try-fallbacks	@media (prefers-reduced-motion: no-preference) @starting-style @supports (anchor-name: --a)
`pf-popover--menu`	padding, display, width, align-items, gap, background, border, border-radius, color, font, text-align, text-decoration	—
`pf-popover-anchor`	anchor-name	@supports (anchor-name: --a)
`pf-dialog__actions`	display, flex-wrap, justify-content, gap, margin-block-start	—
`pf-tooltip`	position, content, bottom, inset-inline-start, z-index, width, max-width, background, border, border-radius, color, font-size, font-weight, line-height, padding, opacity, pointer-events, transform, transition	—
`pf-tooltip--end`	inset-inline-start, inset-inline-end, transform	—

Ratio Box

Class	Declares	Applies when
`pf-ratio`	position, width, aspect-ratio, inset, height, border	—
`pf-ratio--1x1`	—	—
`pf-ratio--4x3`	—	—
`pf-ratio--16x9`	—	—
`pf-ratio--21x9`	—	—

Skeleton

Class	Declares	Applies when
`pf-skeleton`	background, background-size, border-radius, height, animation	—
`pf-skeleton--title`	height, width	—
`pf-skeleton--text`	width, margin-top	—
`pf-skeleton--block`	height, border-radius	—
`pf-skeleton--circle`	height, width, border-radius	—

Empty State

Class	Declares	Applies when
`pf-empty`	display, justify-items, gap, border, border-radius, padding, text-align, min-inline-size	—
`pf-empty__mark`	width, height, background, opacity, clip-path	—
`pf-empty__title`	font-family, font-size	—
`pf-empty__body`	color, max-width	—

Divider

Class	Declares	Applies when
`pf-divider`	display, align-items, gap, color, font-size, content, flex, height, background	—

Drawer

Class	Declares	Applies when
`pf-drawer`	position, inset, z-index, display	—
`pf-drawer__scrim`	position, inset, background, display	—
`pf-drawer__panel`	position, inset-block, inset-inline-start, display, flex-direction, width, background, border-inline-end, box-shadow, padding-bottom, inset-inline, border-inline, inset, max-height, border, border-radius	—
`pf-drawer--end`	inset-inline, border-inline	—
`pf-drawer--bottom`	inset, width, max-height, border, border-radius, content, position, top, inset-inline-start, height, background, transform, padding-top	—
`pf-drawer__head`	display, align-items, justify-content, gap, border-bottom, padding, content, position, top, inset-inline-start, width, height, border-radius, background, transform, padding-top	—
`pf-drawer__title`	font-family, font-size	—
`pf-drawer__body`	flex, overflow-y, overscroll-behavior, padding	—
`pf-drawer__foot`	border-top, display, gap, padding, padding-bottom, flex	—

Bottom Bar

Class	Declares	Applies when
`pf-bottombar`	position, inset, z-index, display, justify-content, gap, background, -webkit-backdrop-filter, backdrop-filter, border-top, padding, padding-bottom	@media (min-width: 860px)
`pf-bottombar__item`	display, justify-items, gap, flex, min-height, align-content, border-radius, color, font-size, text-decoration	—
`pf-bottombar__mark`	width, height, background, clip-path	—
`pf-has-bottombar`	padding-bottom	@media (min-width: 860px)

Toast

Class	Declares	Applies when
`pf-toasts`	position, inset, z-index, display, justify-items, gap, padding, padding-bottom, pointer-events, min-inline-size	@media (min-width: 620px)
`pf-toast`	display, align-items, gap, width, background, border, border-radius, box-shadow, color, font-size, padding, pointer-events, animation	—
`pf-toast--accent`	border-color	—
`pf-toast--danger`	border-color	—
`pf-toast__close`	margin-inline-start	—

Toolbar

Class	Declares	Applies when
`pf-toolbar`	display, flex-wrap, align-items, justify-content, gap, padding-block	—
`pf-toolbar__group`	display, flex-wrap, align-items, gap	—
`pf-toolbar__group--end`	margin-inline-start	—
`pf-toolbar--bordered`	border, border-radius, padding	—
`pf-badge--dot`	content, inline-size, block-size, border-radius, background, flex-shrink	—

Footers

Column, slim and accent footers.

PolyFishCSS-Footers.css · 16 public classes

Footers

Sets background, border-top, color, font-size, padding-block… — 16 classes.

pf-footer pf-footer__top pf-footer__brand pf-footer__logo pf-footer__col pf-footer__heading pf-footer__links pf-footer__signup pf-social pf-footer__bottom pf-footer__legal pf-totop pf-footer--slim pf-footer--accent pf-footer--center pf-footer--minimal

Space

Top and bottom margins, padding, gap, proportional widths and flex sizing, with responsive gap at two breakpoints.

PolyFishCSS-Space.css · 76 public classes

Padding

Class	Declares	Applies when
`pf-p-0`	padding	—
`pf-p-1`	padding	—
`pf-p-2`	padding	—
`pf-p-3`	padding	—
`pf-p-4`	padding	—
`pf-p-5`	padding	—
`pf-p-6`	padding	—
`pf-p-7`	padding	—
`pf-p-8`	padding	—
`pf-p-9`	padding	—

Margin

Sets margin, margin-inline, margin-block, margin-top, margin-inline-end… — 27 classes.

pf-m-auto pf-mx-auto pf-my-auto pf-mt-0 pf-mt-1 pf-mt-2 pf-mt-3 pf-mt-4 pf-mt-5 pf-mt-6 pf-mt-7 pf-mt-8 pf-mt-9 pf-mt-auto pf-me-auto pf-mb-0 pf-mb-1 pf-mb-2 pf-mb-3 pf-mb-4 pf-mb-5 pf-mb-6 pf-mb-7 pf-mb-8 pf-mb-9 pf-mb-auto pf-ms-auto

Gap

Class	Declares	Applies when
`pf-gap-0`	gap	—
`pf-gap-1`	gap	—
`pf-gap-2`	gap	—
`pf-gap-3`	gap	—
`pf-gap-4`	gap	—
`pf-gap-5`	gap	—
`pf-gap-6`	gap	—
`pf-gap-7`	gap	—
`pf-gap-8`	gap	—
`pf-gap-9`	gap	—
`pf-gap-fluid`	gap	—
`pf-gap-fluid-lg`	gap	—

Grid Tracks And Placement

Class	Declares	Applies when
`pf-self-start`	align-self	—
`pf-self-center`	align-self	—
`pf-self-end`	align-self	—
`pf-self-stretch`	align-self	—
`pf-content-between`	align-content	—
`pf-content-start`	align-content	—

Proportional Widths

Sets width — 20 classes.

pf-w-0 pf-w-5 pf-w-10 pf-w-15 pf-w-20 pf-w-25 pf-w-30 pf-w-35 pf-w-40 pf-w-45 pf-w-50 pf-w-55 pf-w-60 pf-w-65 pf-w-70 pf-w-75 pf-w-80 pf-w-85 pf-w-90 pf-w-95

Flex Sizing

Class	Declares	Applies when
`pf-flex-1`	flex	—

Effects

Gradients, the frosted panel, animations, scroll behaviour, group and focus-within reactions, and the particle field.

PolyFishCSS-Effects.css · 26 public classes

Filters And Backdrop

Class	Declares	Applies when
`pf-frost`	background, -webkit-backdrop-filter, backdrop-filter	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))

Gradients

Class	Declares	Applies when
`pf-gradient-surface`	background-image	—
`pf-gradient-deep`	background-image	—
`pf-gradient-accent`	background-image	—
`pf-gradient-edge`	background-image	—
`pf-gradient-text`	color, background-image, -webkit-background-clip, background-clip	@supports (background-clip: text) or (-webkit-background-clip: text)
`pf-rule-fade`	height, border, background-image	—

Animations

Class	Declares	Applies when
`pf-animate-spin`	animation	@media (prefers-reduced-motion: no-preference)
`pf-animate-pulse`	animation	@media (prefers-reduced-motion: no-preference)
`pf-animate-fade`	animation	@media (prefers-reduced-motion: no-preference)
`pf-animate-rise`	animation	@media (prefers-reduced-motion: no-preference)

Scroll Behaviour

Class	Declares	Applies when
`pf-scroll-smooth`	scroll-behavior	—
`pf-scroll-contain`	overscroll-behavior	—
`pf-scrollbar-thin`	scrollbar-width	—
`pf-scrollbar-none`	scrollbar-width, display	—
`pf-scroll-mt`	scroll-margin-top	—

Group And Focus-Within

Class	Declares	Applies when
`pf-group-show`	opacity, transition	@media (hover: hover)
`pf-group`	opacity, transition, transform	@media (hover: hover)
`pf-group-slide`	transform, transition	@media (hover: hover)
`pf-focus-ring`	box-shadow	—

Blend, Isolation And Misc

Class	Declares	Applies when
`pf-isolate`	isolation	—
`pf-accent-color`	accent-color	—
`pf-list-none`	list-style	—

Particle Field

Class	Declares	Applies when
`pf-particles`	position, isolation, overflow, content, inset, z-index, pointer-events, opacity, background-repeat, -webkit-mask-image, mask-image, background-image, background-size, animation	@media (prefers-reduced-motion: no-preference)
`pf-particles--mesh`	background-image, background-color, -webkit-mask-image, mask-image, -webkit-mask-size, mask-size	—
`pf-particles--constellation`	background-image, background-color, -webkit-mask-image, mask-image, -webkit-mask-size, mask-size	—

Utilities

Display, sizing, position, typography, colour and visibility helpers, container-query helpers, scroll reveal, and the print stylesheet.

PolyFishCSS-Utilities.css · 191 public classes

Spacing Lives In The Space Module

Sets display, flex-wrap, flex-direction, align-items, justify-content… — 58 classes.

pf-block pf-inline-block pf-flex pf-inline-flex pf-grid-d pf-hidden pf-wrap pf-nowrap pf-flex-col pf-flex-row pf-items-start pf-items-center pf-items-end pf-justify-start pf-justify-center pf-justify-between pf-justify-end pf-grow pf-shrink-0 pf-text-start pf-text-center pf-text-end pf-text-xs pf-text-sm pf-text-lg pf-text-xl pf-text-2xl pf-text-3xl pf-text-4xl pf-text-5xl pf-font-display pf-font-mono pf-weight-500 pf-weight-600 pf-weight-700 pf-balance pf-measure pf-measure-none pf-fg-accent pf-fg-accent-2 pf-fg-paper pf-fg-muted pf-bg-deep pf-bg-base pf-bg-surface pf-bg-accent-wash pf-bg-accent-2-wash pf-bg-mesh pf-sticky pf-sticky-top pf-sticky-nav pf-round pf-round-lg pf-round-pill pf-bordered pf-bordered-strong pf-lift pf-overflow-hidden

Sizing, Position And Layers

Sets width, max-width, height, min-height, min-width… — 35 classes.

pf-w-full pf-w-auto pf-w-min pf-w-max pf-w-fit pf-max-w-xs pf-max-w-sm pf-max-w-md pf-max-w-lg pf-max-w-xl pf-h-full pf-h-screen pf-min-h-0 pf-min-w-0 pf-relative pf-absolute pf-fixed pf-static pf-inset-0 pf-top-0 pf-right-0 pf-bottom-0 pf-left-0 pf-z-0 pf-z-10 pf-z-20 pf-z-40 pf-z-60 pf-overflow-auto pf-overflow-x-auto pf-overflow-visible pf-object-cover pf-object-contain pf-aspect-square pf-aspect-video

Typography Helpers

Sets text-transform, letter-spacing, text-decoration, text-underline-offset, font-style… — 13 classes.

pf-uppercase pf-capitalize pf-normal-case pf-underline pf-no-underline pf-italic pf-tabular pf-leading-tight pf-leading-snug pf-leading-normal pf-truncate pf-clamp-2 pf-clamp-3

Borders, Opacity, Cursor

Class	Declares	Applies when
`pf-border-0`	border	—
`pf-border-t`	border-top	—
`pf-border-b`	border-bottom	—
`pf-round-none`	border-radius	—
`pf-round-sm`	border-radius	—
`pf-circle`	border-radius	—
`pf-opacity-50`	opacity	—
`pf-opacity-75`	opacity	—
`pf-cursor-pointer`	cursor	—
`pf-select-none`	user-select	—
`pf-pointer-none`	pointer-events	—

Depth, Motion And Transforms

Class	Declares	Applies when
`pf-shadow-sm`	box-shadow	—
`pf-shadow`	box-shadow	—
`pf-shadow-lg`	box-shadow	—
`pf-shadow-none`	box-shadow	—
`pf-ring`	box-shadow	—
`pf-transition`	transition	—
`pf-transition-colors`	transition	—
`pf-hover-lift`	transition, transform, box-shadow	@media (hover: hover)

Divide And Rules

Class	Declares	Applies when
`pf-divide-y`	border-top	—
`pf-divide-x`	border-inline-start	—
`pf-vr`	width, align-self, min-height, background, flex	—

Container Queries

Class	Declares	Applies when
`pf-container-q`	container-type	—
`pf-cq-row`	flex-direction, align-items	@container (min-width: 30rem)
`pf-cq-2`	display, grid-template-columns	@container (min-width: 30rem)
`pf-cq-side`	display, grid-template-columns, align-items	@container (min-width: 30rem)
`pf-cq-show`	display	@container (min-width: 30rem)
`pf-cq-hide`	display	@container (min-width: 30rem)
`pf-cq-3`	display, grid-template-columns	@container (min-width: 48rem)
`pf-cq-4`	display, grid-template-columns	@container (min-width: 48rem)

Responsive Variants

Sets display, flex-direction — 14 classes.

pf-md-hidden pf-md-block pf-md-flex pf-md-grid-d pf-md-inline-flex pf-md-flex-col pf-md-flex-row pf-lg-hidden pf-lg-block pf-lg-flex pf-lg-grid-d pf-lg-inline-flex pf-lg-flex-col pf-lg-flex-row

Scroll Reveal

Sets animation, animation-timeline, animation-range, animation-name, display… — 41 classes.

pf-reveal pf-reveal--left pf-reveal--right pf-reveal--zoom pf-reveal-soft pf-hide-mobile pf-hide-desktop pf-print-only pf-nav pf-topbar pf-footer pf-cta pf-skip pf-totop pf-sidenav pf-bottombar pf-drawer pf-pagination pf-tabs__label pf-scroller pf-breadcrumb pf-code__copy pf-tabs__panel pf-accordion pf-prose pf-btn pf-card pf-plan pf-alert pf-code pf-table-wrap pf-alert__title pf-section pf-container pf-container--wide pf-container--narrow pf-hero pf-grid pf-split pf-shell pf-no-print

Variants

Curated state variants without a build step: hover, focus, focus-within, active, group-hover and group-focus.

PolyFishCSS-Variants.css · 20 public classes

Variants

Sets background-color, color, border-color, text-decoration-line, text-underline-offset… — 20 classes.

pf-hover-bg-surface pf-hover-bg-accent pf-hover-fg-accent pf-hover-border-accent pf-hover-border-strong pf-hover-underline pf-hover-shadow-lg pf-hover-lift pf-focus-ring pf-focus-within-ring pf-focus-within-border-accent pf-active-sink pf-active-scale-down pf-group pf-group-hover-fg-accent pf-group-hover-fg-text pf-group-hover-lift pf-group-focus-fg-accent pf-group-focus-fg-text pf-group-focus-lift

Fonts

Self-hosted @font-face declarations and metric-matched fallback faces. No classes.

PolyFishCSS-Fonts.css · element selectors only