Utilities

Utility classes are single-purpose CSS classes that apply one specific style — like hiding an element, adding spacing, or controlling layout direction. They're available through @nysds/styles and complement NYSDS components by handling the layout and spacing between them.

All utility classes use the nys- prefix. Most support responsive variants that let you apply styles at specific breakpoints.

Categories

• Display — Control element visibility and display behavior
• Flexbox — Build flexible one-dimensional layouts with alignment and ordering
• Float — Float elements left or right within a container
• Grid — Structure content with a responsive 12-column flexbox grid
• Margin & Padding — Add consistent spacing inside and outside elements
• Opacity — Control element transparency
• Overflow — Manage content overflow and scrolling behavior
• Position — Control element positioning (static, relative, absolute, fixed, sticky)
• Responsive — Apply utility classes at specific screen-width breakpoints
• Typography — Apply font size, weight, and style presets
• Z-index — Control stacking order of overlapping elements