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

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! 👏
<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(WBG)
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.

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! 👏
<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(WBG)
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.

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! 👏
<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(WBG)

Labels

2.0.1

Styled elements to highlight words or links.

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! 👏
<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(WBG)
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! 👏
<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(WBG)
2.0.3

Styled elements to highlight words or links.

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! 👏
<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(WBG)
2.0.4

Styled elements to highlight words or links.

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! 👏
<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(WBG)
2.0.5

Styled elements to highlight words or links.

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! 👏
<!-- 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(WBG)

Progress-Bars

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! 👏
<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(WBG)