The typography system allows each brand to designate two typefaces: A display font for headings etc. and a body font for editorial and UI elements. Similar to the colour system, a reference (variable) is created for each font; brand and body. By using this reference rather than the physical name of the font we can quickly and efficiently implement brand specific typography across multiple applications and brands.

Never use a web font without prior confirmation that you have the correct licence agreement in place.

Fonts

1.0.0

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self-hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Font usage

The brand or body font can be applied to any text using a simple class declaration. Refer to the digital brand guidelines regarding the use of typography.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

<h1 class="brand-font">I’m a Heading using the brand font</h1>

<h1 class="body-font">I’m a Heading using the body font</h1>

CSS

Modifier classes:
  • brand-font
  • body-font

LESS

The main mixin is called: _fonts(WBC)
1.0.1

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self-hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Font usage

The brand or body font can be applied to any text using a simple class declaration. Refer to the digital brand guidelines regarding the use of typography.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)
<h1 class="brand-font">I’m a Heading using the brand font</h1>

<h1 class="body-font">I’m a Heading using the body font</h1>

CSS

Modifier classes:
  • brand-font
  • body-font

LESS

The main mixin is called: _fonts(WBC)
1.0.2

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self-hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Font usage

The brand or body font can be applied to any text using a simple class declaration. Refer to the digital brand guidelines regarding the use of typography.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)
<h1 class="brand-font">I’m a Heading using the brand font</h1>

<h1 class="body-font">I’m a Heading using the body font</h1>

CSS

Modifier classes:
  • brand-font
  • body-font

LESS

The main mixin is called: _fonts(WBC)
2.0.0

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self-hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Font usage

The brand or body font can be applied to any text using a simple class declaration. Refer to the digital brand guidelines regarding the use of typography.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)
<h1 class="brand-font">I’m a Heading using the brand font</h1>

<h1 class="body-font">I’m a Heading using the body font</h1>

CSS

Modifier classes:
  • brand-font
  • body-font

LESS

The main mixin is called: _fonts(WBC)
2.0.1

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without confirmation that you have the correct licence agreement in place.

Read more about Typography

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • brand-font

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without confirmation that you have the correct licence agreement in place.

Read more about the typography system

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Typographic scale

Our typographic scale has a limited set of type sizes that work together and help maintain a consistent type scale across all digital touch-points. Designers can use these sizes as they see fit however there are a few practical rules around the use of type sizes.

Read more about the typography system

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

Font weights

The typography system uses numerical values to assign different font weights rather than specifying the physical name or weight of the font. For example, assigning a value of 300 to the font weight property will display the light weight (providing It’s available). Unavailable weights display the logically closest weight. Font weights should always be used in alignment with the GUI and the digital brand guidelines.
Note: Do not use 300 (light) on text sizes below 18px or your text may fall out of an accessible colour contrast range.

Read more about the typography system

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)
2.0.2

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without confirmation that you have the correct licence agreement in place.

Read more about Typography

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • brand-font

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without confirmation that you have the correct licence agreement in place.

Read more about the typography system

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Typographic scale

Our typographic scale has a limited set of type sizes that work together and help maintain a consistent type scale across all digital touch-points. Designers can use these sizes as they see fit however there are a few practical rules around the use of type sizes.

Read more about the typography system

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

Font weights

The typography system uses numerical values to assign different font weights rather than specifying the physical name or weight of the font. For example, assigning a value of 300 to the font weight property will display the light weight (providing It’s available). Unavailable weights display the logically closest weight. Font weights should always be used in alignment with the GUI and the digital brand guidelines.
Note: Do not use 300 (light) on text sizes below 18px or your text may fall out of an accessible colour contrast range.

Read more about the typography system

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)
2.0.3

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.

Never use a web font without confirmation that you have the correct licence agreement in place.

Read more about Typography

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • brand-font

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.

Never use a web font without confirmation that you have the correct licence agreement in place.

