Layout Classes

This page documents the CSS utility classes available for controlling layout in VUI. These classes provide responsive containers, width and height utilities, display properties, and flexbox controls to help you build layouts quickly and consistently.

Container

Container classes provide responsive containers with different maximum widths and consistent padding.

Extra small container
Small container
Medium container
Large container
Default container
Extra large container
Extra extra large container
Full width container

Width

Width utility classes control element width using percentage values. These classes are generated in increments of 5% from 0% to 100%, plus an additional utility class.

Pattern: .w-{percentage} where percentage ranges from 0 to 100 in increments of 5.

Width 0%
Width 5%
Width 10%
Width 15%
Width 20%
Width 25%
Width 30%
Width 35%
Width 40%
Width 45%
Width 50%
Width 55%
Width 60%
Width 65%
Width 70%
Width 75%
Width 80%
Width 85%
Width 90%
Width 95%
Width 100%
Width auto

Height

Height utility classes control element height using percentage values. These classes follow the same pattern as width classes, generated in increments of 5% from 0% to 100%.

Pattern: .h-{percentage} where percentage ranges from 0 to 100 in increments of 5.

Height 0%
Height 5%
Height 10%
Height 15%
Height 20%
Height 25%
Height 30%
Height 35%
Height 40%
Height 45%
Height 50%
Height 55%
Height 60%
Height 65%
Height 70%
Height 75%
Height 80%
Height 85%
Height 90%
Height 95%
Height 100%

Display

Classes for controlling the display property of elements.

Block display display: block
Inline block display display: inline-block
Inline display display: inline
Contents display display: contents

Flex

Classes for flexbox layout control. You should almost always use the Flex component.

Flex 1 The highlighted element has a flex: 1 applied to it. This makes the element grow to fill available space in a flex container.
Flex shrink Prevents element from shrinking when flex contains a lot of content.