Media & Assets - Berrario UI Library

Media Type

Defines the different media elements supported within the system, including images, videos, background media, and embeds. Each media type has unique rendering behavior and should be structured with the appropriate wrapper and utility classes to ensure consistent scaling, responsiveness, and layout control across breakpoints.

Image

all-images

Video

YouTube

Lottie Animation

Spline Scene

Rive

Background Video

background-video-button

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Width

Defines consistent width-based sizing rules for all media elements. Use fit addon classes to control how images fill their containers.

Desktop

Tablet

Mobile

Mobile Portrait

media-width-xs

tablet-media-width-xs

mobile-media-width-xs

mobile-portrait-media-width-xs

media-width-s

tablet-media-width-s

mobile-media-width-s

mobile-portrait-media-width-s

media-width-m

tablet-media-width-m

mobile-media-width-m

mobile-portrait-media-width-m

media-width-l

tablet-media-width-l

mobile-media-width-l

mobile-portrait-media-width-l

media-width-xl

tablet-media-width-xl

mobile-media-width-xl

mobile-portrait-media-width-xl

XXL

media-width-xxl

tablet-media-width-xxl

mobile-media-width-xxl

mobile-portrait-media-width-xxl

Huge

media-width-huge

X Huge

media-width-xhuge

XX Huge

media-width-xxhuge

Height

Defines consistent height-based sizing rules for all media elements. Use fit addon classes to control how images fill their containers.

Desktop

Tablet

Mobile

Mobile Portrait

Text Height

media-height-text

tablet-media-height-text

mobile-media-height-text

mobile-portrait-media-height-text

XXS

media-height-xxs

tablet-media-height-xxs

mobile-media-height-xxs

mobile-portrait-media-height-xxs

media-height-xs

tablet-media-height-xs

mobile-media-height-xs

mobile-portrait-media-height-xs

media-height-s

tablet-media-height-s

mobile-media-height-s

mobile-portrait-media-height-s

media-height-m

tablet-media-height-m

mobile-media-height-m

mobile-portrait-media-height-m

media-height-l

tablet-media-height-l

mobile-media-height-l

mobile-portrait-media-height-l

media-height-xl

tablet-media-height-xl

mobile-media-height-xl

mobile-portrait-media-height-xl

XXL

media-height-xxl

tablet-media-height-xxl

mobile-media-height-xxl

mobile-portrait-media-height-xxl

Huge

media-height-huge

tablet-media-height-huge

mobile-media-height-huge

mobile-portrait-media-height-huge

X Huge

media-height-xhuge

tablet-media-height-xhuge

mobile-media-height-xhuge

mobile-portrait-media-height-xhuge

XX Huge

media-height-xxhuge

tablet-media-height-xxhuge

mobile-media-height-xxhuge

mobile-portrait-media-height-xxhuge

Ratio

This section defines image utilities for fixed aspect ratios.

Desktop

Tablet

Mobile

Mobile Portrait

Auto

ratio-auto

tablet-ratio-auto

mobile-ratio-auto

mobile-portrait-ratio-auto

Square (1:1)

ratio-square-1x1

tablet-ratio-square-1x1

mobile-ratio-square-1x1

mobile-portrait-ratio-square-1x1

Portrait (2:3)

ratio-portrait-2x3

tablet-ratio-portrait-2x3

mobile-ratio-portrait-2x3

mobile-portrait-ratio-portrait-2x3

Landscape (3:2)

ratio-landscape-3x2

tablet-ratio-landscape-3x2

mobile-ratio-landscape-3x2

mobile-portrait-ratio-landscape-3x2

Widescreen (16:9)

ratio-widescreen-16x9

tablet-ratio-widescreen-16x9

mobile-ratio-widescreen-16x9

mobile-portrait-ratio-widescreen-16x9

Univisium (2:1)

ratio-univisium-2x1

tablet-ratio-univisium-2x1

mobile-ratio-univisium-2x1

mobile-portrait-ratio-univisium-2x1

Anamorphic (2.39:1)

ratio-anamorphic-239x1

tablet-ratio-anamorphic-239x1

mobile-ratio-anamorphic-239x1

mobile-portrait-ratio-anamorphic-239x1

Box Size

Defines the box-sizing behavior of an element, controlling how width and height are calculated in relation to padding and borders. Ensures predictable sizing and consistent layout alignment across components.

Border

box-border

Content

box-content

Fit

Controls how media content fits within its container.

Fill (Default)

fit-fill

Cover

fit-cover

Contain

fit-contain

None

fit-none

Scale Down

fit-scale-down