ZUI application styles

Layout

zui shell-content-wrapper (default)

Default layout has a max-width of 1600px and is horizontally centered.

Typography

Hero header

First header

Second header

Third header

Fourth header

Fifth header
Sixth header

First header element only

Second header element only

Third header element only

zui shell-content-wrapper--full (full-width)

Full layout has no max-width limit and spans the entire width of its parent container.

zui full shell-content-wrapper (full-width)

Full layout has no max-width limit and spans the entire width of its parent container.

zui-layout--full (full-width) soon to be deprecated

Full layout has no max-width limit and spans the entire width of its parent container.

zui shell-content-wrapper--slim (width specifically for text-heavy layouts)

Copy layout has a max-width of 960px so it is easier to read a copy-heavy page.

Class name and max-width TBD. This is still in testing! Don't actually use!

zui slim shell-content-wrapper (width specifically for text-heavy layouts)

Copy layout has a max-width of 960px so it is easier to read a copy-heavy page.

Class name and max-width TBD. This is still in testing! Don't actually use!

zui-layout--slim (width specifically for text-heavy layouts) soon to be deprecated

Copy layout has a max-width of 960px so it is easier to read a copy-heavy page.

Class name and max-width TBD. This is still in testing! Don't actually use!

Typography-related styles

Anchor tag

Click here for more information

Line break