Other stuff is a collection of components and elements that don’t belong in any other category. There are some useful assets in this category and we’ll no doubt be adding to it in the future.

Badges

1.0.0

Styled element used to highlight a number. They can be used alone, with links or in buttons.

The button in this example is not included and will have to be added to the blend separately.

loading example… 
<span class="badge">
	<span class="badge-text">YOUR TEXT</span>
	<span class="badge-sronly">CONTEXT FOR SCREEN READERS</span>
</span>

LESS

The main mixin is called: _labels(WBC)
2.0.0

Styled element used to highlight a number. They can be used alone, with links or in buttons.

The button in this example is not included and will have to be added to the blend separately.

loading example…

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) 
<span class="badge">
	<span class="badge-text">YOUR TEXT</span>
	<span class="badge-sronly">CONTEXT FOR SCREEN READERS</span>
</span>

LESS

The main mixin is called: _labels(WBC)
2.0.1

Styled element used to highlight a number. They can be used alone, with links or in buttons.

The button in this example is not included and will have to be added to the blend separately.

loading example…

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) 
<span class="badge">
	<span class="badge-text">YOUR TEXT</span>
	<span class="badge-sronly">CONTEXT FOR SCREEN READERS</span>
</span>

LESS

The main mixin is called: _labels(WBC)
2.0.2

Styled element used to highlight a number. They can be used alone, with links or in buttons.

The button in this example is not included and will have to be added to the blend separately.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We expanded the badge styling to include primary, hero, faint, information, warning and danger colour schemes for each brand. (#266)

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) 
<span class="badge">
	<span class="badge-text">YOUR TEXT</span>
	<span class="badge-sronly">CONTEXT FOR SCREEN READERS</span>
</span>
<span class="badge badge-hero">
	<span class="badge-text">YOUR TEXT</span>
	<span class="badge-sronly">CONTEXT FOR SCREEN READERS</span>
</span>

CSS

Modifier classes:
  • badge-primary
  • badge-hero
  • badge-faint
  • badge-info
  • badge-warning
  • badge-danger

LESS

The main mixin is called: _labels(WBC)
2.0.3

Badges are styled elements generally used to highlight a number. They come in nine different styles and can be used alone, inside links or buttons.

Buttons are an independent ingredient (dependency) so make sure you include them in your blend if necessary.

