Media WebUI

Width Classes

Basic Widths

Class
Width
width-auto
auto
width-xxs
0.625rem
width-xxs-xs
0.938rem
width-xs
1.25rem
width-xs-sm
1.875rem
width-sm
2.5rem
width-sm-md
3.75rem
width-md
5rem
width-md-lg
7.5rem
width-lg
10rem
width-lg-xl
15rem
width-xl
20rem
width-xl-xxl
30rem
width-xxl
40rem

Relative Widths

Class
Width
width-one-quarter
25%
width-one-third
33.33333333%
width-one-half
50%
width-two-thirds
66.66666666%
width-three-quarters
75%
width-full
100%
width-viewport
100vw
width-adjacent-xxs
100% - 0.625rem
width-adjacent-xxs-xs
100% - 0.938rem
width-adjacent-xs
100% - 1.25rem
width-adjacent-xs-sm
100% - 1.875rem
width-adjacent-sm
100% - 2.5rem
width-adjacent-sm-md
100% - 3.75rem
width-adjacent-md
100% - 5rem
width-adjacent-md-lg
100% - 7.5rem
width-adjacent-lg
100% - 10rem
width-adjacent-lg-xl
100% - 15rem
width-adjacent-xl
100% - 20rem
width-adjacent-xl-xxl
100% - 30rem
width-adjacent-xxl
100% - 40rem

Form Control Widths

Class
Width
width-control-xs
1.5rem
width-control-sm
1.75rem
width-control-md
2.125rem
width-control-lg
2.375rem
width-control-xl
2.75rem
Width Sizing Classes

Sizing classes are designed to compliment the sizes of other WebUI sizing classes, control sizes, and those used in positioning. Changing them may degrade the framework utility.

Height Classes

Basic Heights

Class
Height
height-auto
auto
height-xxs
0.625rem
height-xxs-xs
0.938rem
height-xs
1.25rem
height-xs-sm
1.875rem
height-sm
2.5rem
height-sm-md
3.75rem
height-md
5rem
height-md-lg
7.5rem
height-lg
10rem
height-lg-xl
15rem
height-xl
20rem
height-xl-xxl
30rem
height-xxl
40rem

Relative Heights

Class
Height
height-one-quarter
25%
height-one-third
33.33333333%
height-one-half
50%
height-two-thirds
66.66666666%
height-three-quarters
75%
height-full
100%
height-viewport
100vw
height-adjacent-xxs
100% - 0.625rem
height-adjacent-xxs-xs
100% - 0.938rem
height-adjacent-xs
100% - 1.25rem
height-adjacent-xs-sm
100% - 1.875rem
height-adjacent-sm
100% - 2.5rem
height-adjacent-sm-md
100% - 3.75rem
height-adjacent-md
100% - 5rem
height-adjacent-md-lg
100% - 7.5rem
height-adjacent-lg
100% - 10rem
height-adjacent-lg-xl
100% - 15rem
height-adjacent-xl
100% - 20rem
height-adjacent-xl-xxl
100% - 30rem
height-adjacent-xxl
100% - 40rem

Form Control Heights

Class
Height
height-control-xs
1.5rem
height-control-sm
1.75rem
height-control-md
2.125rem
height-control-lg
2.375rem
height-control-xl
2.75rem
Height Sizing Classes

Sizing classes are designed to compliment the sizes of other WebUI sizing classes, control sizes, and those used in positioning. Changing them may degrade the framework utility.

Aspect Ratios

For more information on controlling aspect ratios for media see the Containers section.