Core CSS Utilities

Indent

A visual utility that applies a consistent left-hand border to an element. The width of the border isn’t configurable, but the colour is. The default colour is currentColor, but specifying --indent-color with a colour design token will change the colour for you.

You can also use an indent-color utility class which will apply --indent-color for you.

<div class="region indent indent-color-primary"></div>

.my-block {
  --indent-color: var(--color-primary);
}

Region

A container that provides consistent vertical spacing for

chunks/sections/regions of content.

<div class="region">I have consistent space now.</div>

To disable the top spacing on the region use the following data attribute:

<div class="region" data-disable-space-top>Top spacing is disabled.</div>

To disable the bottom spacing on the region use the following data attribute:

<div class="region" data-disable-space-bottom>Bottom spacing is disabled.</div>

If you hide an element with display: none, it will also hide it from assistive

technology, such as screen readers. This utility allows you to get the effect

of display: none, without the screen reader issues.

<p class="visually-hidden">
  You can’t see me, but a screen reader can still access me
</p>

Core CSS Utilities

Indent

Region

Visually hidden