The following ingredients have been deprecated, generally merged into new or existing ingredients. The documentation provided is to be used as a reference for legacy projects.

Checkboxes

2.0.1

Checkboxes can sit either to the left or the right of the label.

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 class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • checkbox-flip

LESS

The main mixin is called: _checkboxes(BT)
2.0.2

Checkboxes can sit either to the left or the right of the label.

Add the disabled attribute on a checkbox to prevent user input and trigger a slightly different look.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The checkboxes slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the checkboxes although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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 class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • checkbox-flip

LESS

The main mixin is called: _checkboxes(BT)
2.0.3

Checkboxes can sit either to the left or the right of the label.

Add the disabled attribute on a checkbox to prevent user input and trigger a slightly different look.

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from checkbox marks (roll with .icon-* prefix for consistency)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The checkboxes slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the checkboxes although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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 class="checkbox">
	<input class="checkbox-input" type="checkbox" name="checkboxName">
	<span class="checkbox-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • checkbox-flip

LESS

The main mixin is called: _checkboxes(BT)
2.0.4

Checkboxes can sit either to the left or the right of the label.

Add the disabled attribute on a checkbox input or fieldset wrapper to prevent user input and trigger a slightly different look.

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • New .checkbox-block block level checkboxes; in addition to .checkbox-flip option
  • Fixed fieldset:disabled support in IE
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from checkbox marks (roll with .icon-* prefix for consistency)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The checkboxes slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the checkboxes although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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 class="checkbox [checkbox-flip] [checkbox-block]">
	<input type="checkbox" class="checkbox-input" name="{NAME}" value="{VALUE}">
	<span class="checkbox-text">{CHECKBOX_TEXT}</span>
</label>

CSS

Modifier class:
  • checkbox-flip
  • checkbox-block

LESS

The main mixin is called: _checkboxes(BT)
2.0.5

Checkboxes can sit either to the left or the right of the label.

Add the disabled attribute on a checkbox input or fieldset wrapper to prevent user input and trigger a slightly different look.

What’s new since v2.0.4