Read more about Typography

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Typographic scale

Our typographic scale has a limited set of type sizes that work together and help maintain a consistent type scale across all digital touch-points. Designers can use these sizes as they see fit however there are a few practical rules around the use of type sizes.

Read more about Typography

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

Font weights

The typography system uses numerical values to assign different font weights rather than specifying the physical name or weight of the font. For example, assigning a value of 300 to the font weight property will display the light weight (providing It’s available). Unavailable weights display the logically closest weight. Font weights should always be used in alignment with the GUI and the digital brand guidelines.

Note: Do not use 300 (light) on text sizes below 18px or your text may fall out of an accessible colour contrast range.

Read more about Typography

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)
2.0.4

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.

Never use a web font without confirmation that you have the correct licence agreement in place.

Read more about Typography

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • brand-font

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.

Never use a web font without confirmation that you have the correct licence agreement in place.

Read more about Typography

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Typographic scale

Our typographic scale has a limited set of type sizes that work together and help maintain a consistent type scale across all digital touch-points. Designers can use these sizes as they see fit however there are a few practical rules around the use of type sizes.

Read more about Typography

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

Font weights

The typography system uses numerical values to assign different font weights rather than specifying the physical name or weight of the font. For example, assigning a value of 300 to the font weight property will display the light weight (providing It’s available). Unavailable weights display the logically closest weight. Font weights should always be used in alignment with the GUI and the digital brand guidelines.

Note: Do not use 300 (light) on text sizes below 18px or your text may fall out of an accessible colour contrast range.

Read more about Typography

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)
2.0.5

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.

Never use a web font without confirmation that you have the correct licence agreement in place.

Read more about Typography

What’s new since v2.0.4

This version changed: CSS/LESS but not: HTML, JS
  • Updated BOM brand’s font to ‘LL Brown’

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • brand-font

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.

Never use a web font without confirmation that you have the correct licence agreement in place.

Read more about Typography

What’s new since v2.0.4

This version changed: CSS/LESS but not: HTML, JS
  • Updated BOM brand’s font to ‘LL Brown’

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Typographic scale

Our typographic scale has a limited set of type sizes that work together and help maintain a consistent type scale across all digital touch-points. Designers can use these sizes as they see fit however there are a few practical rules around the use of type sizes.

Read more about Typography

What’s new since v2.0.4

This version changed: CSS/LESS but not: HTML, JS
  • Updated BOM brand’s font to ‘LL Brown’

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

Font weights

The typography system uses numerical values to assign different font weights rather than specifying the physical name or weight of the font. For example, assigning a value of 300 to the font weight property will display the light weight (providing It’s available). Unavailable weights display the logically closest weight. Font weights should always be used in alignment with the GUI and the digital brand guidelines.

Note: Do not use 300 (light) on text sizes below 18px or your text may fall out of an accessible colour contrast range.

Read more about Typography

What’s new since v2.0.4

This version changed: CSS/LESS but not: HTML, JS
  • Updated BOM brand’s font to ‘LL Brown’

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

Text Styling

1.0.0

Headings

All HTML headings, are available. H1 through to h6 classes are available and should be used instead of hardcoded headline tags. This enables you to use the styling but keep the accessibility order of headlines to the information structure of your page. The default spacing used in these headings may not be suitable in all cases. Use the margin classes to adjust spacing above and below headings.

<span class="h1 body-font">YOUR NON-SEMANTIC HEADLINE IN A SPAN</span>

<h3 class="h4">YOUR HEADLINE STYLED AS H4</h3>

LESS

The main mixin is called: _text-styling(WBC)

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="#url">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
</p>

LESS

The main mixin is called: _text-styling(WBC)
1.0.1

Headings

