Foundations

Radius & Effects

Radius

Corner radius steps, phone to desktop.

--radius-xsclamp(0.125rem, calc(0.1786vw + 0.0893rem), 0.25rem)2 → 4px

--radius-smclamp(0.1875rem, calc(0.2679vw + 0.1339rem), 0.375rem)3 → 6px

--radius-mdclamp(0.25rem, calc(0.3571vw + 0.1786rem), 0.5rem)4 → 8px

--radius-lgclamp(0.375rem, calc(0.5357vw + 0.2679rem), 0.75rem)6 → 12px

--radius-xlclamp(0.5rem, calc(0.7143vw + 0.3571rem), 1rem)8 → 16px

--radius-2xlclamp(0.75rem, calc(1.0714vw + 0.5357rem), 1.5rem)12 → 24px

--radius-3xlclamp(1rem, calc(1.4286vw + 0.7143rem), 2rem)16 → 32px

--radius-full100rem1600px

--radius-ellipse100%

--radius-none0%

Shadow

The shadow classes, smallest to largest.

.shadow-xsbox-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);

.shadow-smbox-shadow: 0px 2px 6px rgba(0, 0, 0, 0.113);

.shadow-mdbox-shadow: 0px 4px 12px rgba(0, 0, 0, 0.175);

.shadow-lgbox-shadow: 0px 8px 24px rgba(0, 0, 0, 0.238);

.shadow-xlbox-shadow: 0px 12px 48px rgba(0, 0, 0, 0.3);

Border Width

Outline thickness, from none to the thickest.

.border-noneborder-width: 0px; border-style: none;

.border-xsborder-width: 1px; border-style: var(--v4studio-border-style, solid);

.border-smborder-width: 2px; border-style: var(--v4studio-border-style, solid);

.border-mdborder-width: 3px; border-style: var(--v4studio-border-style, solid);

.border-lgborder-width: 4px; border-style: var(--v4studio-border-style, solid);

.border-xlborder-width: 5px; border-style: var(--v4studio-border-style, solid);

Border Style

Line styles. The classes are 1px; drawn 4px here so each style shows.

.border-solid--v4studio-border-style: solid; border-style: solid;

.border-dashed--v4studio-border-style: dashed; border-style: dashed;

.border-dotted--v4studio-border-style: dotted; border-style: dotted;

.border-double--v4studio-border-style: double; border-style: double;

.border-groove--v4studio-border-style: groove; border-style: groove;

.border-ridge--v4studio-border-style: ridge; border-style: ridge;

.border-inset--v4studio-border-style: inset; border-style: inset;

.border-outset--v4studio-border-style: outset; border-style: outset;

Opacity

How see-through an element is.

.opacity-100opacity: 1;

.opacity-75opacity: 0.75;

.opacity-50opacity: 0.5;

.opacity-25opacity: 0.25;

.opacity-0opacity: 0;

Blur & Grayscale

Filters for images and backgrounds.

.blur-none--v4studio-filter-blur: 0; filter: blur(var(--v4studio-filter-blur, 0px)) brightness(var(--v4studio-filter-brightness, 1)) contrast(var(--v4studio-filter-contrast, 1)) saturate(var(--v4studio-filter-saturate, 1)) grayscale(var(--v4studio-filter-grayscale, 0));

.blur-sm--v4studio-filter-blur: var(--size-4xs); filter: blur(var(--v4studio-filter-blur, 0px)) brightness(var(--v4studio-filter-brightness, 1)) contrast(var(--v4studio-filter-contrast, 1)) saturate(var(--v4studio-filter-saturate, 1)) grayscale(var(--v4studio-filter-grayscale, 0));

.blur-md--v4studio-filter-blur: var(--size-3xs); filter: blur(var(--v4studio-filter-blur, 0px)) brightness(var(--v4studio-filter-brightness, 1)) contrast(var(--v4studio-filter-contrast, 1)) saturate(var(--v4studio-filter-saturate, 1)) grayscale(var(--v4studio-filter-grayscale, 0));

.blur-lg--v4studio-filter-blur: var(--size-sm); filter: blur(var(--v4studio-filter-blur, 0px)) brightness(var(--v4studio-filter-brightness, 1)) contrast(var(--v4studio-filter-contrast, 1)) saturate(var(--v4studio-filter-saturate, 1)) grayscale(var(--v4studio-filter-grayscale, 0));

.grayscale--v4studio-filter-grayscale: 1; filter: blur(var(--v4studio-filter-blur, 0px)) brightness(var(--v4studio-filter-brightness, 1)) contrast(var(--v4studio-filter-contrast, 1)) saturate(var(--v4studio-filter-saturate, 1)) grayscale(var(--v4studio-filter-grayscale, 0));

.grayscale-0--v4studio-filter-grayscale: 0; filter: blur(var(--v4studio-filter-blur, 0px)) brightness(var(--v4studio-filter-brightness, 1)) contrast(var(--v4studio-filter-contrast, 1)) saturate(var(--v4studio-filter-saturate, 1)) grayscale(var(--v4studio-filter-grayscale, 0));

Glass & Overlays

See-through surfaces and backdrop blur, shown over a picture.

.bg-glassbackground-color: var(--color-glass);

.bg-overlaybackground-color: var(--color-overlay);

.bg-backdropbackground-color: var(--color-backdrop);

.backdrop-blur-nonebackdrop-filter: blur(0);

.backdrop-blur-smbackdrop-filter: blur(var(--size-4xs));

.backdrop-blur-mdbackdrop-filter: blur(var(--size-3xs));

.backdrop-blur-lgbackdrop-filter: blur(var(--size-sm));

Dividers

Lines that separate content.

.divider-defaultdisplay: block; width: 100%; height: var(--size-divider); background-color: var(--color-border-lighter); border-width: 0;

.divider-strongdisplay: block; width: 100%; height: var(--size-divider); background-color: var(--color-border-dark); border-width: 0;

.divider-accentdisplay: block; width: 100%; height: var(--size-divider); background-color: var(--color-primary); border-width: 0;

.divider-gradientdisplay: block; width: 100%; height: var(--size-divider); background-color: var(--color-transparent, transparent); border-width: 0; background: linear-gradient(90deg, var(--color-primary), var(--color-tertiary));

.divider-dasheddisplay: block; width: 100%; height: 0; background-color: var(--color-transparent, transparent); border-width: 0; border-top-width: var(--size-divider); border-top-style: dashed; border-top-color: var(--color-border-light);

.divider-verticaldisplay: block; width: var(--size-divider); height: auto; background-color: var(--color-border-lighter); border-width: 0; align-self: stretch;