Multi-property Utilities

Multi-property utilities combine several CSS properties and values to perform common actions. They are not meant to override default functionality, but to aid in things like accessibility or layout.


These utilities are related to accessibility. These should be used to make the experience more accessible.

Class Description
.sprk-u-ScreenReaderText Makes content invisible while still being read by a screen reader.
.sprk-u-ShowOnFocus When combined with .sprk-u-ScreenReaderText , the element will become visible on focus. This is helpful for users who only use a keyboard to navigate. An example is a "Skip to content" link that should become visible to a user on focus.


These utilities are related to layout.

Class Description
.sprk-u-AbsoluteCenter When placed on a container, its children will align in the absolute center (vertically and horizontally) of the box.
.sprk-u-ClearFix Clearfix is a method of float containment. When applied to a container with floated children it forces the container to span the entire vertical extent of the children as if they weren't pulled out of the document flow by the floats. Elements that come after the Clearfixed element will no longer wrap around the floated children.
.sprk-u-FullWidth When placed on a container, it will cause it to fill the viewport, even if it's inside a limiting container (such as .sprk-o-CenteredColumn).


These utilities are related to type.

Class Description
.sprk-b-Truncate When placed on an element that contains text, it will limit the text to one line and adds an ellipsis when it overflows.