All HTML headings, are available. H1 through to h6 classes are available and should be used instead of hardcoded headline tags. This enables you to use the styling but keep the accessibility order of headlines to the information structure of your page. The default spacing used in these headings may not be suitable in all cases. Use the margin classes to adjust spacing above and below headings.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<span class="h1 body-font">YOUR NON-SEMANTIC HEADLINE IN A SPAN</span>

<h3 class="h4">YOUR HEADLINE STYLED AS H4</h3>

LESS

The main mixin is called: _text-styling(WBC)

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="#url">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
</p>

LESS

The main mixin is called: _text-styling(WBC)
1.0.2

Headings

All HTML headings, are available. H1 through to h6 classes are available and should be used instead of hardcoded headline tags. This enables you to use the styling but keep the accessibility order of headlines to the information structure of your page. The default spacing used in these headings may not be suitable in all cases. Use the margin classes to adjust spacing above and below headings.

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<span class="h1 body-font">YOUR NON-SEMANTIC HEADLINE IN A SPAN</span>

<h3 class="h4">YOUR HEADLINE STYLED AS H4</h3>

LESS

The main mixin is called: _text-styling(WBC)

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="#url">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
</p>

LESS

The main mixin is called: _text-styling(WBC)
1.0.3

Headings

All HTML headings, are available. H1 through to h6 classes are available and should be used instead of hardcoded headline tags. This enables you to use the styling but keep the accessibility order of headlines to the information structure of your page. The default spacing used in these headings may not be suitable in all cases. Use the margin classes to adjust spacing above and below headings.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<span class="h1 body-font">YOUR NON-SEMANTIC HEADLINE IN A SPAN</span>

<h3 class="h4">YOUR HEADLINE STYLED AS H4</h3>

LESS

The main mixin is called: _text-styling(WBC)

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="#url">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
</p>

LESS

The main mixin is called: _text-styling(WBC)
2.0.0

Headings

All HTML headings, are available. H1 through to h6 classes are available and should be used instead of hardcoded headline tags. This enables you to use the styling but keep the accessibility order of headlines to the information structure of your page. The default spacing used in these headings may not be suitable in all cases. Use the margin classes to adjust spacing above and below headings.

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<span class="h1 body-font">YOUR NON-SEMANTIC HEADLINE IN A SPAN</span>

<h3 class="h4">YOUR HEADLINE STYLED AS H4</h3>

LESS

The main mixin is called: _text-styling(WBC)

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Mark: Highlight a portion of text.

Del/Ins: Show changes by marking up what has been deleted and what has been inserted.

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="#url">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
	<mark>highlighted text</mark>
	<del>removed bit</del> <ins>replacement bit</ins>
</p>

LESS

The main mixin is called: _text-styling(WBC)
2.0.1

Headings

All HTML headings, are available. H1 through to h6 classes are available and should be used instead of hardcoded headline tags. This enables you to use the styling but keep the accessibility order of headlines to the information structure of your page. The default spacing used in these headings may not be suitable in all cases. Use the margin classes to adjust spacing above and below headings.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<span class="h1 body-font">YOUR NON-SEMANTIC HEADLINE IN A SPAN</span>

<h3 class="h4">YOUR HEADLINE STYLED AS H4</h3>

LESS

The main mixin is called: _text-styling(WBC)

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Mark: Highlight a portion of text.

Del/Ins: Show changes by marking up what has been deleted and what has been inserted.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="#url">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
	<mark>highlighted text</mark>
	<del>removed bit</del> <ins>replacement bit</ins>
</p>

LESS

The main mixin is called: _text-styling(WBC)
3.0.0

Display styles

This is a group of potential heading styles. These styles establlish a visual hierachy for a project.

Designers can adjust these classes to suit their needs providing they stay within the range of fonts, weights, colors and sizes described in the fonts core module.

Classes should always be used instead of hardcoded headline tags. This gives us flexible styling options while maintaining a semantic and accessible order of headlines.

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<span class="h1">YOUR NON-SEMANTIC HEADLINE IN A SPAN</span>

