The overflowing is a particular problem with the panel component since it uses white text: when the text overflows the container, it is invisible on the white (page) background. When the text in our other components overflow, the user might have to scroll horizontally to view it but the text remains legible.

Get colour

Converts a colour with potential float values for its RGB channels into hexadecimal notation where possible (e.g. no alpha transparency)

This ensures the colour is rendered properly by Safari < 12

Make a colour darker by mixing it with black

Make a colour lighter by mixing it with white

Width container mixin

Used to create page width and custom width container classes.

Brand colour

Text colour

Text colour (reverse)

Template background colour

Used by components that want to give the illusion of extending the template background (such as the footer).

Body background colour

Card background colour

Text colour for print media

Use 'true black' to avoid printers using colour ink to print body text

Secondary text colour

Used in for example 'muted' text and help text.

Focus colour

Used for outline (and background, where appropriate) when interactive elements (links, form controls) have keyboard focus.

Focused text colour

Ensure that the contrast between the text and background colour passes WCAG Level AA contrast requirements.

Error colour

Used to highlight error messages and form controls in an error state

Success colour

Used to highlight success messages and banners

Border colour

Used in for example borders, separators, rules and keylines.

Border hover colour

Secondary border colour

Form border colour

Used for form inputs and controls

Input hover colour

Used for hover states on form controls

Form element background colour

Link colour

Visited link colour

Link hover colour

Active link colour

Button background colour

Button text colour

Button background colour (hover)

Button background colour (active)

Button shadow colour

Secondary button background colour

Secondary button (solid background) background colour

Secondary button border colour

Secondary button text colour

Secondary button background colour (hover)

Secondary button background colour (active)

Secondary button shadow colour

Reverse button background colour

Reverse button text colour

Reverse button background colour (hover)

Reverse button background colour (active)

Reverse button shadow colour

Warning button background colour

Warning button background colour (hover)

Warning button background colour (active)

Warning button shadow colour

Login button background colour

Login button background colour (hover)

Login button background colour (active)

Login button shadow colour

NHS colour palette

Fonts

1. Fallback fonts if Frutiger fails to load

Font sizing and spacing

Icon default sizing

Grid spacing

Map of grid column widths

Standard border width

Form control border width

Border width of focus outline

Hover width for form controls with a hover state

Breakpoint definitions

Show active breakpoint in top-right corner.

Only use this during local development.

Single point spacing variables

Responsive spacing map

These definitions are used to generate responsive spacing that adapts according to the breakpoints (see 'tools/spacing'). These maps should be used wherever possible to standardise responsive spacing.

You can define different behaviour on tablet and desktop. The 'null' breakpoint is for mobile.

Access responsive spacing with nhsuk-responsive-margin or nhsuk-responsive-padding mixins.

Responsive typography font map

This is used to generate responsive typography that adapts according to the breakpoints.

Font size and font weight can be defined for each breakpoint. You can define different behaviour on tablet and desktop. The 'null' breakpoint is for mobile.

Line-heights will automatically be converted from pixel measurements into relative values. For example, with a font-size of 16px and a line-height of 24px, the line-height will be converted to 1.5 before output.

You can also specify a separate font size and line height for print media.

Suppressed warnings map

This map is used to determine which deprecation warnings to not show to users when compiling sass. This is in place for codebases that do not have the necessary capacity to upgrade and remove the deprecation, particularly if the deprecation is significant. For example, the removal of mixins and functions that were previously available to users of frontend.

You can add to this map and define which warnings to suppress by appending to it using the warning key, found in the warning message. For example:

Warnings

Acts as a wrapper for the built in @warn sass function

We use this instead of using @warn for 3 reasons:

• To check if a warning is being suppressed through $nhsuk-suppressed-warnings, in which case we don't call @warn and printing the warning to the user
• To format the passed warning $message with the warning key at the end
• To prevent duplicate warnings by adding the passed $key to $nhsuk-suppressed-warnings after @warn is called to ensure it only runs once per sass compilation

List of modules which have already been exported

Export module

Ensure that the modules of CSS that we define throughout frontend are only included in the generated CSS once, no matter how many times they are imported across the individual components.

Focused text

Provides an outline to clearly indicate when the target element is focused. Used for interactive text-based elements.

Focused input (form elements)

Provides an additional outline and border to clearly indicate when the target element has focus. Used for interactive input-based elements such as text inputs.

Focused radio input (form element)

Provides an additional outline and border to clearly indicate when the target element has focus. Used by radios.

Focused checkbox input (form element)

Provides an additional outline and border to clearly indicate when the target element has focus. Used by checkbox.

Focused button

Provides an additional outline and background to clearly indicate when the target element has focus. Used for buttons.

Focused box

Provides an outline to clearly indicate when the target element is focused. Unlike nhsuk-focused-text, which only draws an underline below the element, nhsuk-focused-box draws an outline around all sides of the element. Best used for non-text content contained within links.

Generate grid column styles

Creates a grid column with standard gutter between the columns.

Grid widths are defined in the $nhsuk-grid-widths map.

By default the column width changes from 100% to specified width at the 'desktop' breakpoint, but other breakpoints can be specified using the $at parameter.

