Serif text stack
Monospace text stack (same as <code>)
10px
12px
14px (default body text)
15px
16px
18px
20px
24px
28px
32px
Accent / primary
Success (green)
Danger (red)
Warning (yellow/orange)
Info (cyan/blue)
Slot 1
Slot 2
Start-aligned (left in LTR, right in RTL — logical)
Center-aligned
End-aligned (right in LTR, left in RTL — logical)
Won't wrap, even in narrow containers.
A long line that will be clipped with an ellipsis…
No margin
4px margin
16px margin
32px margin
80px margin (largest)
margin-top 16px
margin-bottom 16px
margin-left/right 16px
margin-top/bottom 16px
Horizontally centred block
Pushed to the reading-end side (right in LTR)
16px padding on all sides
32px horizontal, 16px vertical
margin-inline-start: $spacing-base
margin-inline-end: $spacing-md
padding-inline-start: $spacing-lg
padding-inline-end: $spacing-sm
margin-inline-start: auto (pushes to end)
Semantic xs
Semantic sm
Semantic md
Semantic base
Semantic lg
Semantic xl
Flex with semantic small gap
Flex with base gap
Flex with large gap
4px gap
8px gap
20px gap
Different vertical / horizontal gap
Hidden (display: none)
inline
inline-block
block
flex
inline-flex
flex-direction: row
flex-direction: column
Allow wrapping
No wrap (may overflow)
start
center
end
space-between
space-around
start
center
end
baseline
stretch
Default
align-self: flex-start
align-self: center
align-self: flex-end
align-self: stretch
align-self: baseline
flex: 1 1 auto (fill available space)
flex-grow: 1
flex-shrink: 0 (don't shrink)
flex: 1 1 0% (equal share, ignores content)
flex: 1 1 auto (grow + shrink, respects content)
flex: none
flex: 0 1 auto (default)
25%
50%
75%
100%
auto
1/2
1/3
2/3
1/4
3/4
Locked 50% — doesn't collapse
Locked 1/3
25%
50%
100%
height: 100% (same as h-100)
height: 100vh
min-height: 100%
min-height: 100vh
max-height: 100%
max-height: 100vh
min-width 50%
max-width 75%
min-height 25%
max-height 75%
8rem wide
20rem wide
min-width 8rem
max-width 15rem
5rem tall
30rem tall
min-height 10rem
max-height 20rem
min-height 2rem
min-height 12rem
min-height 30rem
height 20rem (fixed, pairs with overflow-y-auto)
max-height 25rem (grows until, then scrolls)
auto both axes
horizontal scroll only
vertical scroll only
clipped
shown outside container
Chromium: floating scrollbar
Chromium: floating y-scrollbar
Locks scroll while keeping scrollbar gutter
pointer
help
wait
not-allowed
text
move
default
grab
grabbing
zoom-in
zoom-out
static
relative
absolute
fixed
sticky
border on all sides (1px, theme-border-colour)
top only
bottom only
right only
left only
no border
no top border
solid (default)
dashed
dotted
none
default radius
large radius
50% (circle / pill)
no radius
top corners
bottom corners
left corners
right corners
none
subtle
default
pronounced
Background slot 1
Text slot 3
Border slot 5
Accent-coloured link (underline on hover)
Item 1
Item 2
Welcome
Get started by creating your first project.