In progress

HUDS components can use 5 breakpoints from narrow to overwide. They are accessible through css variables and sass variables.

# Media queries

The default way of applying the media queries is inside your scss file:

.some-class {
  @include breakpoint($narrow) {
    width: 20px;

# Usage

Max-width Description Css variable Sass variable
30rem or 480px Mobile view var(--breakpoint-narrow) $narrow
48rem or 768px Tablet view var(--breakpoint-medium) $medium
64rem or 1024px Desktop view var(--breakpoint-wide) $wide
80rem or 1280px Large Desktop view var(--breakpoint-extrawide) $extrawide
90rem or 1440px Huge Desktop view var(--breakpoint-overwide) $overwide