Language selection

Search

Labels

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use the appropriate label to describe and highlight text-based (non-numerical) information.

Design and coding

Basic use

Default label

Use to feature a few words within a coloured background. It provides additional context about the adjacent content.

Appearance

Some text here (Label info)

Correct use

Compliance point(s):

  • Use .label-default to call attention to a section of content by adding short, text-based bits of supporting information
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use in alerts or buttons
  • Do not use to highlight unread items − use Badges
  • Do not highlight large sections of text − use Alerts
Code
<p>Some text here <span class="label label-default">(Label info)</span></p>

Primary label

Use to feature a few words within a coloured background that matches the colour theme of the site. It provides additional context about the adjacent content.

Appearance

Some text here (Label info)

Correct use

Compliance point(s):

  • Use .label-primary to call attention to a section of content by adding short, text-based bits of supporting information
  • Use to match the label to the colour theme of the site
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use in alerts or buttons
  • Do not use to highlight unread items − use Badges
  • Do not highlight large sections of text − use Alerts
Code
<p>Some text here <span class="label label-primary">(Label info)</span></p>

Success label

Use to feature a few words within a coloured background to suggest the content is correct. It provides additional context about the adjacent content.

Appearance

Some text here (Label info)

Correct use

Compliance point(s):

  • Use .label-success to call attention to a section of content by adding short, text-based bits of supporting information
  • Use to indicate that the content is correct
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use in alerts or buttons
  • Do not use to highlight unread items − use Badges
  • Do not highlight large sections of text − use Alerts
Code
<p>Some text here <span class="label label-success">(Label info)</span></p>

Info label

Use to feature a few words within a coloured background to suggest the content is informative. It provides additional context about the adjacent content.

Appearance

Some text here (Label info)

Correct use

Compliance point(s):

  • Use .label-info to call attention to a section of content by adding short, text-based bits of supporting information
  • Use to indicate that the content is informative in nature
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use in alerts or buttons
  • Do not use to highlight unread items − use Badges
  • Do not highlight large sections of text − use Alerts
Code
<p>Some text here <span class="label label-info">(Label info)</span></p>

Warning label

Use to feature a few words within a coloured background to suggest that the user needs to be warned. It provides additional context about the adjacent content.

Appearance

Some text here (Label info)

Correct use

Compliance point(s):

  • Use .label-warning to call attention to a section of content by adding short, text-based bits of supporting information
  • Use to indicate that the user needs to be warned
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use in alerts or buttons
  • Do not use to highlight unread items − use Badges
  • Do not highlight large sections of text − use Alerts
Code
<p>Some text here <span class="label label-warning">(Label info)</span></p>

Danger label

Use to feature a few words within a coloured background to suggest that the content or action is dangerous. It provides additional context about the adjacent content.

Appearance

Some text here (Label info)

Correct use

Compliance point(s):

  • Use .label-danger to call attention to a section of content by adding short, text-based bits of supporting information
  • Use to indicate that the content or action is dangerous
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use in alerts or buttons
  • Do not use to highlight unread items − use Badges
  • Do not highlight large sections of text − use Alerts
Code
<p>Some text here <span class="label label-danger">(Label info)</span></p>

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: