Helper Classes

Defined in lib/styles/02-util/_helperclasses.scss and lib/styles/01-base/_fonts.scss.

Backgrounds

Class	Effect
`.bg-gradient-2`	Brand gradient background
`.bg-primary`	Primary brand color background
`.bg-gray-10`	Light gray background
`.dark-background`	Dark footer background with overflow hidden

Typography

`.typography--sans`

Applies sans-serif font to <p> and <li> elements without class attributes. Excludes .longquote p. Does not affect component elements with their own classes.

<main class="typography--sans">
    <p>Sans-serif</p>                          <!-- affected -->
    <p class="highlight-card__text">...</p>   <!-- NOT affected -->
</main>

`.headings--bold`

Sets h2–h6 to bold (700) instead of the default heavy (800).

<main class="headings--bold">
    <h2>Bold heading</h2>
</main>

Service pages typically combine both:

<main class="bg-gradient-2 typography--sans headings--bold">
    ...
</main>

Font Family & Style

Low-level classes for setting font family, weight, and style on individual elements. Each is also available as a Sass placeholder (%body-font-sans etc.) for @extend. Defined in lib/styles/01-base/_fonts.scss.

Use these to override component font styling when .typography--sans doesn't apply (because the element has a class).

Class	Family	Weight	Style
`.body-font-regular`	Serif	normal	normal
`.body-font-italic`	Serif	normal	italic
`.body-font-bold`	Serif	bold	normal
`.body-font-bold-italic`	Serif	bold	italic
`.body-font-sans`	Sans-serif	normal	normal
`.heading-font-regular`	Sans-serif	normal	normal
`.heading-font-bold`	Sans-serif	bold	normal
`.heading-font-heavy`	Sans-serif	800	normal
`.heading-font-ultra`	Sans-serif	1000	normal
`.monospace-font-regular`	Monospace	normal	normal

<!-- Override component font on a specific element -->
<p class="highlight-card__text body-font-sans">Now sans-serif</p>

Spacing

Margin Top

.m-t-0 .m-t-xxs .m-t-xs .m-t-sm .m-t-md .m-t-base .m-t-lg .m-t-xl .m-t-xxl

Margin Bottom

.m-b-0 .m-b-xxs .m-b-xs .m-b-sm .m-b-md .m-b-lg .m-b-xl .m-b-xxl

Gap (for flex/grid)

.gap-sm .gap-md .gap-lg

Flexbox

Display

Class	CSS
`.flex`	`display: flex`
`.flex-inline`	`display: inline-flex`

Direction

Class	CSS
`.flex-direction-row`	`flex-direction: row`
`.flex-direction-row-reverse`	`flex-direction: row-reverse`
`.flex-direction-column`	`flex-direction: column`
`.flex-direction-column-reverse`	`flex-direction: column-reverse`

Wrap

Class	CSS
`.flex-wrap`	`flex-wrap: wrap`
`.flex-nowrap`	`flex-wrap: nowrap`
`.flex-wrap-reverse`	`flex-wrap: wrap-reverse`

Justify Content

Class	CSS
`.flex-justify-start`	`justify-content: flex-start`
`.flex-justify-end`	`justify-content: flex-end`
`.flex-justify-center`	`justify-content: center`
`.flex-justify-between`	`justify-content: space-between`
`.flex-justify-around`	`justify-content: space-around`
`.flex-justify-evenly`	`justify-content: space-evenly`

Align Items

Class	CSS
`.flex-align-start`	`align-items: flex-start`
`.flex-align-end`	`align-items: flex-end`
`.flex-align-center`	`align-items: center`
`.flex-align-baseline`	`align-items: baseline`
`.flex-align-stretch`	`align-items: stretch`

Align Content

Controls spacing of wrapped flex lines (only applies when flex-wrap is set and multiple lines exist).

Class	CSS
`.flex-content-start`	`align-content: flex-start`
`.flex-content-end`	`align-content: flex-end`
`.flex-content-center`	`align-content: center`
`.flex-content-between`	`align-content: space-between`
`.flex-content-around`	`align-content: space-around`
`.flex-content-stretch`	`align-content: stretch`

Align Self

Overrides align-items for individual flex items.

Class	CSS
`.flex-self-auto`	`align-self: auto`
`.flex-self-start`	`align-self: flex-start`
`.flex-self-end`	`align-self: flex-end`
`.flex-self-center`	`align-self: center`
`.flex-self-baseline`	`align-self: baseline`
`.flex-self-stretch`	`align-self: stretch`

Grow & Shrink

Class	CSS
`.flex-grow-0`	`flex-grow: 0`
`.flex-grow-1`	`flex-grow: 1`
`.flex-shrink-0`	`flex-shrink: 0`
`.flex-shrink-1`	`flex-shrink: 1`

Text

Class	Effect
`.text-align-center`	Centers text
`.center-section`	Alias for `.text-align-center`

Other

Class	Effect
`.faq-section`	Adjusted padding and alignment for FAQ sections