Breakpoints

Usage

HDS includes tokenized values for both breakpoints and a maximum container width. Breakpoint tokens can be also used alongside HDS grid guidelines in order to create consistent designs and implementations.

HDS offers helpful utilities for breakpoint handling:

• Container component which follows breakpoint and container width tokens automatically. It is recommended to use it if possible. For more info and examples, see Container - React documentation and Container - Core documentation.
• Hooks for React components; useMediaQueryLessThan and useMediaQueryGreaterThan hooks listen to browser window resize events and return a boolean value when the window size is over or under the given breakpoint parameter. For more information see the hooks' code, and for examples, see the Header component's source code.

Principles

• Always use token of the same level for both the breakpoint and container width. This ensures consistency across all services using HDS breakpoint tokens. Read more about this in the breakpoint usage section.
• Aim to provide all breakpoints listed in HDS tokens in your service. This way you ensure your service is usable with every common screen width.
• For best results, test your designs and implementations at the edge of each HDS breakpoint.
• HDS uses a simple method to scale content when the screen size changes. Below the --container-width-xl the content container always takes all available space.
  • It is recommended to use scaling methods HDS suggests for each breakpoint (see Breakpoints token table). However, it is allowed to use different scaling methods if it works better for the service.

Accessibility

• Carefully test your implementation at different breakpoints - especially at the edge values of a breakpoint.
• Pay extra attention how your service behaves if browser zoom functionality is used. Read more about the WCAG requirements considering reflow.

Using breakpoint tokens

The breakpoint tokens are divided into two sets;

• Breakpoint tokens define exact widths (in pixels) where the next breakpoint comes into effect.
• Container width token defines maximum container width.

When breakpoints change the left and right padding of the container changes. It is recommended to use the provided padding values because they match with HDS Footer paddings. You can find these paddings on the HDS Breakpoints tokens tab.

The maximum content container width is always --container-width-xl (1200px). When the viewport width is below this value, the content container always takes all available space. Note that the Header component is an exception with maximum width of 1440 pixels so it should not be placed inside the grid container.