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.

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)

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.

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)

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.

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)