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
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.
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 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)
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)
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! 👏
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)
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! 👏
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
Styled elements to highlight words or links.
Styled elements to highlight words or links.
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)
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! 👏
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)
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)
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! 👏
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)
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! 👏
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)
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! 👏
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)