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

1.0.0

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

<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(BOM)
1.0.1

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

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<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(BOM)
1.0.2

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

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<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(BOM)
1.0.3

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

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<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(BOM)
1.0.4

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

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<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(BOM)
2.0.0

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

What’s new since v1.0.4

This version changed: CSS/LESS, SVG 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)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<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(BOM)
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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG 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)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<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(BOM)
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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG 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)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<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(BOM)
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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG 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)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<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(BOM)
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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG 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)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<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(BOM)
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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG 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)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The checkboxes didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Check out our checkboxes. We've added a no-image fallback to the them so when you're tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native checkboxes, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the checkboxes appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now checkboxes proudly present their bottoms as well.
<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(BOM)

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(BOM)
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(BOM)
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(BOM)

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(BOM)
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(BOM)
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(BOM)

Icons-Base

1.0.0

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.

<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(BOM)

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.

<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(BOM)
1.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 v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Icons in different sizes were looking fuzzy and didn't scale correctly in IE8. Now they just look fuzzy but that's a story for another time. (#192)
<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(BOM)

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 v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Icons in different sizes were looking fuzzy and didn't scale correctly in IE8. Now they just look fuzzy but that's a story for another time. (#192)
<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(BOM)
2.0.0

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 v1.0.1

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)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Icons in different sizes were looking fuzzy and didn't scale correctly in IE8. Now they just look fuzzy but that's a story for another time. (#192)
<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(BOM)

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 v1.0.1

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)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Icons in different sizes were looking fuzzy and didn't scale correctly in IE8. Now they just look fuzzy but that's a story for another time. (#192)
<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(BOM)
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! 👏

What’s new since v1.0.1

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)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Icons in different sizes were looking fuzzy and didn't scale correctly in IE8. Now they just look fuzzy but that's a story for another time. (#192)
<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(BOM)

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

What’s new since v1.0.1

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)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Icons in different sizes were looking fuzzy and didn't scale correctly in IE8. Now they just look fuzzy but that's a story for another time. (#192)
<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(BOM)
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! 👏

What’s new since v1.0.1

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)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Icons in different sizes were looking fuzzy and didn't scale correctly in IE8. Now they just look fuzzy but that's a story for another time. (#192)
<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(BOM)

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

What’s new since v1.0.1

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)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Icons in different sizes were looking fuzzy and didn't scale correctly in IE8. Now they just look fuzzy but that's a story for another time. (#192)
<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(BOM)

Icons-Group 1

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Fixed a bug in Firefox where the fallback loading gif and the loading animation would show both at the same time. That was a bit of an "overload" on loading so we fixed that. #196
2.0.0

What’s new since v1.0.1

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

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Fixed a bug in Firefox where the fallback loading gif and the loading animation would show both at the same time. That was a bit of an "overload" on loading so we fixed that. #196
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! 👏

What’s new since v1.0.1

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

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Fixed a bug in Firefox where the fallback loading gif and the loading animation would show both at the same time. That was a bit of an "overload" on loading so we fixed that. #196
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! 👏

What’s new since v1.0.1

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

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Fixed a bug in Firefox where the fallback loading gif and the loading animation would show both at the same time. That was a bit of an "overload" on loading so we fixed that. #196

Icons-Group 2

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.2

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

Icons-Group 3

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.2

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

Icons-Group 4

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.2

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

Icons-Group 5

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • We removed the waves around the telephone icon because that was just so... retro. (What telephone isn't wireless these days? Seriously? We want to know) #160
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.2

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • We removed the waves around the telephone icon because that was just so... retro. (What telephone isn't wireless these days? Seriously? We want to know) #160
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • We removed the waves around the telephone icon because that was just so... retro. (What telephone isn't wireless these days? Seriously? We want to know) #160
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • We removed the waves around the telephone icon because that was just so... retro. (What telephone isn't wireless these days? Seriously? We want to know) #160
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

Icons-Group 6

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.2

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

Icons-Group 7

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.2

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML JS,
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML JS,
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML JS,
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

Icons-Group 8

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.2

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

Icons-Group 9

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.2

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • We added a wheelchair icon into the group. Please use responsibly. #170

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.3

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • The newly added wheelchair icon did not abide to the dress code we have here at the GUI headquarters. It now does. #189

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • We added a wheelchair icon into the group. Please use responsibly. #170

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.4

What’s new since v1.0.3

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • The newly added wheelchair icon did not abide to the dress code we have here at the GUI headquarters. It now does. #189

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • We added a wheelchair icon into the group. Please use responsibly. #170

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.3

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • The newly added wheelchair icon did not abide to the dress code we have here at the GUI headquarters. It now does. #189

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • We added a wheelchair icon into the group. Please use responsibly. #170

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.3

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • The newly added wheelchair icon did not abide to the dress code we have here at the GUI headquarters. It now does. #189

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • We added a wheelchair icon into the group. Please use responsibly. #170

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

Icons-Group 10

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.2

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

Icons-Group 11

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.2

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

Icons-Group 12

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • While preaching about collaboration and open source and asking developers to come to our GitHub repository to check out what we have done we were blissfully unaware of the missing GitHub icon in our icon sets. Take this as yet another nudge towards the awesome super-powers of open source, all packed into one small icon.
1.0.2

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • While preaching about collaboration and open source and asking developers to come to our GitHub repository to check out what we have done we were blissfully unaware of the missing GitHub icon in our icon sets. Take this as yet another nudge towards the awesome super-powers of open source, all packed into one small icon.
1.0.3

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • While preaching about collaboration and open source and asking developers to come to our GitHub repository to check out what we have done we were blissfully unaware of the missing GitHub icon in our icon sets. Take this as yet another nudge towards the awesome super-powers of open source, all packed into one small icon.
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

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • While preaching about collaboration and open source and asking developers to come to our GitHub repository to check out what we have done we were blissfully unaware of the missing GitHub icon in our icon sets. Take this as yet another nudge towards the awesome super-powers of open source, all packed into one small icon.
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

What’s new since v1.0.2

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • While preaching about collaboration and open source and asking developers to come to our GitHub repository to check out what we have done we were blissfully unaware of the missing GitHub icon in our icon sets. Take this as yet another nudge towards the awesome super-powers of open source, all packed into one small icon.

Icons-Group 13

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.2

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

Icons-Group 14

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.2

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

Icons-Group 15

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.2

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

Icons-Group 16

1.0.1

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
1.0.2

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
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

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

What’s new since v1.0.1

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

Icons-Group 17

1.0.1

What’s new since v1.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198
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

What’s new since v1.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198
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

What’s new since v1.0.0

This version changed: SVG, but not: CSS/LESS, HTML, JS
  • All icons now display in the muted colour by default and fallback to text color in IE8. #198

Input-Addons

1.0.0

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.

<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(BOM)
1.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 v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • The text inside the selects had just enough space so you could read them comfortably. Unless the text included a descender or ascender. In that case it would have been just a bit uncomfortable as you had to guess some parts of the letter. No more guessing. (#139)
<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(BOM)
2.0.0

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 v1.0.1

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)
  • On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • The text inside the selects had just enough space so you could read them comfortably. Unless the text included a descender or ascender. In that case it would have been just a bit uncomfortable as you had to guess some parts of the letter. No more guessing. (#139)
<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(BOM)
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! 👏

What’s new since v1.0.1

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)
  • On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • The text inside the selects had just enough space so you could read them comfortably. Unless the text included a descender or ascender. In that case it would have been just a bit uncomfortable as you had to guess some parts of the letter. No more guessing. (#139)
<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(BOM)
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! 👏

What’s new since v1.0.1

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)
  • On Safari, not to name and shame any browser (#SafariIsTheNewIE), elements showed some space between each other even though all other browsers totally got what we wanted. The elements wanted to be together as they all grew up together so we had to explain that to Safari. After a little discussion about the merits of a tight family even Safari couldn’t deny the cuddling. (#205)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • The text inside the selects had just enough space so you could read them comfortably. Unless the text included a descender or ascender. In that case it would have been just a bit uncomfortable as you had to guess some parts of the letter. No more guessing. (#139)
<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(BOM)

Radios

1.0.0

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

<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(BOM)
1.0.1

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

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<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(BOM)
1.0.2

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

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<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(BOM)
1.0.3

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

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<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(BOM)
1.0.4

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

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<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(BOM)
2.0.0

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

What’s new since v1.0.4

This version changed: CSS/LESS, SVG 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)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<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(BOM)
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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG 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)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<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(BOM)
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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG 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)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<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(BOM)
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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG 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)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<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(BOM)
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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG 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)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<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(BOM)
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! 👏

What’s new since v1.0.4

This version changed: CSS/LESS, SVG 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)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.3

This version changed: CSS/LESS, but not: HTML JS
  • The radios didn't flip anymore. Rather than flipping them off we taught them. Flipping awesome! #197

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Tune in to our radio buttons. We’ve added a no-image fallback to the them so when you’re tired of seeing our beautiful designed artwork, you now have a fallback to the old boring native radios, boooooo. #173

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • In some browsers the radio buttons appeared cut-off. That seemed a bit shy and insecure so we sent them to counselling. Now radio buttons proudly present their bottoms as well.
<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(BOM)