Modifiers

Introduction

These utilities are not BEM blocks. They are helper classes designed to complement BEM components without redefining their structure.

Background utilities

Provides helper classes for setting background colors using global variables:

• .--bg-light – light background

• .--bg-white – white background

• .--bg-info – informational / accent background

Display & layout helpers

Basic helpers for block-level layout:

• .--block – forces display: block

• .--content – centered content wrapper with responsive max-width

• .--row – flex-based row with horizontal gutters

• .--column – column wrapper with padding offsets

Flexbox utilities

Reusable helpers for flexbox layout and alignment:

Flex containers

• .--flex

• .--flex-inline

• .--flex-column

• .--flex-nowrap

Alignment & distribution

• .--flex-start, .--flex-end, .--flex-centre

• .--flex-start-x, .--flex-centre-x, .--flex-end-x

• .--flex-start-y, .--flex-centre-y, .--flex-end-y

• .--flex-space

• .--flex-stretch

Responsive flex direction

• .--flex-s-column, .--flex-s-row

• .--flex-m-column, .--flex-m-row

Visibility & accessibility

Utilities for hiding content visually or semantically:

• .--hide – completely hides an element

• .--hide-text – hides text visually

• .--sr-only – screen-reader–only content (accessibility)

Link utilities

Helper classes for link styling and interactions:

• .--link – animated underline on hover

• .--link-rev – reversed underline animation

• .--link-underline – simple underline

• .--link-arrow – link with arrow indicator

• .--link-arrow-right

• .--link-arrow-down

Shadow helpers

Predefined box-shadow styles:

• .--shadow – default shadow

• .--shadowV2 – alternative shadow style

Text utilities

Alignment

• .--text-left

• .--text-center

• .--text-right

Decoration & color

• .--text-line-through

• .--text-underline

• .--text-brand

• .--text-dark

Width utilities (grid-based)

A responsive width system based on a 12-column grid:

• .--w-1 → .--w-12 – base widths

• Responsive variants:

  • .--w-t-* (tiny)

  • .--w-s-* (small)

  • .--w-m-* (medium)

  • .--w-l-* (large)

  • .--w-x-* (xlarge)

• Visibility helpers:

  • .--w-hide

  • .--w-show

Offset utilities

Margin-based offset helpers for horizontal spacing:

• .--offset-1 → .--offset-12

• Responsive variants:

  • .--offset-s-*

  • .--offset-m-*

  • .--offset-l-*

  • .--offset-x-*

Typography helpers

Basic text emphasis:

• .--bold – bold text