Base Classes

Base classes extract shared CSS properties into multi-selector rules in base-classes.css. Components automatically inherit these styles through their class names — no markup changes needed. Component stylesheets contain only component-specific overrides.

Form Control Base

Shared by all text-entry form controls. Use class="flex-control" on custom elements to opt in.

Selector	Component
`.flex-control`	Opt-in for custom elements
`.flex-input`	Text Input
`.flex-select`	Select
`.flex-textarea`	Textarea

Properties provided: font-family, font-size, line-height, color, background-color, border, border-radius, appearance, display, width, max-width, padding, margin-top. Plus focus-visible, disabled, error, and success state styles.

Typography Base

Shared by text-bearing USWDS elements. Use class="flex-prose" on containers to opt in.

Selector	Component
`.flex-prose`	Opt-in for containers
`.flex-label`	Label
`.flex-error-message`	Error Message
`.flex-legend`	Legend (fieldset)

Properties provided: font-family, font-size, line-height, color.

Choice Input Label

Shared by checkbox and radio label elements. Provides typography, cursor, display, font-weight, and position.

Selector	Component
`.flex-checkbox__label`	Checkbox
`.flex-radio__label`	Radio

Properties provided: font-family, font-size, line-height, color, cursor, display, font-weight, position. Plus focus-visible and disabled state styles.

Alert Icon Base

Shared pseudo-element styles for icon display in alert components.

Selector	Component
`.flex-alert::before`	Alert
`.flex-site-alert__body::before`	Site Alert

Properties provided: content, position, background-color, mask-size, mask-repeat, -webkit-mask-size, -webkit-mask-repeat.