<h3 class="h4">YOUR SEMANTIC HEADLINE STYLED AS H4</h3>

CSS

Modifier classes:
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

LESS

The main mixin is called: _text-styling(WBC)

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Mark: Highlight a portion of text.

Del/Ins: Show changes by marking up what has been deleted and what has been inserted.

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="?">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
	<mark>highlighted text</mark>
	<del>removed bit</del> <ins>replacement bit</ins>
</p>

LESS

The main mixin is called: _text-styling(WBC)
4.0.0

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Mark: Highlight a portion of text.

Del/Ins: Show changes by marking up what has been deleted and what has been inserted.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • We have removed the classes for headlines. Wow. I know! The thing was, they were not really useful and more overwritten than used as is. Now you can go and run your own headlines. Prettier, more your. (#277)
  • Updated the normalize CSS to v4.2.0. (Everything is now even more normal)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="?">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
	<mark>highlighted text</mark>
	<del>removed bit</del> <ins>replacement bit</ins>
</p>

LESS

The main mixin is called: _text-styling(WBC)
4.0.1

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Mark: Highlight a portion of text.

Del/Ins: Show changes by marking up what has been deleted and what has been inserted.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • We have removed the classes for headlines. Wow. I know! The thing was, they were not really useful and more overwritten than used as is. Now you can go and run your own headlines. Prettier, more your. (#277)
  • Updated the normalize CSS to v4.2.0. (Everything is now even more normal)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="?">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
	<mark>highlighted text</mark>
	<del>removed bit</del> <ins>replacement bit</ins>
</p>

LESS

The main mixin is called: _text-styling(WBC)
4.0.2

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Mark: Highlight a portion of text.

Del/Ins: Show changes by marking up what has been deleted and what has been inserted.

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • We have removed the classes for headlines. Wow. I know! The thing was, they were not really useful and more overwritten than used as is. Now you can go and run your own headlines. Prettier, more your. (#277)
  • Updated the normalize CSS to v4.2.0. (Everything is now even more normal)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="?">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
	<mark>highlighted text</mark>
	<del>removed bit</del> <ins>replacement bit</ins>
</p>

LESS

The main mixin is called: _text-styling(WBC)

Headings

Heading styles are not managed by the GUI Framework, however we do maintain a @color-Headings variable for each brand and have mapped this through; setting the appropriate heading colour for all heading elements (h1h6).

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • We have removed the classes for headlines. Wow. I know! The thing was, they were not really useful and more overwritten than used as is. Now you can go and run your own headlines. Prettier, more your. (#277)
  • Updated the normalize CSS to v4.2.0. (Everything is now even more normal)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

LESS

The main mixin is called: _text-styling(WBC)
4.0.3

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Mark: Highlight a portion of text.

Del/Ins: Show changes by marking up what has been deleted and what has been inserted.

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Removed body element background-color setting for simplicity; it was never our intention for GUI to enforce a website background colour. Removing this setting makes things clearer. (#376)
  • Removed redundant a plain link background-color and text color styling

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • We have removed the classes for headlines. Wow. I know! The thing was, they were not really useful and more overwritten than used as is. Now you can go and run your own headlines. Prettier, more your. (#277)
  • Updated the normalize CSS to v4.2.0. (Everything is now even more normal)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="?">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
	<mark>highlighted text</mark>
	<del>removed bit</del> <ins>replacement bit</ins>
</p>

LESS

The main mixin is called: _text-styling(WBC)

Headings

Heading styles are not managed by the GUI Framework, however we do maintain a @color-Headings variable for each brand and have mapped this through; setting the appropriate heading colour for all heading elements (h1h6).

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Removed body element background-color setting for simplicity; it was never our intention for GUI to enforce a website background colour. Removing this setting makes things clearer. (#376)
  • Removed redundant a plain link background-color and text color styling

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • We have removed the classes for headlines. Wow. I know! The thing was, they were not really useful and more overwritten than used as is. Now you can go and run your own headlines. Prettier, more your. (#277)
  • Updated the normalize CSS to v4.2.0. (Everything is now even more normal)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

LESS

The main mixin is called: _text-styling(WBC)
4.0.4

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Mark: Highlight a portion of text.

Del/Ins: Show changes by marking up what has been deleted and what has been inserted.

What’s new since v4.0.3

This version changed: CSS/LESS, but not: HTML JS
  • Ensure OpenType ligatures are enabled for IE (modern browsers do this by default)

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Removed body element background-color setting for simplicity; it was never our intention for GUI to enforce a website background colour. Removing this setting makes things clearer. (#376)
  • Removed redundant a plain link background-color and text color styling

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • We have removed the classes for headlines. Wow. I know! The thing was, they were not really useful and more overwritten than used as is. Now you can go and run your own headlines. Prettier, more your. (#277)
  • Updated the normalize CSS to v4.2.0. (Everything is now even more normal)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="?">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
	<mark>highlighted text</mark>
	<del>removed bit</del> <ins>replacement bit</ins>
</p>

LESS

The main mixin is called: _text-styling(WBC)

Headings

Heading styles are not managed by the GUI Framework, however we do maintain a @color-Headings variable for each brand and have mapped this through; setting the appropriate heading colour for all heading elements (h1h6).

What’s new since v4.0.3

This version changed: CSS/LESS, but not: HTML JS
  • Ensure OpenType ligatures are enabled for IE (modern browsers do this by default)

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Removed body element background-color setting for simplicity; it was never our intention for GUI to enforce a website background colour. Removing this setting makes things clearer. (#376)
  • Removed redundant a plain link background-color and text color styling

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • We have removed the classes for headlines. Wow. I know! The thing was, they were not really useful and more overwritten than used as is. Now you can go and run your own headlines. Prettier, more your. (#277)
  • Updated the normalize CSS to v4.2.0. (Everything is now even more normal)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

LESS

The main mixin is called: _text-styling(WBC)
4.0.5

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Mark: Highlight a portion of text.

Del/Ins: Show changes by marking up what has been deleted and what has been inserted.

What’s new since v4.0.4

This version changed: CSS/LESS, but not: HTML JS
  • Dependency: GUI_colors v3.0.2
  • Updating focus outline styling (#433)
  • Reset default browser focus outline styling; applied to default interative and programatically focussed elements as required

What’s new since v4.0.3

This version changed: CSS/LESS, but not: HTML JS
  • Ensure OpenType ligatures are enabled for IE (modern browsers do this by default)

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Removed body element background-color setting for simplicity; it was never our intention for GUI to enforce a website background colour. Removing this setting makes things clearer. (#376)
  • Removed redundant a plain link background-color and text color styling

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • We have removed the classes for headlines. Wow. I know! The thing was, they were not really useful and more overwritten than used as is. Now you can go and run your own headlines. Prettier, more your. (#277)
  • Updated the normalize CSS to v4.2.0. (Everything is now even more normal)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="?">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
	<mark>highlighted text</mark>
	<del>removed bit</del> <ins>replacement bit</ins>
</p>

LESS

The main mixin is called: _text-styling(WBC)

Headings

Heading styles are not managed by the GUI Framework, however we do maintain a @color-Headings variable for each brand and have mapped this through; setting the appropriate heading colour for all heading elements (h1h6).

What’s new since v4.0.4

This version changed: CSS/LESS, but not: HTML JS
  • Dependency: GUI_colors v3.0.2
  • Updating focus outline styling (#433)
  • Reset default browser focus outline styling; applied to default interative and programatically focussed elements as required

What’s new since v4.0.3

This version changed: CSS/LESS, but not: HTML JS
  • Ensure OpenType ligatures are enabled for IE (modern browsers do this by default)

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Removed body element background-color setting for simplicity; it was never our intention for GUI to enforce a website background colour. Removing this setting makes things clearer. (#376)
  • Removed redundant a plain link background-color and text color styling

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • We have removed the classes for headlines. Wow. I know! The thing was, they were not really useful and more overwritten than used as is. Now you can go and run your own headlines. Prettier, more your. (#277)
  • Updated the normalize CSS to v4.2.0. (Everything is now even more normal)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

LESS

The main mixin is called: _text-styling(WBC)

Text Extensions

1.0.0

Lead text

Use lead text to make a paragraph stand out. Useful for skim reading. But don’t overdo it as too much will overpower the screen.

<p class="lead">
	YOUR TEXT
</p>

LESS

The main mixin is called: _text-extensions(WBC)

Text alignment

Quickly and easily align text to components with text alignment classes.

<p class="text-left">
	LEFT ALIGNED TEXT
</p>

<p class="text-center">
	CENTER ALIGNED TEXT
</p>

<p class="text-right">
	RIGHT ALIGNED TEXT
</p>

LESS

The main mixin is called: _text-extensions(WBC)

Text colours

Primary-text is the default colour for all text; muted-text is used to de-emphasise less important content. The colour difference is very subtle in some brands; however these colours are required to comply with accessibility requirements. Find out more about contextual text colours.

<p class="text-muted">
	I&rsquo;m text-muted. I&rsquo;m accessible on white, but always check.
</p>

<p class="text-primary">
	I&rsquo;m text-primary. I&rsquo;m super accessible. I&rsquo;m all about being seen.
</p>

LESS

The main mixin is called: _text-extensions(WBC)
2.0.0

Lead text

Use lead text to make a paragraph stand out. Useful for skim reading. But don’t overdo it as too much will overpower the screen.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<p class="lead">
	YOUR TEXT
</p>

LESS

The main mixin is called: _text-extensions(WBC)

Text alignment

Quickly and easily align text to components with text alignment classes.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<p class="text-left">
	LEFT ALIGNED TEXT
</p>

<p class="text-center">
	CENTER ALIGNED TEXT
</p>

<p class="text-right">
	RIGHT ALIGNED TEXT
</p>

LESS

The main mixin is called: _text-extensions(WBC)

Text colours

Primary-text is the default colour for all text; muted-text is used to de-emphasise less important content. The colour difference is very subtle in some brands; however these colours are required to comply with accessibility requirements. Find out more about contextual text colours.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<p class="text-muted">
	I&rsquo;m text-muted. I&rsquo;m accessible on white, but always check.
</p>

<p class="text-primary">
	I&rsquo;m text-primary. I&rsquo;m super accessible. I&rsquo;m all about being seen.
</p>

LESS

The main mixin is called: _text-extensions(WBC)
2.0.1

Lead text

Use lead text to make a paragraph stand out. Useful for skim reading. But don’t overdo it as too much will overpower the screen.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<p class="lead">
	YOUR TEXT
</p>

LESS

The main mixin is called: _text-extensions(WBC)

Text alignment

Quickly and easily align text to components with text alignment classes.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<p class="text-left">
	LEFT ALIGNED TEXT
</p>

<p class="text-center">
	CENTER ALIGNED TEXT
</p>

<p class="text-right">
	RIGHT ALIGNED TEXT
</p>

LESS

The main mixin is called: _text-extensions(WBC)

Text colours

Primary-text is the default colour for all text; muted-text is used to de-emphasise less important content. The colour difference is very subtle in some brands; however these colours are required to comply with accessibility requirements. Find out more about contextual text colours.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<p class="text-muted">
	I&rsquo;m text-muted. I&rsquo;m accessible on white, but always check.
</p>

<p class="text-primary">
	I&rsquo;m text-primary. I&rsquo;m super accessible. I&rsquo;m all about being seen.
</p>

LESS

The main mixin is called: _text-extensions(WBC)