This version changed: CSS/LESS but not: HTML, JS
  • Fixing checkbox layout for Firefox (#407)
  • Ensuring sibling checkboxes are top aligned

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • New .checkbox-block block level checkboxes; in addition to .checkbox-flip option
  • Fixed fieldset:disabled support in IE
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from checkbox marks (roll with .icon-* prefix for consistency)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The checkboxes slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the checkboxes although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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 class="checkbox [checkbox-flip] [checkbox-block]">
	<input type="checkbox" class="checkbox-input" name="{NAME}" id="{INPUT_ID}" value="{VALUE}" [checked]>
	<span class="checkbox-text">{CHECKBOX_TEXT}</span>
</label>

CSS

Modifier class:
  • checkbox-flip
  • checkbox-block

LESS

The main mixin is called: _checkboxes(BT)

Footers

1.0.0

Basic footer

A simple global footer panel component for form pages etc.

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

IMPORTANT! The Footers ingredient is now deprecated, functionality merged into Templates from v2.0.0. It will be removed in a future release. Please refer to the Templates ingredient for new projects.

Demo
  <footer class="footer footer-basic">
    <div class="footer-inner">
        <div class="row">
          <div class="col-sm-9">
            <div class="footer-text">
              <p>{FOOTER_TEXT}</p>
            </div>
          </div>
          <div class="col-sm-3">
            <span class="footer-logo logo logo-multibrand-small-right" [data-grunticon-embed]></span>
          </div>
        </div>
      </div>
  </footer>

CSS

Modifier class:
  • footer-basic

LESS

The main mixin is called: _footers(BT)
1.0.1

Basic footer

A simple global footer panel component for form pages etc.

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

IMPORTANT! The Footers ingredient is now deprecated, functionality merged into Templates from v2.0.0. It will be removed in a future release. Please refer to the Templates ingredient for new projects.

Demo

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Upadated footer logo to allow for logo link
  <footer class="footer footer-basic">
    <div class="footer-inner">
        <div class="row">
          <div class="col-sm-9">
            <div class="footer-text">
              <p>{FOOTER_TEXT}</p>
            </div>
          </div>
          <div class="col-sm-3">
            <a href="{URL}" class="footer-logo">
              <span class="logo logo-multibrand-small-right" [data-grunticon-embed]></span>
            </a>
          </div>
        </div>
      </div>
  </footer>

CSS

Modifier class:
  • footer-basic

LESS

The main mixin is called: _footers(BT)
2.0.0

Basic footer

A simple global footer panel component for form pages etc. Basic footers have two divider options — default and fancy (currently WBC only).

The footer content area is flexible and the grid may be used as shown in the exmaple. Responsive styling for the security padlock icon is provided.

Logos and Icons are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

IMPORTANT! The Footers ingredient is now deprecated, functionality merged into Templates from v2.0.0. It will be removed in a future release. Please refer to the Templates ingredient for new projects.

Demo

What’s new since v1.0.1

This version changed: HTML, CSS/LESS, but not: JS
  • Improved A11Y of graphic links; .sr-only text added to logo links
  • Removed unnecessary embedded SVG setting (data-grunticon-embed) from logos. We are aiming to use the embedded option sparingly as per recommendation (see Grunticon v2.0 What’s New!). This option should only be used with SVGs requiring CSS styling.
  • Adding styling for the footer padlock icon (#410)
  • Branded divider line styling (currently WBC only) moved to an optional modifier class .footer-divider-fancy (#412)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Upadated footer logo to allow for logo link
  <footer class="footer footer-basic [footer-divider-fancy]">
    <div class="footer-inner">
      <!-- Footer content -->
      <div class="row">
        <div class="col-sm-9">
          <span class="footer-icon icon icon-padlock icon-small icon-medium-sm" data-grunticon-embed></span>
          <div class="footer-text">
            <p>{FOOTER_TEXT}</p>
          </div>
        </div>
        <div class="col-sm-3">
          <a href="{URL}" class="footer-logo">
            <span class="sr-only">{SCREEN_READER_ONLY_TEXT}</span>
            <span class="logo logo-multibrand-small-right"></span>
          </a>
        </div>
      </div>
    </div>
  </footer>

CSS

Modifier class:
  • footer-basic
  • footer-divider-fancy

LESS

The main mixin is called: _footers(BT)

Headers

1.0.0

Basic header

A simple global header panel component for form pages etc. Headers can house buttons of any size or type, logos, icons and use responsive toggle classes as necessary.

Note: Headers utilise CSS flex layout and will degrade to a simple but functional layout for older browsers (i.e. IE8&9).

Icons, Buttons, Logos, Accessibility Helpers and Responsive Toggles are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

IMPORTANT! The Headers ingredient is now deprecated, functionality merged into Templates from v2.0.0. It will be removed in a future release. Please refer to the Templates ingredient for new projects.

Demo
  <header class="header header-basic">
    <!-- Left side buttons -->
    <div class="header-left">
      <!-- Header button (a special button style for headers) -->
      <a href="{URL}" class="header-btn">
        <span class="icon icon-{NAME} [icon-{SIZE}] [icon-{SIZE}-{BREAKPOINT}-[only]]" [data-grunticon-embed]></span>
      </a>
    </div>

    <!-- Logo -->
    <div class="header-logo">
      <span class="logo logo-multibrand-small hidden-sm hidden-md hidden-lg" [data-grunticon-embed]></span>
      <span class="logo logo-multibrand-large hidden-xs" [data-grunticon-embed]></span>
      <span class="sr-only">{SCREENREADER_LOGO_TEXT}</span>
    </div>

    <!-- Right side buttons -->
    <div class="header-right">
      <!-- Standard button -->
      <a href="{URL}" class="btn btn-{TYPE} [btn-{SIZE}] [btn-{SIZE}-{BREAKPOINT}-[only]]">{BUTTON_TEXT}</a>
    </div>
  </header>

CSS

Modifier class:
  • header-basic

LESS

The main mixin is called: _headers(BT)
2.0.0

Basic header

A simple global header panel component for form pages etc. Headers can house buttons of any size or type, logos, icons and use responsive toggle classes as necessary.

Note: Headers utilise CSS flex layout and will degrade to a simple but functional layout for older browsers (i.e. IE8&9).

Icons, Buttons, Logos, Accessibility Helpers and Responsive Toggles are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

IMPORTANT! The Headers ingredient is now deprecated, functionality merged into Templates from v2.0.0. It will be removed in a future release. Please refer to the Templates ingredient for new projects.

Demo

What’s new since v1.0.0

This version changed: CSS/LESS, HTML and JS
  • New header contact module to support 'Call us' and 'LiveChat' CTAs
  • New JS dependency; providing drop shadow feature on window scroll (for fixed option)
  • Added new fixed header modifier option .header-fixed
  • Added .header-inner wrapper; giving us more flexibility with new fixed header option
  • Fixed header button icon vertical alignment
  • Fixed logo center option horizontal alignment and updated modifier class option to .header-logo-center-xs-only for consistency
  • Updated logo and right button gap slightly
  <header class="header header-basic [header-fixed js-header]">
    <div class="header-inner">
      <!-- Left side buttons -->
      <div class="header-left">
        <!-- Header button (a special button style for headers) -->
        <a href="{URL}" class="header-btn">
          <span class="icon icon-{NAME} [icon-{SIZE}] [icon-{SIZE}-{BREAKPOINT}-[only]]" [data-grunticon-embed]></span>
        </a>
      </div>

      <!-- Logo -->
      <div class="header-logo [header-logo-center-xs-only]">
        <span class="logo logo-multibrand-small hidden-sm hidden-md hidden-lg" [data-grunticon-embed]></span>
        <span class="logo logo-multibrand-large hidden-xs" [data-grunticon-embed]></span>
        <span class="sr-only">{SCREENREADER_LOGO_TEXT}</span>
      </div>

      <!-- Right side buttons -->
      <div class="header-right">
        <!-- 1. Standard button -->
        <a href="{URL}" class="btn btn-{TYPE} [btn-{SIZE}] [btn-{SIZE}-{BREAKPOINT}-[only]]">{BUTTON_TEXT}</a>

        <!-- 2. Header contact: 'Call us' -->
        <a href="tel:{TELEPHONE_NUMBER_NO_SPACES}" class="header-contact">
          <span class="header-contact-icon icon icon-telephone" data-grunticon-embed></span>
          <div class="header-contact-details hidden-xs">
            <div class="header-contact-text">Call us on</div>
            <div class="header-contact-text header-contact-text-accent">{TELEPHONE_NUMBER}</div>
          </div>
        </a>

        <!-- 3. Header contact: "LiveChat" -->
        <a href="{CHAT_URL}" class="header-contact">
          <span class="header-contact-icon icon icon-live-chat" data-grunticon-embed></span>
          <div class="header-contact-details hidden-xs">
            <div class="header-contact-text header-contact-text-accent">LiveChat</div>
            <div class="header-contact-text">Online now</div>
          </div>
        </a>
      </div>
    </div>
  </header>

CSS

Modifier class:
  • header-basic
  • header-fixed
  • header-logo-center-xs-only

LESS

The main mixin is called: _headers(BT)
3.0.0

Basic header

A simple global header panel component for form pages etc. Headers can house buttons of any size or type, logos, icons and use responsive toggle classes as necessary.

Note: Headers utilise CSS flex layout and will degrade to a simple but functional layout for older browsers (i.e. IE8&9).

Icons, Buttons, Logos, Accessibility Helpers and Responsive Toggles are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

IMPORTANT! The Headers ingredient is now deprecated, functionality merged into Templates from v2.0.0. It will be removed in a future release. Please refer to the Templates ingredient for new projects.

Demo

What’s new since v2.0.0

This version changed: HTML, CSS/LESS, but not: JS
  • Improved A11Y of graphic links; .sr-only text added to logo links
  • Removed unnecessary embedded SVG setting (data-grunticon-embed) from logos. We are aiming to use the embedded option sparingly as per recommendation (see Grunticon v2.0 What’s New!). This option should only be used with SVGs requiring CSS styling.
  • Increased mobile header height (from 44px to 54px - excl. bottom line), increase gap above/below header buttons for mobile and ensure header logo is vertically centre aligned (#409)
  • Added an additional fixed header breakpoint option .header-fixed-md
  • Made the header drop shadow styling reusable via a new mixin ._header-shadow()
  • Added the accessible .sr-skiplink element as per best practice
  • Removed .header-inner inline-block hack (font-size:0) as it’s no longer needed
  • Ensure fixed header always has a bottom border for <=IE9 (as linear-gradient not available)
  • Changed header button (arrow) icons to the default (medium) size; was sized large from sm breakpoint (.icon-large-sm)

What’s new since v1.0.0

This version changed: CSS/LESS, HTML and JS
  • New header contact module to support 'Call us' and 'LiveChat' CTAs
  • New JS dependency; providing drop shadow feature on window scroll (for fixed option)
  • Added new fixed header modifier option .header-fixed
  • Added .header-inner wrapper; giving us more flexibility with new fixed header option
  • Fixed header button icon vertical alignment
  • Fixed logo center option horizontal alignment and updated modifier class option to .header-logo-center-xs-only for consistency
  • Updated logo and right button gap slightly
  <header class="header header-basic [header-fixed js-header]">
    <div class="header-inner">
      <a href="#content" class="sr-skiplink">Skip to main content</a>

      <!-- Left side buttons -->
      <div class="header-left">
        <!-- Header button (a special button style for headers) -->
        <a href="{URL}" class="header-btn">
          <span class="sr-only">{SCREEN_READER_ONLY_TEXT}</span>
          <span class="icon icon-{NAME} [icon-{SIZE}] [icon-{SIZE}-{BREAKPOINT}-[only]]" [data-grunticon-embed]></span>
        </a>
      </div>

      <!-- Logo -->
      <a href="{URL}" class="header-logo [header-logo-center-xs-only]">
        <span class="sr-only">{SCREEN_READER_ONLY_TEXT}</span>
        <span class="logo logo-multibrand-small hidden-sm hidden-md hidden-lg"></span>
        <span class="logo logo-multibrand-large hidden-xs"></span>
      </a>

      <!-- Right side buttons -->
      <div class="header-right">
        <!-- 1. Standard button -->
        <a href="{URL}" class="btn btn-{TYPE} [btn-{SIZE}] [btn-{SIZE}-{BREAKPOINT}-[only]]">{BUTTON_TEXT}</a>

        <!-- 2. Header contact: 'Call us' -->
        <a href="tel:{TELEPHONE_NUMBER_NO_SPACES}" class="header-contact">
          <span class="header-contact-icon icon icon-telephone" data-grunticon-embed></span>
          <div class="header-contact-details hidden-xs">
            <div class="header-contact-text">Call us on</div>
            <div class="header-contact-text header-contact-text-accent">{TELEPHONE_NUMBER}</div>
          </div>
        </a>

        <!-- 3. Header contact: "LiveChat" -->
        <a href="{CHAT_URL}" class="header-contact">
          <span class="header-contact-icon icon icon-live-chat" data-grunticon-embed></span>
          <div class="header-contact-details hidden-xs">
            <div class="header-contact-text header-contact-text-accent">LiveChat</div>
            <div class="header-contact-text">Online now</div>
          </div>
        </a>
      </div>
    </div>
  </header>

CSS

Modifier class:
  • header-basic
  • header-fixed
  • header-logo-center-xs-only

LESS

The main mixin is called: _headers(BT)

Icons-Base

2.0.1

Sizing

These icons are designed on a 16px grid. They must only be used at the following sizes: 16px, 32px and 64px. If the icons are not used at these sizes they will appear blurred. Some of the icons should only be used at the small size. These are indicated below.

The message icon in this example is not included in Icons-Base and will have to be added to the blend separately.

IMPORTANT! The following icon ingredients are now deprecated in favour of a consolidated single-ingredient approach and will be removed in a future release. Please refer to the Icons ingredient for new projects.

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="icon icon-size-sm icon-message"></span>
<span class="icon icon-size-md icon-message"></span>
<span class="icon icon-size-lg icon-message"></span>

CSS

Modifier classes:
  • icon-size-sm
  • icon-size-md
  • icon-size-lg

LESS

The main mixin is called: _icons-base(BT)

Embedding

There are two ways to embed SVGs; As a background image or via direct embedding. Both methods are valid however it’s important to understand the implications. For example, using the background method is not semantic or accessible whereas direct embedding is accessible as every SVG comes with a title attribute that reflects its name.

The message icon in this example is not included in Icons-Base 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="icon icon-size-sm icon-message" data-grunticon-embed></span>
<span class="icon icon-size-sm icon-message icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-size-md icon-message" data-grunticon-embed></span>
<span class="icon icon-size-md icon-message icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-size-lg icon-message" data-grunticon-embed></span>
<span class="icon icon-size-lg icon-message icon-fillexample" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-size-sm
  • icon-size-md
  • icon-size-lg

LESS

The main mixin is called: _icons-base(BT)
2.0.2

Sizing

These icons are designed on a 16px grid. They must only be used at the following sizes: 16px, 32px and 64px. If the icons are not used at these sizes they will appear blurred. Some of the icons should only be used at the small size. These are indicated below.

The message icon in this example is not included in Icons-Base and will have to be added to the blend separately.

IMPORTANT! The following icon ingredients are now deprecated in favour of a consolidated single-ingredient approach and will be removed in a future release. Please refer to the Icons ingredient for new projects.

What’s new since v2.0.1

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

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="icon icon-size-sm icon-message"></span>
<span class="icon icon-size-md icon-message"></span>
<span class="icon icon-size-lg icon-message"></span>

CSS

Modifier classes:
  • icon-size-sm
  • icon-size-md
  • icon-size-lg

LESS

The main mixin is called: _icons-base(BT)

Embedding

There are two ways to embed SVGs; as a background image or via direct embedding. Both methods are valid however it’s important to understand the implications.

The background method is not semantic or accessible, whereas direct embedding is accessible as every SVG comes with a title attribute that reflects its name. The direct embedding method allows for simple fill colouring using CSS. It is also possible to colour icons using the background method if using the source code and running Grunt to compile. Refer to Grunticon for more details.

The message icon in this example is not included in the icons-base and will have to be added to the blend separately.

What’s new since v2.0.1

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

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="icon icon-size-sm icon-message" data-grunticon-embed></span>
<span class="icon icon-size-sm icon-message icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-size-md icon-message" data-grunticon-embed></span>
<span class="icon icon-size-md icon-message icon-fillexample" data-grunticon-embed></span>
<span class="icon icon-size-lg icon-message" data-grunticon-embed></span>
<span class="icon icon-size-lg icon-message icon-fillexample" data-grunticon-embed></span>

CSS

Modifier classes:
  • icon-size-sm
  • icon-size-md
  • icon-size-lg

LESS

The main mixin is called: _icons-base(BT)

Icons-Group 1

2.0.1

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! 👏
2.0.2

What’s new since v2.0.1

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

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! 👏

Icons-Group 2

2.0.0

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
3.0.0

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • We removed the floppy disk save icon because, let’s face it, no-one remembers what a floppy disk is.

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
3.0.1

What’s new since v3.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Updated the super icon to a new design. #323

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • We removed the floppy disk save icon because, let’s face it, no-one remembers what a floppy disk is.

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
3.0.2

What’s new since v3.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v3.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Updated the super icon to a new design. #323

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • We removed the floppy disk save icon because, let’s face it, no-one remembers what a floppy disk is.

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Icons-Group 3

2.0.0

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
2.0.1

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Icons-Group 4

2.0.0

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
2.0.1

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Icons-Group 5

2.0.0

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
2.0.1

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Icons-Group 6

2.0.0

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
2.0.1

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Icons-Group 7

2.0.0

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
2.0.1

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Icons-Group 8

2.0.0

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
2.0.1

What’s new since 2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Icons-Group 9

2.0.0

What’s new since v1.0.4

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
2.0.1

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v1.0.4

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Icons-Group 10

2.0.0

What’s new since v1.0.2

This version changed: SVG but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
2.0.1

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v1.0.2

This version changed: SVG but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Icons-Group 11

2.0.0

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
2.0.1

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Icons-Group 12

2.0.0

What’s new since v1.0.3

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
2.0.1

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Share icon updated to a more generic design, familiar across all platforms. #329
  • New Slack and Yammer social icons added. #330
  • New Instagram social icon added. #260
  • Social icons updated (facebook, google-plus, linkedin, rss, twitter, yammer, youtube).

What’s new since v1.0.3

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Icons-Group 13

2.0.0

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
2.0.1

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Icons-Group 14

2.0.0

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
2.0.1

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Icons-Group 15

2.0.0

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
2.0.1

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Icons-Group 16

2.0.1

What’s new since v2.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • It’s with great regret that we announce the removal of the sad face icon and it’s good friends happy and indifferent. Due to circumstances beyond our control we’ve been asked to delete our emoji friends from the GUI. Please spare a thought for these brave little characters. They brought sentiment, humanity and honesty to our interfaces and customers. #211
2.0.2

What’s new since v2.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v2.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • It’s with great regret that we announce the removal of the sad face icon and it’s good friends happy and indifferent. Due to circumstances beyond our control we’ve been asked to delete our emoji friends from the GUI. Please spare a thought for these brave little characters. They brought sentiment, humanity and honesty to our interfaces and customers. #211

Icons-Group 17

2.0.0

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204
2.0.1

What’s new since v2.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • Remove secondary .symbol-* prefix from all Icons. Icons use the .icon-* prefix and Symbols use the .symbol-* prefix exclusively.

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. #204

Input-Addons

2.0.1

Styled input fields with attached selects or buttons.

IMPORTANT! The Input Addons ingredient is now deprecated, functionality merged into Input Groups from v3.0.0. It will be removed in a future release. Please refer to the Input Groups ingredient for new projects.

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="input-addon">
	<label class="input-addon-label">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<input type="text" class="input-addon-input" placeholder="YOUR PLACEHOLDER">
	</label>
	<button type="submit" class="input-addon-btn">YOUR BUTTON TEXT</button>
</div>


<div class="input-addon">
	<label class="input-addon-select-wrapper">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<select class="input-addon-select">
			<option>Please select</option>
			<option>YOUR OPTION</option>
			<option>YOUR OPTION</option>
			<option>YOUR OPTION</option>
		</select>
	</label>

	<label class="input-addon-label">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<input type="text" class="input-addon-input" placeholder="YOUR PLACEHOLDER">
	</label>
</div>

CSS

Modifier classes:
  • input-addon-faint
  • input-addon-flip

LESS

The main mixin is called: _input-addons(BT)
2.0.2

Styled input fields with attached selects or buttons.
You can have a button or a select menu as an addon. To make it easier to use this element in a responsive site use the block option inside a col div.

IMPORTANT! The Input Addons ingredient is now deprecated, functionality merged into Input Groups from v3.0.0. It will be removed in a future release. Please refer to the Input Groups ingredient for new projects.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The input-addons historically caused issues by refusing to dynamically size its width. Let’s not look back to those dark times but focus on the fact that we’ve fixed it now. (#239)
  • IE8 and IE9, although not our favorite browsers, received some love as well.

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="input-addon">
	<label class="input-addon-label">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<input type="text" class="input-addon-input" placeholder="YOUR PLACEHOLDER">
	</label>
	<button type="submit" class="input-addon-btn">YOUR BUTTON TEXT</button>
</div>


<div class="input-addon">
	<label class="input-addon-select-wrapper">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<select class="input-addon-select">
			<option>Please select</option>
			<option>YOUR OPTION</option>
			<option>YOUR OPTION</option>
			<option>YOUR OPTION</option>
		</select>
	</label>

	<label class="input-addon-label">
		<span class="input-addon-text">SCREEN READER CONTEXT</span>
		<input type="text" class="input-addon-input" placeholder="YOUR PLACEHOLDER">
	</label>
</div>

CSS

Modifier classes:
  • input-addon-faint
  • input-addon-flip

LESS

The main mixin is called: _input-addons(BT)

Radios

2.0.1

Radio buttons can sit either to the left or the right of the label.

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 class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • radio-flip

LESS

The main mixin is called: _radios(BT)
2.0.2

Radio buttons can sit either to the left or the right of the label.

Add the disabled attribute on a radio button to prevent user input and trigger a slightly different look.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The radios slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the radios although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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 class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • radio-flip

LESS

The main mixin is called: _radios(BT)
2.0.3

Radio buttons can sit either to the left or the right of the label.

Add the disabled attribute on a radio button to prevent user input and trigger a slightly different look.

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from radio marks (roll with .icon-* prefix for consistency)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The radios slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the radios although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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 class="radio">
	<input class="radio-input" type="radio" name="options" value="option1">
	<span class="radio-text">YOUR TITLE</span>
</label>

<label class="radio">
	<input class="radio-input" type="radio" name="options" value="option2">
	<span class="radio-text">YOUR TITLE</span>
</label>

CSS

Modifier class:
  • radio-flip

LESS

The main mixin is called: _radios(BT)
2.0.4

Radios can sit either to the left or the right of the label.

Add the disabled attribute on a radio input or fieldset wrapper to prevent user input and trigger a slightly different look.

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • New .radio-block block level radios; in addition to .radio-flip option
  • Fixed fieldset:disabled support in IE
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from radio marks (roll with .icon-* prefix for consistency)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The radios slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the radios although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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 class="radio [radio-flip] [radio-block]">
	<input type="radio" class="radio-input" name="{NAME}" value="{VALUE}">
	<span class="radio-text">{RADIO_TEXT}</span>
</label>

CSS

Modifier class:
  • radio-flip
  • radio-block

LESS

The main mixin is called: _radios(BT)
2.0.5

Radios can sit either to the left or the right of the label.

Add the disabled attribute on a radio input or fieldset wrapper to prevent user input and trigger a slightly different look.

What’s new since v2.0.4

This version changed: CSS/LESS but not: HTML, JS
  • Fixing radio layout for Firefox (#407)
  • Ensuring sibling radios are top aligned

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • New .radio-block block level radios; in addition to .radio-flip option
  • Fixed fieldset:disabled support in IE
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from radio marks (roll with .icon-* prefix for consistency)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The radios slimmed down to 24px after a month of cardio and strict diet. (#151)
  • Printing the radios although not very functional, will now at least look good and make clear what selection was selected.
  • Some love was given to IE8 though we can’t say the browser seems to return our affection.

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 class="radio [radio-flip] [radio-block]">
	<input type="radio" class="radio-input" name="{NAME}" id="{INPUT_ID}" value="{VALUE}" [checked]>
	<span class="radio-text">{RADIO_TEXT}</span>
</label>

CSS

Modifier class:
  • radio-flip
  • radio-block

LESS

The main mixin is called: _radios(BT)