A few utilities that comes handy to style texts.

Text Opacity

The opacity is used to emphasize the importance of text blocks on the page.


Text Type Opacity CSS variable CSS class Svelte Component
value no opacity --value-color value <Value>
label --light-opacity --label-color label n/a
description --very-light-opacity --description-color description n/a


This is not a strict rule. For example the descriptional text can be displayed in label style if there is no label styled block next to the main block.

Visually hidden

.visually-hidden can be used to hide content visually while keeping it screen reader-accessible.