Version
has been released! Read the upgrade guide

Breakpoints

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

Breakpoints

The Royal Navy Design System provides default breakpoint sizes to use in your applications.

SizeBreakpoint
root0
xs576px
s768px
m1024px
l1200px
xl1400px
xxl1600px

Using Breakpoints

The Design System has two methods available for using the default breakpoints in your application.

1Inside your SCSS

To use breakpoints inside your SCSS, the Design System provides mixins to help:

1@mixin breakpoint('xs') {
2 // Styles here
3}
4
5// Result
6@media only screen and (min-width: 576px) {
7 // Styles here
8}

Utility classes

The Toolkit provides Breakpoints for each Utility class. Simply pre-pend a Utility class with a breakpoint size.

1.m:rn_mt-4
2.l:rn_mt-10

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright