Campus Design System

Appearance

Scale ​

Utilities for controlling the scale of an element.

Class NameCSS Equivalent
scale-0--cds-sys-transform-scale-x: 0;
--cds-sys-transform-scale-y: 0;
scale-x-0--cds-sys-transform-scale-x: 0;
scale-y-0--cds-sys-transform-scale-y: 0;
scale-50--cds-sys-transform-scale-x: 0.5;
--cds-sys-transform-scale-y: 0.5;
scale-x-50--cds-sys-transform-scale-x: 0.5;
scale-y-50--cds-sys-transform-scale-y: 0.5;
scale-75--cds-sys-transform-scale-x: 0.75;
--cds-sys-transform-scale-y: 0.75;
scale-x-75--cds-sys-transform-scale-x: 0.75;
scale-y-75--cds-sys-transform-scale-y: 0.75;
scale-90--cds-sys-transform-scale-x: 0.9;
--cds-sys-transform-scale-y: 0.9;
scale-x-90--cds-sys-transform-scale-x: 0.9;
scale-y-90--cds-sys-transform-scale-y: 0.9;
scale-95--cds-sys-transform-scale-x: 0.95;
--cds-sys-transform-scale-y: 0.95;
scale-x-95--cds-sys-transform-scale-x: 0.95;
scale-y-95--cds-sys-transform-scale-y: 0.95;
scale-100--cds-sys-transform-scale-x: 1;
--cds-sys-transform-scale-y: 1;
scale-x-100--cds-sys-transform-scale-x: 1;
scale-y-100--cds-sys-transform-scale-y: 1;
scale-105--cds-sys-transform-scale-x: 1.05;
--cds-sys-transform-scale-y: 1.05;
scale-x-105--cds-sys-transform-scale-x: 1.05;
scale-y-105--cds-sys-transform-scale-y: 1.05;
scale-110--cds-sys-transform-scale-x: 1.1;
--cds-sys-transform-scale-y: 1.1;
scale-x-110--cds-sys-transform-scale-x: 1.1;
scale-y-110--cds-sys-transform-scale-y: 1.1;
scale-125--cds-sys-transform-scale-x: 1.25;
--cds-sys-transform-scale-y: 1.25;
scale-x-125--cds-sys-transform-scale-x: 1.25;
scale-y-125--cds-sys-transform-scale-y: 1.25;
scale-150--cds-sys-transform-scale-x: 1.5;
--cds-sys-transform-scale-y: 1.5;
scale-x-150--cds-sys-transform-scale-x: 1.5;
scale-y-150--cds-sys-transform-scale-y: 1.5;
scale-200--cds-sys-transform-scale-x: 2;
--cds-sys-transform-scale-y: 2;
scale-x-200--cds-sys-transform-scale-x: 2;
scale-y-200--cds-sys-transform-scale-y: 2;

Applying Scale ​

Apply scale to an element by adding the corresponding scale utility class.

❗ Keep in mind

To apply transformations like scale, it's essential to commence class declarations with transform. This action defines a default transformation for the element.

css
transform: translate(var(--cds-sys-transform-translate-x, 0), var(--cds-sys-transform-translate-y, 0)) rotate(var(--cds-sys-transform-rotate, 0deg)) skewX(var(--cds-sys-transform-skew-x, 0deg)) skewY(var(--cds-sys-transform-skew-y, 0deg)) scaleX(var(--cds-sys-transform-scale-x, 1)) scaleY(var(--cds-sys-transform-scale-y, 1));

Subsequently, varying scale effects can be implemented by assigning classes as outlined on this page.

scale-50
scale-75
scale-100
scale-125
scale-150
html
<div class="[...] transform scale-50">...</div>