Breakpoints

Stable

Breakpoint tokens are used to keep services and products using HDS consistent across all screen sizes.

Usage
Tokens

Tokens

**Table 1**: Breakpoint tokens
CSS variable	SASS variable	PX value	Padding	Scaling method
`--breakpoint-xs`	`$breakpoint-xs`	≥ 320px	16px	Scale content
`--breakpoint-s`	`$breakpoint-s`	≥ 576px	16px	Scale content
`--breakpoint-m`	`$breakpoint-m`	≥ 768px	24px	Scale content
`--breakpoint-l`	`$breakpoint-l`	≥ 992px	24px	Scale content
`--breakpoint-xl`	`$breakpoint-xl`	≥ 1248px	24px, scales	Scale padding

Container width tokens have changed in HDS 2.0!

Starting in HDS version 2.0, only the container-width-xl token is used as the maximum width of the content container. Other container width tokens are not used anymore - the content container will take all space available below the content-width-xl token. The rest of the tokens will are now deprecated and will be removed in a future update.

**Table 2**: Container width tokens
CSS variable	SASS variable	PX value
`--container-width-xl`	`$container-width-xl`	1200px

**Table 3**: Container width tokens (deprecated)
CSS variable	SASS variable	PX value
`--container-width-xs`	`$container-width-xs`	288px
`--container-width-s`	`$container-width-s`	544px
`--container-width-m`	`$container-width-m`	720px
`--container-width-l`	`$container-width-l`	944px