A background fill can be applied using one of the fill helpers.

If you want to just set the text color, you can use one of the text color helpers.

A full list of the available color helper classes is available in the colors documentation page.

Helper classes for shadow effects to give the illusion of elevation

The effect of the elevation is defined by the intensity and depth of the shadow:

Helper classes to set the desired border on any element

.bdr<direction><size>

<direction>

• A = all
• T = top
• R = right
• B = bottom
• L = left
• H = horizontal
• V = vertical

<size>

• n = none
• s = small
• m = medium
• l = large
• xl = extra large

You can tweak borders using one of the style modifiers and define their color using border color helpers.

By default border-color will be the same value as color.

To control the border radius of an element, use .rounded<direction><size> utilities:

<direction>

• A = all
• T = top
• B = bottom

<size>

• n = none
• xs = extra small
• s = small
• m = medium
• l = large
• xl = extra large
• full

Helper classes for sizing elements

Percentage widths are preferred as they let elements adjust to device viewport dimensions. Percentage-based widths are great for creating fluid grid layouts (see grid component). Fixed widths should generally be used only for small fixed-sized items (for example fixed-sized number input).

Sizing helpers are namespaced across four breakpoints:

• --ns = not-small (covers everything larger than mobile: 500px and higher)
• --m = medium (500px to 780px)
• --l = large (780px and higher)
• --xl = extra large (1400px and higher)

For example .w50--m limits 50% width to medium breakpoint.

Use .maw<scale> to set the maximum width of a given element:

.maw<scale>ch are designed for specific character lengths. They are useful when constraining form inputs width.

Use .miw0 to force min-width to become zero.

This is useful when working with flexbox. By default, flex items won’t shrink below their minimum content size, which is equal to the size of their contents. You can use .miw0 to change this:

Helper classes to adjust the spacing between components

Use these to tweak layout on a micro level.

Spacing helpers use the following spacing scale:

Spacing should not be declared outside of these helpers. This is meant to help keep predictable and harmonious spacing for components and templates and avoid magic numbers.

.<type><direction><size>

<type>

• m = margin
• p = padding

<direction>

• A = all
• T = top
• R = right
• B = bottom
• L = left
• H = horizontal
• V = vertical

<size>

• n = none
• xs = extra small
• s = small
• m = medium
• l = large
• xl = extra large
• xxl = extra extra large
• xxxl = 3x extra large

Spacing helpers are namespaced across four breakpoints:

• --ns = not-small (covers everything larger than mobile: 500px and higher)
• --m = medium (500px to 780px)
• --l = large (780px and higher)
• --xl = large (1400px and higher)

For example .mTm--m.pAl--m only kicks in at a medium breakpoint.

Helper classes to control display type

• .dI – display inline
• .dIB – display inline-block
• .dB – display block
• .dT – display table
• .dTR – display table-row
• .dTC – display table-cell

For example, to make a block-level element inline, use the .dI class. To make inline elements block-level, use .dB.

Display helpers are namespaced across three breakpoints:

• --ns = not-small (covers everything larger than mobile: 500px and higher)
• --m = medium (500px to 780px)
• --l = large (780px and higher)

For example .dB--m only kicks in at a medium breakpoint.

Helper classes to set horizontal (text) alignment and vertical alignment

Vertical alignment works only on inline or inline-block elements and table cells and when not used on a table cell, it will affect the alignment of the element itself, not the element’s contents.

Text alignment helpers are namespaced across three breakpoints:

• --ns = not-small (covers everything larger than mobile: 500px and higher)
• --m = medium (500px to 780px)
• --l = large (780px and higher)

For example .txtL--m only kicks in at a medium breakpoint.

Helper classes for setting the ratio of an element

Use these helpers together with the responsive embed component.

Ratio helpers are namespaced across three breakpoints:

• --ns = not-small (covers everything larger than mobile: 500px and higher)
• --m = medium (500px to 780px)
• --l = large (780px and higher)

For example .fourByThree--ns only kicks in above mobile.

The padding property is the magic that sets a ratio. This is because the padding property is set as a percentage of the width of the containing block.

Helper classes for leading and trailing offsets

Offset helpers are namespaced across three breakpoints:

• --ns = not-small (covers everything larger than mobile: 500px and higher)
• --m = medium (500px to 780px)
• --l = large (780px and higher)

For example .before25--ns only kicks in above mobile.

Helper classes to control floating

When you float an element left or right, the content following the float will flow beside and around the element. Read more about floats.

Float helpers are namespaced across three breakpoints:

• --ns = not-small (covers everything larger than mobile: 500px and higher)
• --m = medium (500px to 780px)
• --l = large (780px and higher)

For example .fR--m only kicks in at a medium breakpoint.

Do not set display properties on floated elements. When elements are floated, they are set to display block.

Helper classes for positioning elements

• .posR keeps elements in the default document flow but create a new positioning context.
• .posA pulls elements from the default document flow and positions them according to their positioning context.
• .posF gives an element fixed positioning relative to the viewport. Use it with caution, as mobile browsers have shaky support for fixed positioning.

Positioning helpers are namespaced across three breakpoints:

• --ns = not-small (covers everything larger than mobile: 500px and higher)
• --m = medium (500px to 780px)
• --l = large (780px and higher)

For example .posA--m.t0--m.r0--m only kicks in at a medium breakpoint.

Use positioning only when necessary. Absolute/fixed positioning alters the default document flow and places an element at a specific point of the page. Be sure to check out the way things look on smaller screens. Often it's a good idea to trigger absolute/fixed positioning only on larger viewports, by using .posA--l or .posF--l.

Helper classes to control overflow

• .ofV – overflow visible
• .ofH – overflow hidden
• .ofS – overflow scroll
• .ofA – overflow auto

