Other type of variables, for example default border-radius or breakpoints.
Override variables
These are the default typographic style, which you can override them to match your own design system. See Usage for more information on how to override variables.
List of variables
Breakpoints
| Name | Value | Description |
|---|
$desktop-lg | 1440px | Large desktop breakpoint |
$desktop | 1280px | Desktop breakpoint |
$laptop | 1024px | Laptop breakpoint |
$tablet | 768px | Tablet breakpoint |
$mobile | 568px | Mobile breakpoint |
$mobile-sm | 350px | Small mobile breakpoint |
Box shadow
| Name | Value |
|---|
$box-shadow | 0 0 .5rem 0 rgba($text, 0.2) |
Transition
| Name | Value |
|---|
$transition-md | 0.4s ease 0s |
$transition-lg | 0.8s ease 0s |
Border radius
| Name | Value |
|---|
$border-radius-sm | .25rem |
$border-radius-md | .5rem |
$border-radius-lg | 1rem |
Spacing
| Name | Value | Description |
|---|
$col | calc(100%/12) | Single column width (12-column grid) |
$max-width-subtitle | 27.5rem | Max width for subtitles |
$max-width-editor | 40rem | Max width for editor content |
$max-width-form | 40rem | Max width for forms |
Components
| Name | Value | Description |
|---|
$navbar-height | 4rem | Default navbar height |
$navbar-height-sm | 3rem | Compact navbar height |
$nav-item | 1rem | Navigation item spacing |
$input-height | 2.5rem | Input field height |
$checkbox-width | 1.5rem | Checkbox/radio width |