Home
Box
View more Box examples
css-class
default
Center
View more Center examples
css-class
default
intrinsically-centered
stack-of-content
Cluster
View more Cluster examples
cluster-list
css-class
default
flex-grow
focusable-child-elements
items-with-different-heights
no-flexbox-gap
two-clusters-combined
Cover
View more Cover examples
css-class
with-one-item
with-three-items
Frame
View more Frame examples
css-class
with-a-video
with-an-image
with-placeholder-content
FullBleed
View more FullBleed examples
css-class
default
with-text-and-images
Grid
View more Grid examples
css-class
default
grid-list
Sidebar
View more Sidebar examples
css-class
default
no-flexbox-gap
with-content
Stack
View more Stack examples
css-class
default
in-sidebar
no-flexbox-gap
stack-list
with-nested-stack
with-split-after-and-extra-item
with-split-after
Switcher
View more Switcher examples
css-class
default
no-flexbox-gap
switcher-list
with-eight-items
with-seven-items
Sidebar
Props
sidebarContentMinWidth:
25%
50%
75%
100%
sidebarOnRight:
sidebarSpace:
0
var(--s-4)
var(--s-3)
var(--s-2)
var(--s-1)
var(--s0)
var(--s1)
var(--s2)
var(--s3)
var(--s4)
var(--s5)
var(--s6)
var(--s7)
var(--s8)
sidebarWidth:
inherit
20ch
30ch
var(--measure-small)
var(--measure)
var(--measure-big)
alignItems:
flex-start
flex-end
center
baseline
stretch
Example
Sidebar
Main content