Link styling with colour overrides

Default link styling

White link styling, used in hero component, and in the .nhsuk-link--reverse modifier class.

Default link visited only styling

Default link hover only styling

Default link focus only styling

Default link active only styling

Success link styles

Makes links use the success colour. The link will darken if it's active or a user hovers their cursor over it.

If you use this mixin in a component you must also include the nhsuk-link-style-default mixin in order to get the focus state.

No visited state link mixin

Used in cases where it is not helpful to distinguish between visited and non-visited links.

For example, navigation links to pages with dynamic content like admin dashboards. The content on the page is changing all the time, so the fact that you’ve visited it before is not important.

If you use this mixin in a component you must also include the nhsuk-link-style-default mixin in order to get the focus state.

Text link styles

Makes links use the primary text colour, in all states. Use this mixin for navigation components, such as breadcrumbs or the back link.

Image link styles

Prepares and provides the focus state for links that only contain images with no accompanying text.

Clearfix mixin

Reading width mixin, add a maximum width to large pieces of content

Hide an element visually, but have it available for screen readers

Hide an element visually, but have it available for screen readers whilst allowing the element to be focused when navigated to via the keyboard (e.g. for the skip link)

Top and bottom margin mixin, remove the top and bottom margin spacing

Panel mixin

See components/_panel

Panel with label mixin, inherits panel styling and removes padding top for the label positioning

Heading label mixin, adds a tab heading to warning callout, do and don't lists and panel

1. Background colour to be set on the @include.
2. Ensures heading appears separate to the body text in high contrast mode.
3. Text colour to be set on the @include.
4. Display inline-block so it does not take up the full width.
5. Negative left margin aligns the heading to the box.
6. Top positioning set to minus to make heading sit just outside the box.

Care card mixin, used for creating different coloured care cards

Print colour mixin, sets the text print colour warning callout, do and don't lists and panels

Print hide mixin, hides the element from print

Flex mixin

Flex item mixin

Remove margin mobile mixin

Removes left and right margin at tablet breakpoint

NHS logo size helper

Saves duplicating the code for when using the logo as a link. Used in the header and footer.

Media query

This is a currently a wrapper for sass-mq - abstracted so that we can replace it in the future if we so choose.

Due to Sass deprecated 'misplaced-rest' named argument warnings, all arguments must be passed to maintain nhsuk-media-query(950px) support.

Arrow mixin

Generate Arrows (triangles) by using a mix of transparent (1) and coloured borders. The coloured borders inherit the text colour of the element (2).

Ensure the arrow is rendered correctly if browser colours are overridden by providing a clip path (3). Without this the transparent borders are overridden to become visible which results in a square.

We need both because older browsers do not support clip-path.

Chevron mixin

Generate chevron by using a box with borders on two sides, then rotating it.

Responsive spacing

Adds responsive spacing (either padding or margin, depending on $property) by fetching a 'spacing map' from the responsive spacing scale, which defines different spacing values at different breakpoints.

To generate responsive spacing, use 'nhsuk-responsive-margin' or 'nhsuk-responsive-padding' mixins

Responsive margin

Adds responsive margin by fetching a 'spacing map' from the responsive spacing scale, which defines different spacing values at different breakpoints. Wrapper for the nhsuk-responsive-spacing mixin.

Responsive padding

Adds responsive padding by fetching a 'spacing map' from the responsive spacing scale, which defines different spacing values at different breakpoints. Wrapper for the nhsuk-responsive-spacing mixin.

Text colour

Sets the text colour, including a suitable override for print.

Normal font weight

Bold font weight

Word break helper

Forcibly breaks long words that lack spaces, such as email addresses, across multiple lines when they wouldn't otherwise fit.

Font size and line height helper

Takes a point from the responsive 'font map' as an argument (the size as it would appear on tablet and above), and uses it to create font-size and line-height declarations for different breakpoints, and print.

Example font map:

19: (
  null: (
    font-size: 16px,
    line-height: 20px
  ),
  tablet: (
    font-size: 19px,
    line-height: 25px
  ),
  print: (
    font-size: 14pt,
    line-height: 1.15
  )
);

Font helper

Convert pixels to em

A quick way to convert px into em

Convert pixels to rem

A quick way to convert px into rem

Get the size (△↕) of chevron, from base to tip, given a certain font size

Grid width percentage

Single point spacing

Returns measurement corresponding to the spacing point requested.

Line height

Convert line-heights specified in pixels into a relative value, unless they are already unit-less (and thus already treated as relative values) or the units do not match the units used for the font size.

Breakpoint list

Name your breakpoints in a way that creates a ubiquitous language across team members. It will improve communication between stakeholders, designers, developers, and testers.

Show breakpoints in the top right corner

If you want to display the currently active breakpoint in the top right corner of your site during development, add the breakpoints to this list, ordered by width. For example: (mobile, tablet, desktop).

Customize the media type (for example: @media screen or @media print) By default sass-mq uses an "all" media type (@media all and …)

If you want to overried the media type, you can use this option.

Convert pixels to ems

Get a breakpoint's width

Media Query mixin

Add a breakpoint

Show the active breakpoint in the top right corner of the viewport