loading example…

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Adjusted badge height (#318)
  • Updated button sizing styling to our new naming convention (in Button v4.0.0) (#380)
  • Removed .badge-text markup wrap requirement
  • Ensured all badge/button type combinations are considered (see Testing badges v2.0.3 WBC)
  • Added .badge-success option
  • Reduced CSS specificity (#346)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We expanded the badge styling to include primary, hero, faint, information, warning and danger colour schemes for each brand. (#266)

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) 
<span class="badge [badge-{TYPE}]">
	{BADGE_TEXT}
	<span class="badge-sronly">{CONTEXT_FOR_SCREEN_READERS}</span>
</span>

CSS

Modifier classes:
  • badge-primary
  • badge-hero
  • badge-neutral
  • badge-faint
  • badge-success
  • badge-info
  • badge-warning
  • badge-danger

LESS

The main mixin is called: _labels(WBC)
2.0.4

Badges are styled elements generally used to highlight a number. They come in nine different styles and can be used alone, inside links or buttons.

Buttons are an independent ingredient (dependency) so make sure you include them in your blend if necessary.

loading example…

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Migrate to relative CSS units (a11y) (#456)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Adjusted badge height (#318)
  • Updated button sizing styling to our new naming convention (in Button v4.0.0) (#380)
  • Removed .badge-text markup wrap requirement
  • Ensured all badge/button type combinations are considered (see Testing badges v2.0.3 WBC)
  • Added .badge-success option
  • Reduced CSS specificity (#346)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We expanded the badge styling to include primary, hero, faint, information, warning and danger colour schemes for each brand. (#266)

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) 
<span class="badge [badge-{TYPE}]">
	{BADGE_TEXT}
	<span class="badge-sronly">{CONTEXT_FOR_SCREEN_READERS}</span>
</span>

CSS

Modifier classes:
  • badge-primary
  • badge-hero
  • badge-neutral
  • badge-faint
  • badge-success
  • badge-info
  • badge-warning
  • badge-danger

LESS

The main mixin is called: _labels(WBC)
2.0.5

Badges are styled elements generally used to highlight a number. They come in nine different styles and can be used alone, inside links or buttons.

Buttons are an independent ingredient (dependency) so make sure you include them in your blend if necessary.

What’s new since v2.0.4

This version changed: CSS/LESS but not: HTML, JS
  • Dependency: GUI_colors v3.0.4
  • Remap Hero badge text colour for STG brand

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Migrate to relative CSS units (a11y) (#456)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Adjusted badge height (#318)
  • Updated button sizing styling to our new naming convention (in Button v4.0.0) (#380)
  • Removed .badge-text markup wrap requirement
  • Ensured all badge/button type combinations are considered (see Testing badges v2.0.3 WBC)
  • Added .badge-success option
  • Reduced CSS specificity (#346)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We expanded the badge styling to include primary, hero, faint, information, warning and danger colour schemes for each brand. (#266)

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) 
<span class="badge [badge-{TYPE}]">
	{BADGE_TEXT}
	<span class="badge-sronly">{CONTEXT_FOR_SCREEN_READERS}</span>
</span>

CSS

Modifier classes:
  • badge-primary
  • badge-hero
  • badge-neutral
  • badge-faint
  • badge-success
  • badge-info
  • badge-warning
  • badge-danger

LESS

The main mixin is called: _labels(WBC)

Labels

1.0.0

Styled elements to highlight words or links.

loading example… 
<span class="label">LABEL TEXT</span>

<a href="http://YOUR-URL.com.au" class="label">Default</a>

CSS

Modifier classes:
  • label-primary
  • label-hero

LESS

The main mixin is called: _labels(WBC)
2.0.0

Styled elements to highlight words or links.

loading example…

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) 
<span class="label">LABEL TEXT</span>

<a href="http://YOUR-URL.com.au" class="label">Default</a>

CSS

Modifier classes:
  • label-primary
  • label-hero

LESS

The main mixin is called: _labels(WBC)
2.0.1

Styled elements to highlight words or links.

loading example…

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) 
<span class="label">LABEL TEXT</span>

<a href="http://YOUR-URL.com.au" class="label">Default</a>

CSS

Modifier classes:
  • label-primary
  • label-hero

LESS

The main mixin is called: _labels(WBC)
2.0.2

Styled elements to highlight words or links.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • 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)

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) 
<span class="label">LABEL TEXT</span>

<a href="http://YOUR-URL.com.au" class="label">Default</a>

CSS

Modifier classes:
  • label-primary
  • label-hero

LESS

The main mixin is called: _labels(WBC)
2.0.3

Styled elements to highlight words or links.

loading example…

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We expanded the label styling to include neutral, faint, information, warning and danger colour schemes for each brand. (#266)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • 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)

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) 
<span class="label">LABEL TEXT</span>

<a href="http://YOUR-URL.com.au" class="label">Default</a>

CSS

Modifier classes:
  • label-primary
  • label-hero
  • label-neutral
  • label-faint
  • label-info
  • label-warning
  • label-danger

LESS

The main mixin is called: _labels(WBC)
2.0.4

Styled elements to highlight words or links.

loading example…

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Reduced CSS over-specificity

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We expanded the label styling to include neutral, faint, information, warning and danger colour schemes for each brand. (#266)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • 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)

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) 
<span class="label">LABEL TEXT</span>

<a href="http://YOUR-URL.com.au" class="label">Default</a>

CSS

Modifier classes:
  • label-primary
  • label-hero
  • label-neutral
  • label-faint
  • label-info
  • label-warning
  • label-danger

LESS

The main mixin is called: _labels(WBC)
2.0.5

Styled elements to highlight words or links.

loading example…

What’s new since v2.0.4

This version changed: CSS/LESS but not: HTML, JS
  • Added .label-success option
  • Further optimised CSS

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Reduced CSS over-specificity

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We expanded the label styling to include neutral, faint, information, warning and danger colour schemes for each brand. (#266)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • 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)

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) 
<!-- Label span -->
<span class="label [label-{TYPE}]">{LABEL_TEXT}</span>

<!-- Label link -->
<a href="{URL}" class="label [label-{TYPE}]">{LABEL_TEXT}</a>

CSS

Modifier classes:
  • label-primary
  • label-hero
  • label-neutral
  • label-faint
  • label-success
  • label-info
  • label-warning
  • label-danger

LESS

The main mixin is called: _labels(WBC)
2.0.6

Styled elements to highlight words or links.

loading example…

What’s new since v2.0.5

This version changed: CSS/LESS but not: HTML, JS
  • Migrate to relative CSS units (a11y) (#456)

What’s new since v2.0.4

This version changed: CSS/LESS but not: HTML, JS
  • Added .label-success option
  • Further optimised CSS

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Reduced CSS over-specificity

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We expanded the label styling to include neutral, faint, information, warning and danger colour schemes for each brand. (#266)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • 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)

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) 
<!-- Label span -->
<span class="label [label-{TYPE}]">{LABEL_TEXT}</span>

<!-- Label link -->
<a href="{URL}" class="label [label-{TYPE}]">{LABEL_TEXT}</a>

CSS

Modifier classes:
  • label-primary
  • label-hero
  • label-neutral
  • label-faint
  • label-success
  • label-info
  • label-warning
  • label-danger

LESS

The main mixin is called: _labels(WBC)
2.0.7

Styled elements to highlight words or links.

What’s new since v2.0.6

This version changed: CSS/LESS but not: HTML, JS
  • Dependency: GUI_colors v3.0.4
  • Remap Hero label text colour for STG brand

What’s new since v2.0.5

This version changed: CSS/LESS but not: HTML, JS
  • Migrate to relative CSS units (a11y) (#456)

What’s new since v2.0.4

This version changed: CSS/LESS but not: HTML, JS
  • Added .label-success option
  • Further optimised CSS

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Reduced CSS over-specificity

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We expanded the label styling to include neutral, faint, information, warning and danger colour schemes for each brand. (#266)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • 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)

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) 
<!-- Label span -->
<span class="label [label-{TYPE}]">{LABEL_TEXT}</span>

<!-- Label link -->
<a href="{URL}" class="label [label-{TYPE}]">{LABEL_TEXT}</a>

CSS

Modifier classes:
  • label-primary
  • label-hero
  • label-neutral
  • label-faint
  • label-success
  • label-info
  • label-warning
  • label-danger

LESS

The main mixin is called: _labels(WBC)

Progress Bars

1.0.0

A visual indication of progress. Use when loading content or to indicate how far along the user is in a journey.

loading example… 
<div class="progress-bar">
	<div class="progress-bar-indicator" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;" aria-live="polite">
		<span class="progress-bar-text">45%</span>
		<span class="progress-bar-srtext">Complete</span>
	</div>
</div>

<div class="progress-bar progress-bar-skinny">
	<div class="progress-bar-indicator" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%;" aria-live="polite">
		<span class="progress-bar-text">74%</span>
		<span class="progress-bar-srtext">Complete</span>
	</div>
</div>

CSS

Modifier classes:
  • progress-bar-skinny

LESS

The main mixin is called: _progress-bars(WBC)
2.0.0

A visual indication of progress. Use when loading content or to indicate how far along the user is in a journey.

loading example…

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) 
<div class="progress-bar">
	<div class="progress-bar-indicator" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;" aria-live="polite">
		<span class="progress-bar-text">45%</span>
		<span class="progress-bar-srtext">Complete</span>
	</div>
</div>

<div class="progress-bar progress-bar-skinny">
	<div class="progress-bar-indicator" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%;" aria-live="polite">
		<span class="progress-bar-text">74%</span>
		<span class="progress-bar-srtext">Complete</span>
	</div>
</div>

CSS

Modifier classes:
  • progress-bar-skinny

LESS

The main mixin is called: _progress-bars(WBC)
2.0.1

A visual indication of progress. Use when loading content or to indicate how far along the user is in a journey.

loading example…

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) 
<div class="progress-bar">
	<div class="progress-bar-indicator" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;" aria-live="polite">
		<span class="progress-bar-text">45%</span>
		<span class="progress-bar-srtext">Complete</span>
	</div>
</div>

<div class="progress-bar progress-bar-skinny">
	<div class="progress-bar-indicator" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%;" aria-live="polite">
		<span class="progress-bar-text">74%</span>
		<span class="progress-bar-srtext">Complete</span>
	</div>
</div>

CSS

Modifier classes:
  • progress-bar-skinny

LESS

The main mixin is called: _progress-bars(WBC)
2.0.2

A visual indication of progress. Use when loading content or to indicate how far along the user is in a journey.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Migrate to relative CSS units (a11y) (#456)

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) 
<div class="progress-bar">
	<div class="progress-bar-indicator" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;" aria-live="polite">
		<span class="progress-bar-text">45%</span>
		<span class="progress-bar-srtext">Complete</span>
	</div>
</div>

<div class="progress-bar progress-bar-skinny">
	<div class="progress-bar-indicator" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%;" aria-live="polite">
		<span class="progress-bar-text">74%</span>
		<span class="progress-bar-srtext">Complete</span>
	</div>
</div>

CSS

Modifier classes:
  • progress-bar-skinny

LESS

The main mixin is called: _progress-bars(WBC)
2.0.3

A visual indication of progress. Use when loading content or to indicate how far along the user is in a journey.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Dependency: GUI_colors v3.0.4
  • Remap indicator text colour for STG brand

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Migrate to relative CSS units (a11y) (#456)

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) 
<div class="progress-bar">
	<div class="progress-bar-indicator" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;" aria-live="polite">
		<span class="progress-bar-text">45%</span>
		<span class="progress-bar-srtext">Complete</span>
	</div>
</div>

<div class="progress-bar progress-bar-skinny">
	<div class="progress-bar-indicator" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%;" aria-live="polite">
		<span class="progress-bar-text">74%</span>
		<span class="progress-bar-srtext">Complete</span>
	</div>
</div>

CSS

Modifier classes:
  • progress-bar-skinny

LESS

The main mixin is called: _progress-bars(WBC)