Campus Design System

Appearance

Inset ​

Utilities for controlling inset positioning using custom spacing variables.

💡 Tip

The inset utilities allow you to control the distance between an element and its containing block, providing flexibility for layout adjustments. This shorthand method ensures the element is positioned relative to its parent container on the top, right, bottom, and left sides.

Class NameCSS Equivalent
.inset-noneinset: var(--cds-sys-spacing-none); /* ≈0px*/
.inset-b-noneinset-block: var(--cds-sys-spacing-none); /* ≈0px*/
.inset-i-noneinset-inline: var(--cds-sys-spacing-none); /* ≈0px*/
.inset-bs-noneinset-block-start: var(--cds-sys-spacing-none); /* ≈0px*/
.inset-be-noneinset-block-end: var(--cds-sys-spacing-none); /* ≈0px*/
.inset-is-noneinset-inline-start: var(--cds-sys-spacing-none); /* ≈0px*/
.inset-ie-noneinset-inline-end: var(--cds-sys-spacing-none); /* ≈0px*/
.inset-3xsinset: var(--cds-sys-spacing-3xs); /* ≈4px*/
.inset-b-3xsinset-block: var(--cds-sys-spacing-3xs); /* ≈4px*/
.inset-i-3xsinset-inline: var(--cds-sys-spacing-3xs); /* ≈4px*/
.inset-bs-3xsinset-block-start: var(--cds-sys-spacing-3xs); /* ≈4px*/
.inset-be-3xsinset-block-end: var(--cds-sys-spacing-3xs); /* ≈4px*/
.inset-is-3xsinset-inline-start: var(--cds-sys-spacing-3xs); /* ≈4px*/
.inset-ie-3xsinset-inline-end: var(--cds-sys-spacing-3xs); /* ≈4px*/
.inset-2xsinset: var(--cds-sys-spacing-2xs); /* ≈8px*/
.inset-b-2xsinset-block: var(--cds-sys-spacing-2xs); /* ≈8px*/
.inset-i-2xsinset-inline: var(--cds-sys-spacing-2xs); /* ≈8px*/
.inset-bs-2xsinset-block-start: var(--cds-sys-spacing-2xs); /* ≈8px*/
.inset-be-2xsinset-block-end: var(--cds-sys-spacing-2xs); /* ≈8px*/
.inset-is-2xsinset-inline-start: var(--cds-sys-spacing-2xs); /* ≈8px*/
.inset-ie-2xsinset-inline-end: var(--cds-sys-spacing-2xs); /* ≈8px*/
.inset-xsinset: var(--cds-sys-spacing-xs); /* ≈12px*/
.inset-b-xsinset-block: var(--cds-sys-spacing-xs); /* ≈12px*/
.inset-i-xsinset-inline: var(--cds-sys-spacing-xs); /* ≈12px*/
.inset-bs-xsinset-block-start: var(--cds-sys-spacing-xs); /* ≈12px*/
.inset-be-xsinset-block-end: var(--cds-sys-spacing-xs); /* ≈12px*/
.inset-is-xsinset-inline-start: var(--cds-sys-spacing-xs); /* ≈12px*/
.inset-ie-xsinset-inline-end: var(--cds-sys-spacing-xs); /* ≈12px*/
.inset-sinset: var(--cds-sys-spacing-s); /* ≈16px*/
.inset-b-sinset-block: var(--cds-sys-spacing-s); /* ≈16px*/
.inset-i-sinset-inline: var(--cds-sys-spacing-s); /* ≈16px*/
.inset-bs-sinset-block-start: var(--cds-sys-spacing-s); /* ≈16px*/
.inset-be-sinset-block-end: var(--cds-sys-spacing-s); /* ≈16px*/
.inset-is-sinset-inline-start: var(--cds-sys-spacing-s); /* ≈16px*/
.inset-ie-sinset-inline-end: var(--cds-sys-spacing-s); /* ≈16px*/
.inset-minset: var(--cds-sys-spacing-m); /* ≈24px*/
.inset-b-minset-block: var(--cds-sys-spacing-m); /* ≈24px*/
.inset-i-minset-inline: var(--cds-sys-spacing-m); /* ≈24px*/
.inset-bs-minset-block-start: var(--cds-sys-spacing-m); /* ≈24px*/
.inset-be-minset-block-end: var(--cds-sys-spacing-m); /* ≈24px*/
.inset-is-minset-inline-start: var(--cds-sys-spacing-m); /* ≈24px*/
.inset-ie-minset-inline-end: var(--cds-sys-spacing-m); /* ≈24px*/
.inset-linset: var(--cds-sys-spacing-l); /* ≈32px*/
.inset-b-linset-block: var(--cds-sys-spacing-l); /* ≈32px*/
.inset-i-linset-inline: var(--cds-sys-spacing-l); /* ≈32px*/
.inset-bs-linset-block-start: var(--cds-sys-spacing-l); /* ≈32px*/
.inset-be-linset-block-end: var(--cds-sys-spacing-l); /* ≈32px*/
.inset-is-linset-inline-start: var(--cds-sys-spacing-l); /* ≈32px*/
.inset-ie-linset-inline-end: var(--cds-sys-spacing-l); /* ≈32px*/
.inset-xlinset: var(--cds-sys-spacing-xl); /* ≈48px*/
.inset-b-xlinset-block: var(--cds-sys-spacing-xl); /* ≈48px*/
.inset-i-xlinset-inline: var(--cds-sys-spacing-xl); /* ≈48px*/
.inset-bs-xlinset-block-start: var(--cds-sys-spacing-xl); /* ≈48px*/
.inset-be-xlinset-block-end: var(--cds-sys-spacing-xl); /* ≈48px*/
.inset-is-xlinset-inline-start: var(--cds-sys-spacing-xl); /* ≈48px*/
.inset-ie-xlinset-inline-end: var(--cds-sys-spacing-xl); /* ≈48px*/
.inset-2xlinset: var(--cds-sys-spacing-2xl); /* ≈64px*/
.inset-b-2xlinset-block: var(--cds-sys-spacing-2xl); /* ≈64px*/
.inset-i-2xlinset-inline: var(--cds-sys-spacing-2xl); /* ≈64px*/
.inset-bs-2xlinset-block-start: var(--cds-sys-spacing-2xl); /* ≈64px*/
.inset-be-2xlinset-block-end: var(--cds-sys-spacing-2xl); /* ≈64px*/
.inset-is-2xlinset-inline-start: var(--cds-sys-spacing-2xl); /* ≈64px*/
.inset-ie-2xlinset-inline-end: var(--cds-sys-spacing-2xl); /* ≈64px*/
.inset-3xlinset: var(--cds-sys-spacing-3xl); /* ≈96px*/
.inset-b-3xlinset-block: var(--cds-sys-spacing-3xl); /* ≈96px*/
.inset-i-3xlinset-inline: var(--cds-sys-spacing-3xl); /* ≈96px*/
.inset-bs-3xlinset-block-start: var(--cds-sys-spacing-3xl); /* ≈96px*/
.inset-be-3xlinset-block-end: var(--cds-sys-spacing-3xl); /* ≈96px*/
.inset-is-3xlinset-inline-start: var(--cds-sys-spacing-3xl); /* ≈96px*/
.inset-ie-3xlinset-inline-end: var(--cds-sys-spacing-3xl); /* ≈96px*/