Overflow helpers are namespaced across three breakpoints:

• --ns = not-small (covers everything larger than mobile: 500px and higher)
• --m = medium (500px to 780px)
• --l = large (780px and higher)

For example .ofH--l only kicks in at a large breakpoint.

If you want to denote text that overflows the containing element with an ellipsis use .txtTruncate from text helpers.

Helper classes based on CSS3 Flexbox Layout module

Flex helpers can help solve many page-level and micro layout problems. They provide:

• Control over an elements vertical and horizontal alignment
• Control over the content vertical and horizontal alignment
• Automatic width distribution without having to declare widths
• Reordering elements in your layouts independently of their order in the markup

Flex helpers are namespaced across three breakpoints:

• --ns = not-small (covers everything larger than mobile: 500px and higher)
• --m = medium (500px to 780px)
• --l = large (780px and higher)

You can enable flexbox layout only for smaller screens by combining .dF and .dB--l helpers.

float, clear and vertical-align have no effect on a flex item, and do not take it out-of-flow.

Direction

These classes define the axis flex items are placed on and their direction. By default, items run horizontally from left to right. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

• .fdR – lay out flex items from left to right (default). Combine it with .fwW to enable wrapping of flex items.
• .fdC – lay out flex items as vertical columns

Flex items sizing

Use .fg<factor> classes to set flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container. If all flex items have flex grow set to 1, every item will have an equal size inside the container. If you were to give one of the flex items a value of 3, that item would take up triple as much space as the others. If you were to give one of the items a value of 1 and did nothing to others, the item who was given value 1 will take up all of the rest available space.

If you want a flex item to grow independently from its content, set zero flex basis using .fb0 class.

Alignment

These classes define the vertical alignment of flex items.

• .aiS – stretch flex items to fill the height of the flex container (default)
• .aiC – center flex items vertically
• .aiB – align flex items to their baseline
• .aiFS – align flex items to the top
• .aiFE – align flex items to the bottom

These classes define the horizontal alignment of flex items.

• .jcC – center flex items horizontally
• .jcSB – evenly distribute flex items horizontally; first item is on the left, last item on the right
• .jcSA – evently distribute flex items hotizontally with equal space around them
• .jcFS – align flex items to the left (default)
• .jcFE – align flex items to the right

Flex items order

By default, flex items are laid out according to the source order. Use .o<order> classes to control the order in which flex items appear inside the flex container.

Layout helper object for grouping elements (such as form items) on a single row and distributing space automatically without the need for @media queries

Flex row uses flexbox internally for space distribution and wrapping.

Flex row columns will shrink as needed until minimum allowed width is reached. By default it's 20ch and can be customized using --col-width variable. When items cannot fit on one row, they will begin to break to a new row. Collapsing behavior is automatic based on the --col-width constrain and size of the Flex row container.

Resize the browser window to observe the collapsing.

Sometimes you may want to switch from a multi-column layout directly to a single column at a target container breakpoint. This is where .flexRow--switcher modifier is useful.

.flexRow--switcher specifies a container breakpoint at which the items should switch from a multi-column arrangement to a single column. Default breakpoint is 60ch, but you can override it as needed using --breakpoint custom property.

Note that the breakpoint is taking into account the Flex row container width rather than a fixed viewport width, so it automatically adapts to it's context.

--col-width has no effect when using .flexRow--switcher modifier.

Layout helper object for creating dynamically resizable elements that always sit on the same horizontal line

A bit like flexbox, but makes use of CSS table layout for best cross-browser compatibility (back to at least IE 9).

Forms can be laid out using one of the layout helpers such as Flex row. Another option is to use the grid component and layout your form as table rows and cells with .grid--arrange.

See Form page for more examples.

Radio/checkbox inputs

Radio button <input type="radio"/> and checkbox <input type="checkbox"/> needs to be placed before label, everything else inside label. This makes WCAG happy (as focus can be visualized), and custom styling a breeze.

If you need more control over radio/checkbox inputs, pay attention to the markup of examples below. You can also create checkboxes or radios using .formControl object which gives you more flexibility:

Form field hints

Form field hints are used to provide an additional hint, description, or example of the information required for a particular field.

These hints are replacement for placeholder attribute which places text inside the input in a light gray color that fails the contrast requirements. What is more the placeholder text disappear when the user types in the field, which is also in conflict with WCAG.

Validation

Use standard validation using the HTML5 attributes required (boolean attribute) and/or pattern containing a regular expression that defines the validation format on the input elements. This is automatically used by most desktop browsers to validate fields on form submit. If validation fails, the browser will automatically use title to specify a descriptive text to explain the expected validation format to the user. In addition to be displayed on mouse-over, it is also used in some browsers as addition to the validation text when form validation fails.

<input type="text" id="time1" required pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]" title="Required. Time in 24 hour format (hh:mm)." />

Standard HTML5 validation is useful for assisting the user and pre-validating his input. In cases where you want more control over the validation feedback, you may want to use styles for validation errors.

In general no more than two-column tables are recommended because we want to ensure that they display well on mobiles in portrait mode.

For the data above definition list might actually be a better fit, because it has responsiveness baked-in:

Visibility state classes let you show or hide elements. They are currently only available for block and table toggling.

.is-shown shows a hidden element.

.is-hidden hides and removes an element from the flow.

.is-hiddenVisually visually hides the element (removes an element from the flow but leaves it available to screen readers).

You can also toggle visibility state based on the size of the viewport. This is useful for showing and hiding elements on mobile devices.

Try to use these utilities on a limited basis and avoid creating entirely different versions of the same content for different viewport sizes. Instead, use them to complement each device's presentation.

Resize the browser window to see the effect.