Sizing Utilities

Control the dimensions of elements.

Width

Control element width.

Fixed widths:

• sb-w-0: 0
• sb-w-1: 0.25rem
• sb-w-2: 0.5rem
• sb-w-4: 1rem
• sb-w-8: 2rem
• sb-w-16: 4rem
• sb-w-32: 8rem
• sb-w-64: 16rem

Percentage widths:

• sb-w-1/2: 50%
• sb-w-1/3: 33.333333%
• sb-w-2/3: 66.666667%
• sb-w-1/4: 25%
• sb-w-3/4: 75%
• sb-w-full: 100%

Viewport widths:

• sb-w-screen: 100vw
• sb-w-50vw: 50vw
• sb-w-75vw: 75vw

Height

Control element height.

Fixed heights:

• sb-h-0 through sb-h-64: Same as width scale
• sb-h-auto: Auto height

Percentage heights:

• sb-h-1/2: 50%
• sb-h-1/3: 33.333333%
• sb-h-2/3: 66.666667%
• sb-h-full: 100%

Viewport heights:

• sb-h-screen: 100vh
• sb-h-50vh: 50vh
• sb-h-75vh: 75vh

Min/Max Dimensions

Control minimum and maximum dimensions.

Min-width:

• sb-min-w-0: 0
• sb-min-w-full: 100%
• sb-min-w-screen: 100vw

Max-width:

• sb-max-w-xs: 20rem
• sb-max-w-sm: 24rem
• sb-max-w-md: 28rem
• sb-max-w-lg: 32rem
• sb-max-w-xl: 36rem
• sb-max-w-full: 100%

Min/Max-height:

• sb-min-h-0: 0
• sb-min-h-full: 100%
• sb-min-h-screen: 100vh
• sb-max-h-full: 100%
• sb-max-h-screen: 100vh

Aspect Ratio

Control the aspect ratio of elements.

Available classes:

• sb-aspect-square: 1/1
• sb-aspect-video: 16/9
• sb-aspect-portrait: 3/4
• sb-aspect-wide: 21/9

Available object-fit classes:

• sb-object-contain: Scale to fit
• sb-object-cover: Cover area
• sb-object-fill: Stretch to fill
• sb-object-none: Don't resize
• sb-object-scale-down: Scale down if needed

<div class="sb-w-full sb-max-w-lg sb-aspect-video">
    <img class="sb-w-full sb-h-full sb-object-cover" src="video-thumb.jpg">
</div>

Continue to Typography Utilities