Add inset to all sides ​

Control the inset of an element on all four sides using the inset-{size} utilities.

Relative parent
Static parent
inset-l
Static sibling
html
<div class="[...] inset-l">inset-l</div>

Add horizontal inset ​

Control the horizontal inset of an element using the inset-i-{size} utilities. This will affect both the left and right sides.

Relative parent
Static parent
inset-l
Static sibling
html
<div class="[...] inset-i-m">inset-i-m</div>

Add vertical inset ​

Control the vertical inset of an element using the inset-b-{size} utilities. This will affect both the top and bottom sides.

Relative parent
Static parent
inset-l
Static sibling
html
<div class="[...] inset-b-xl">inset-b-xl</div>

Add inset to specific sides ​

Control the inset of an element on a specific side using the inset-{b|s}{s|e}-{size} utilities, similar to the padding and margin utilities.

Abbreviation
btop (block axis)
ileft (inline axis)
stop or left depending on axis
ebottom or right depending on axis

As an illustration, consider using the class "inset-bs-m" to apply 1.5rem distance to the top (block-start) at desktop size.

💡 Tip

We recommend using logical properties like {block|inline}-{end|start} to handle different writing directions. This approach makes your layouts more flexible and adaptable for various languages and screen sizes.

Relative parent
Static parent
inset-bs-m
inset-ie-s
inset-be-2xl inset-ie-3xl
inset-is-3xs
Static sibling
html
<div class="[...] inset-bs-m">inset-bs-m</div>
<div class="[...] inset-ie-s">inset-ie-s</div>
<div class="[...] inset-be-l">inset-be-l</div>
<div class="[...] inset-is-2xl">inset-is-2xl</div>