glass

Contract: docs/contract/components/glass.md in the repository. Every fixture below renders in light and dark.

section · light

section · dark

article · light

article · dark

document · light

document · dark

feature · light

feature · dark

soft · light

soft · dark

Desktop blur option

For measured Safari backdrop-layer pressure on long pages, pass glassBlur: "none" to htmlAttributes. It emits data-wtk-glass-blur="none" on html; leave it unset for the default. At widths of at least 48.0625em, card and contents-rail filters turn off while the other surface styles stay unchanged. Phone widths and the header, settings, actions menu and carousel stay unchanged.

Rail and forty panes fixture (forty .wtk-glass panes).