Reference – Override classes

A reference list of all override classes provided by the design system, grouped by category.

You can change the default appearance of components by using override classes, sometimes known as "utility classes".

Override classes provided by the design system all have the prefix nhsuk-u-.

Spacing

Spacing override classes control the margin and padding on elements. They come in 2 types: responsive and static. See the spacing styles page for guidance on when and how to use spacing.

Responsive spacing

Responsive spacing classes apply different values on mobile and on tablet and larger screens. You can replace 3 with any number from 0 to 9.

nhsuk-u-margin-3: Responsive margin on all sides
nhsuk-u-margin-top-3: Responsive margin on the top
nhsuk-u-margin-right-3: Responsive margin on the right
nhsuk-u-margin-bottom-3: Responsive margin on the bottom
nhsuk-u-margin-left-3: Responsive margin on the left
nhsuk-u-padding-3: Responsive padding on all sides
nhsuk-u-padding-top-3: Responsive padding on the top
nhsuk-u-padding-right-3: Responsive padding on the right
nhsuk-u-padding-bottom-3: Responsive padding on the bottom
nhsuk-u-padding-left-3: Responsive padding on the left

Static spacing

Static spacing classes apply a fixed value at all screen sizes. You can replace 3 with any number from 0 to 9.

nhsuk-u-static-margin-3: Fixed margin on all sides
nhsuk-u-static-margin-top-3: Fixed margin on the top
nhsuk-u-static-margin-right-3: Fixed margin on the right
nhsuk-u-static-margin-bottom-3: Fixed margin on the bottom
nhsuk-u-static-margin-left-3: Fixed margin on the left
nhsuk-u-static-padding-3: Fixed padding on all sides
nhsuk-u-static-padding-top-3: Fixed padding on the top
nhsuk-u-static-padding-right-3: Fixed padding on the right
nhsuk-u-static-padding-bottom-3: Fixed padding on the bottom
nhsuk-u-static-padding-left-3: Fixed padding on the left

Layout

See the layout styles page for guidance on using the grid system.

Grid widths

These grid width override classes are deprecated and will be removed in version 11. Use the grid classes starting with nhsuk-grid-column- instead.

nhsuk-u-one-half: one-half width at all screen sizes
nhsuk-u-one-third: one-third width at all screen sizes
nhsuk-u-two-thirds: two-thirds width at all screen sizes
nhsuk-u-one-quarter: one-quarter width at all screen sizes
nhsuk-u-three-quarters: three-quarters width at all screen sizes
nhsuk-u-one-half-tablet: one-half width on tablet (641px) and above, full width below
nhsuk-u-one-third-tablet: one-third width on tablet (641px) and above, full width below
nhsuk-u-two-thirds-tablet: two-thirds width on tablet (641px) and above, full width below
nhsuk-u-one-quarter-tablet: one-quarter width on tablet (641px) and above, full width below
nhsuk-u-three-quarters-tablet: three-quarters width on tablet (641px) and above, full width below

Widths

Use these classes to constrain the width of text inputs, table columns or other components on tablet (641px) and above

See fluid width inputs in the text input component for more detail.

nhsuk-u-width-full: full width at all screen sizes
nhsuk-u-width-three-quarters: three-quarters width on tablet (641px) and above, full width below
nhsuk-u-width-two-thirds: two-thirds width on tablet (641px) and above, full width below
nhsuk-u-width-one-half: one-half width on tablet (641px) and above, full width below
nhsuk-u-width-one-third: one-third width on tablet (641px) and above, full width below
nhsuk-u-width-one-quarter: one-quarter width on tablet (641px) and above, full width below

Reading width

See layout utility classes for guidance on when to use reading width.

nhsuk-u-reading-width: Constrains the maximum width of a block of text to an optimal reading width

Float

nhsuk-u-float-left: Floats an element to the left
nhsuk-u-float-right: Floats an element to the right

Clearfix

nhsuk-u-clear: Clears floated children so the parent element contains them

Colour

See the colour styles page for guidance on using colour.

nhsuk-u-secondary-text-colour: Secondary (grey) text colour

Typography

See the typography styles page for guidance on type sizes, weights and styles.

nhsuk-u-font-size-14: 14px font size on tablet (641px) and above, 12px font size below
nhsuk-u-font-size-16: 16px font size on tablet (641px) and above, 14px font size below
nhsuk-u-font-size-19: 19px font size on tablet (641px) and above, 16px font size below. Default for body text.
nhsuk-u-font-size-22: 22px font size on tablet (641px) and above, 19px font size below.
nhsuk-u-font-size-26: 26px font size on tablet (641px) and above, 22px font size below.
nhsuk-u-font-size-36: 36px font size on tablet (641px) and above, 27px font size below.
nhsuk-u-font-size-48: 48px font size on tablet (641px) and above, 32px font size below.
nhsuk-u-font-size-64: 64px font size on tablet (641px) and above, 48px font size below.

Font weight

See the guidance on bold, italics and underlining in the content guide.

nhsuk-u-font-weight-bold: Bold font weight
nhsuk-u-font-weight-normal: Normal (regular) font weight

Font family

nhsuk-u-font-code: Code font family
nhsuk-u-font-monospace: Monospace font family

Text alignment

See text alignment guidance on typography page.

nhsuk-u-text-align-left: Aligns text to the left
nhsuk-u-text-align-centre: Centres text
nhsuk-u-text-align-right: Aligns text to the right

Other text utilities

See breaking up long words on typography page.

nhsuk-u-text-break-word: Forces long words or URLs to break onto a new line
nhsuk-u-nowrap: Prevents text from wrapping onto multiple lines below tablet (641px) width

Display

nhsuk-u-display-block: Sets display to block
nhsuk-u-display-inline: Sets display to inline
nhsuk-u-display-inline-block: Sets display to inline-block
nhsuk-u-display-none: Hides an element
nhsuk-u-display-none-print: Hides an element when printing
nhsuk-u-display-none-from-mobile: Hides an element below mobile (320px) width
nhsuk-u-display-none-from-tablet: Hides an element below tablet (641px) width
nhsuk-u-display-none-from-desktop: Hides an element below desktop (769px) width
nhsuk-u-display-none-from-large-desktop: Hides an element below large desktop (990px) width
nhsuk-u-display-none-from-mobile: Hides an element on mobile (320px) and above
nhsuk-u-display-none-from-tablet: Hides an element on tablet (641px) and above
nhsuk-u-display-none-from-desktop: Hides an element on desktop (769px) and above
nhsuk-u-display-none-from-large-desktop: Hides an element on large desktop (990px) and above

Visibility

nhsuk-u-visually-hidden: Hides an element visually but keeps it available to screen readers
nhsuk-u-visually-hidden-focusable: Hides an element visually but reveals it when it receives keyboard focus

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feed back or share insights on GitHub

Read more about how to feed back or share insights.

If you have any questions, get in touch with the service manual team.

Updated: August 2026