Depth utilities

Depth

Set the visual depth of the block.

Usage

u-depth-[value]
  • value
    A value between 0 (no depth) to 3 (max depth).

Interactivity

When used in conjonction with the is-interactive state, the depth will adjust when hovering the element.

Examples

No depth, interactive
u-depth-0
Depth level 1
u-depth-1
Depth level 2, interactive
u-depth-2 is-interactive
Max depth level
u-depth-3