Global Footer

components.footer-image-header.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'h2',
  classNameBindings: ['headerClassName'],
  
  headerClassName: Ember.computed(function () {
    return `global-footer__${this.get('section')}-header`;
  })
});

components.footer-link-branded.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'a',
  attributeBindings: ['href'],
  classNames: ['global-footer__branded'],
  classNameBindings: ['linkClassName'],
  
  href: Ember.computed.oneWay('model.href'),
  linkClassName: Ember.computed('model.brand', function () {
  	return `is-${this.get('model.brand')}`;
	})
});

components.footer-link-image.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'a',
  attributeBindings: ['href'],
  classNames: ['global-footer__link'],
  classNameBindings: ['linkClassName'],
  
  linkClassName: Ember.computed(function () {
    return `is-${this.get('section')}`;
  }),
  
	href: Ember.computed.oneWay('model.href')
});

components.footer-link-text.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'a',
  attributeBindings: ['href'],
  classNames: ['global-footer__link'],
  
	href: Ember.computed.oneWay('model.href')
});

components.footer-section.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'section',
  classNameBindings: ['sectionClassName', 'parentSectionClassName'],
  
  sectionClassName: Ember.computed('name', function () {    
    return `is-${this.get('name')}`;
  }),
  
  parentSectionClassName: Ember.computed('parentName', function () {    
    return `global-footer__${this.get('parentName')}-section`;
  })
});

components.footer-wrapper.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'footer',
  classNames: ['global-footer'],
  classNameBindings: ['footerClassName'],
  
  isInternational: Ember.computed('language', function () {
    return this.get('language') !== 'en';
  }),
  
  footerClassName: Ember.computed('isInternational', function () {
    const suffix = this.get('isInternational') ? 'international' : 'en';
    
 		return `is-${suffix}`;
  })
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
	appName: 'Ember Twiddle',

	model: {
	"international_header": {
		"header": {
			"type": "image",
			"image": "company/logo-wikia",
			"title": {
				"type": "translatable-text",
				"key": "international-header-header"
			},
			"subtitle": {
				"type": "translatable-text",
				"key": "international-header-subtitle"
			}
		}
	},
	"fandom": {
		"header": {
			"type": "link-image",
			"image": "company/logo-fandom",
			"href": "http://fandom.wikia.com",
			"title": {
				"type": "translatable-text",
				"key": "fandom-header"
			}
		}
	},
	"fandom_overview": {
		"links": [
			{
				"type": "link-branded",
				"brand": "tv",
				"title": {
					"type": "translatable-text",
					"key": "fandom-link-vertical-tv"
				},
				"href": "http://tv.wikia.com"
			},
			{
				"type": "link-branded",
				"brand": "games",
				"title": {
					"type": "translatable-text",
					"key": "fandom-link-vertical-games"
				},
				"href": "http://games.wikia.com"
			},
			{
				"type": "link-branded",
				"brand": "movies",
				"title": {
					"type": "translatable-text",
					"key": "fandom-link-vertical-movies"
				},
				"href": "http://movies.wikia.com"
			},
			{
				"type": "link-branded",
				"brand": "fan-communities",
				"title": {
					"type": "translatable-text",
					"key": "fandom-link-fan-communities"
				},
				"href": "#"
			}
		]
	},
	"follow_us": {
		"header": {
			"type": "text",
			"title": {
				"type": "translatable-text",
				"key": "fandom-follow-us-header"
			}
		},
		"links": [
			{
				"type": "link-image",
				"image": "icons/facebook-default",
				"title": {
					"type": "translatable-text",
					"key": "fandom-follow-us-link-facebook"
				},
				"href": "#"
			},
			{
				"type": "link-image",
				"image": "icons/twitter-default",
				"title": {
					"type": "translatable-text",
					"key": "fandom-follow-us-link-twitter"
				},
				"href": "#"
			},
			{
				"type": "link-image",
				"image": "icons/reddit-default",
				"title": {
					"type": "translatable-text",
					"key": "fandom-follow-us-link-reddit"
				},
				"href": "#"
			},
			{
				"type": "link-image",
				"image": "icons/youtube-default",
				"title": {
					"type": "translatable-text",
					"key": "fandom-follow-us-link-youtube"
				},
				"href": "#"
			},
			{
				"type": "link-image",
				"image": "icons/instagram-default",
				"title": {
					"type": "translatable-text",
					"key": "fandom-follow-us-link-instagram"
				},
				"href": "#"
			}
		]
	},
	"wikia": {
		"header": {
			"type": "image",
			"image": "company/logo-wikia",
			"title": {
				"type": "translatable-text",
				"key": "wikia-header"
			}
		}
	},
	"company_overview": {
		"header": {
			"type": "text",
			"title": {
				"type": "translatable-text",
				"key": "wikia-overview-header"
			}
		},
		"links": [
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-company-overview-link-about"
				},
				"href": "#"
			},
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-company-overview-link-careers"
				},
				"href": "#"
			},
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-company-overview-link-news"
				},
				"href": "#"
			},
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-company-overview-link-contact"
				},
				"href": "#"
			},
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-company-overview-link-wikia-gives-back"
				},
				"href": "#"
			}
		]
	},
	"site_overview": {
		"links": [
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-site-overview-link-terms-of-use"
				},
				"href": "#"
			},
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-site-overview-link-privacy-policy"
				},
				"href": "#"
			},
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-site-overview-link-global-sitemap"
				},
				"href": "#"
			},
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-site-overview-link-api"
				},
				"href": "#"
			}
		]
	},
	"community": {
		"header": {
			"type": "text",
			"title": {
				"type": "translatable-text",
				"key": "wikia-community-header"
			}
		},
		"links": [
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-community-link-community-central"
				},
				"href": "#"
			},
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-community-link-support"
				},
				"href": "#"
			},
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-community-link-fan-contributor-program"
				},
				"href": "#"
			},
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-community-link-wam-score"
				},
				"href": "#"
			},
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-community-link-help"
				},
				"href": "#"
			}
		]
	},
	"create_wiki": {
		"description": {
			"type": "translatable-text",
			"key": "wikia-create-wiki-description"
		},
		"links": [
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-create-wiki-link-start-wikia"
				},
				"href": "#"
			}
		]
	},
	"community_apps": {
		"header": {
			"type": "text",
			"title": {
				"type": "translatable-text",
				"key": "wikia-community-apps-header"
			}
		},
		"description": {
			"type": "translatable-text",
			"key": "wikia-community-apps-description"
		},
		"links": [
			{
				"type": "link-image",
				"image": "company/store-appstore",
				"title": {
					"type": "translatable-text",
					"key": "wikia-community-apps-link-app-store"
				},
				"href": "#"
			},
			{
				"type": "link-image",
				"image": "company/store-googleplay",
				"title": {
					"type": "translatable-text",
					"key": "wikia-community-apps-link-google-play"
				},
				"href": "#"
			}
		]
	},
	"advertise": {
		"header": {
			"type": "text",
			"title": {
				"type": "translatable-text",
				"key": "wikia-advertise-header"
			}
		},
		"links": [
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-advertise-link-media-kit"
				},
				"href": "#"
			},
			{
				"type": "link-text",
				"title": {
					"type": "translatable-text",
					"key": "wikia-advertise-link-contact"
				},
				"href": "#"
			}
		]
	},
	"licensing_and_vertical": {
		"description": {
			"type": "translatable-text",
			"key": "wikia-licensing-and-vertical-description",
			"params": {
				"vertical": {
					"type": "link-text",
					"title": {
						"type": "translatable-text",
						"key": "wikia-licensing-and-vertical-link-games"
					},
					"href": "#"
				},
				"license": {
					"type": "link-text",
					"title": {
						"type": "text",
						"value": "CC-BY-SA"
					},
					"href": "#"
				}
			}
		}
	}
}
});

styles.app.css

.global-footer * {
  box-sizing: inherit; }

.global-footer ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

.global-footer {
  background-color: #39424d;
  box-sizing: border-box;
  color: #fff; }

.global-footer__header {
  align-items: center;
  display: flex;
  height: 100px;
  justify-content: center;
  margin: 0; }

.global-footer__licensing-and-vertical {
  align-items: center;
  background: rgba(38, 38, 38, 0.5);
  color: #fff;
  display: flex;
  font-size: 12px;
  justify-content: center;
  min-height: 50px;
  padding: 16px 20px;
  /**
	 * Note: The following rule is an exception on DS Class Naming because whole
	 * text is user-supplied and we don't insert class names there.
	 */ }
  .global-footer__licensing-and-vertical a,
  .global-footer__licensing-and-vertical a:visited,
  .global-footer__licensing-and-vertical a:hover {
    color: #1a5eb8;
    text-decoration: none; }

.global-footer__small-wikia-logo,
.global-footer__fandom-logo {
  height: 48px;
  padding-bottom: 12px;
  padding-top: 12px; }

.global-footer__large-wikia-logo {
  height: 50px; }

.global-footer__home-of-fandom {
  border-bottom: 1px solid #c5ced9;
  border-top: 1px solid #c5ced9;
  color: #7f90a1;
  display: block;
  letter-spacing: 0.5px;
  font-size: 12px;
  font-weight: bold;
  margin-left: 13px;
  margin-top: 8px;
  padding: 3px 0;
  text-transform: uppercase;
  white-space: nowrap; }

.global-footer__main {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; }

.global-footer__fandom-header,
.global-footer__wikia-header {
  margin: 0; }

.global-footer__fandom-sections,
.global-footer__wikia-sections {
  display: flex;
  flex-wrap: wrap; }

.global-footer__fandom-section,
.global-footer__wikia-section {
  border-top: 4px solid #656e78;
  margin-right: 55px;
  padding: 8px 0 30px 0; }

.global-footer__link,
.global-footer__link:hover,
.global-footer__link:active,
.global-footer__link:visited {
  color: #c5ced9;
  font-size: 14px;
  font-weight: normal;
  line-height: 2em;
  text-decoration: none; }

.global-footer__fandom-section.is-fandom-overview {
  border: 0;
  padding: 0; }

.global-footer__section-header {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px 0;
  padding: 0; }

.global-footer__section-description {
  color: #fff;
  font-size: 14px;
  line-height: 1.5em;
  margin: 0;
  padding: 0; }

.global-footer__branded-arrow {
  transform: rotate(180deg); }

.global-footer__branded {
  align-items: center;
  border-top: 4px solid #656e78;
  color: #fff;
  display: flex;
  font-size: 18px;
  font-weight: bold;
  justify-content: space-between;
  margin: 0;
  padding: 8px 0 36px 0;
  text-decoration: none; }
  .global-footer__branded.is-games {
    border-color: #94d11f; }
  .global-footer__branded.is-movies {
    border-color: #09d3bf; }
  .global-footer__branded.is-tv {
    border-color: #00b7e0; }

.global-footer__link.is-create-wiki {
  border: solid 1px #c5ced9;
  color: #c5ced9;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.3px;
  line-height: normal;
  margin-top: 13px;
  padding: 16px 18px;
  text-decoration: none;
  text-transform: uppercase; }

.global-footer__links.is-community-apps {
  display: flex; }

.global-footer__link.is-community-apps {
  display: block;
  line-height: normal;
  margin: 9px 0;
  width: 119px; }

.global-footer__links.is-follow-us {
  display: flex;
  flex-wrap: nowrap; }

.global-footer__link.is-follow-us {
  background: no-repeat center;
  background-size: 24px;
  display: inline-block;
  height: 24px;
  margin-right: 20px;
  width: 24px; }

@media screen and (max-width: 1023px) {
  .global-footer__main {
    margin: 0 20px; }
  .global-footer__fandom-header,
  .global-footer__wikia-header {
    margin: 20px 0; }
  .global-footer__link.is-follow-us {
    height: 42px;
    margin-right: 10px;
    width: 42px; }
  .global-footer__link.is-community-apps {
    margin-right: 25px; }
  .global-footer__fandom-section,
  .global-footer__wikia-section {
    margin: 0;
    width: 100%; }
  .global-footer__wikia-section.is-company-overview {
    order: 5;
    width: 50% !important; }
  .global-footer__wikia-section.is-company-overview > .global-footer__section-header {
    display: none; }
  .global-footer__wikia-section.is-site-overview {
    order: 6;
    width: 50% !important; }
  .global-footer__wikia-section.is-community {
    order: 2; }
  .global-footer__wikia-section.is-create-wiki {
    display: none; }
  .global-footer__wikia-section.is-community-apps {
    order: 4; }
  .global-footer__wikia-section.is-advertise {
    order: 1; }
  .global-footer.is-international .global-footer__fandom-section.is-fandom-overview {
    display: none; } }

@media only screen and (min-width: 1024px) {
  .global-footer__main,
  .global-footer__header {
    margin: 0 auto;
    width: 1024px; }
  .global-footer.is-en .global-footer__main {
    height: 455px; }
  .global-footer.is-international .global-footer__main {
    height: 395px; }
  .global-footer__fandom-header,
  .global-footer__wikia-header {
    height: 60px;
    margin: 12px 0; }
  .global-footer__fandom-header {
    width: 25%; }
  .global-footer__fandom-sections {
    height: 345px;
    width: 25%; }
  .global-footer__wikia-header {
    width: 75%; }
  .global-footer__wikia-sections {
    flex-direction: column;
    height: 355px;
    width: 75%; }
  .global-footer__links.is-community-apps {
    flex-direction: column; }
  .global-footer__fandom-section {
    width: 200px; }
  .global-footer__wikia-section.is-company-overview {
    height: 215px;
    margin-right: 50px;
    order: 1;
    width: 124px; }
  .global-footer__wikia-section.is-site-overview {
    height: 140px;
    margin-right: 50px;
    order: 2;
    width: 124px; }
  .global-footer__wikia-section.is-community {
    height: 215px;
    order: 3;
    width: 290px; }
  .global-footer__wikia-section.is-create-wiki {
    height: 140px;
    display: block;
    order: 4;
    width: 290px; }
  .global-footer__wikia-section.is-community-apps {
    height: 215px;
    order: 5;
    width: 200px; }
  .global-footer__wikia-section.is-advertise {
    height: 140px;
    order: 6;
    width: 200px; } }

/**
 * Breakpoints:
 *
 *     @example
 *     h4.breakpoint-preview-current-header Currently displayed breakpoint: 
 *     div.breakpoint-preview-current
 *     h4.breakpoint-preview-list-header All supported breakpoint media queries: 
 *     ul.breakpoint-preview-list
 *       li.breakpoint-preview-mobile-up
 *       li.breakpoint-preview-mobile-only
 *       li.breakpoint-preview-tablet-up
 *       li.breakpoint-preview-tablet-only
 *       li.breakpoint-preview-desktop-up
 *       li.breakpoint-preview-desktop-only
 *       li.breakpoint-preview-desktop-xl-up
 */
.breakpoint-preview-current-header,
.breakpoint-preview-list-header {
  font-weight: bold; }

.breakpoint-preview-current::after,
.breakpoint-preview-list ::after {
  font-family: monospace; }

.breakpoint-preview-mobile-up::after {
  content: "$breakpoint-mobile-up: only screen"; }

.breakpoint-preview-mobile-only::after {
  content: "$breakpoint-mobile-only: only screen and (max-width:767px)"; }

.breakpoint-preview-tablet-up::after {
  content: "$breakpoint-tablet-up: only screen and (min-width:768px)"; }

.breakpoint-preview-tablet-only::after {
  content: "$breakpoint-tablet-only: only screen and (min-width:768px) and (max-width:1023px)"; }

.breakpoint-preview-desktop-up::after {
  content: "$breakpoint-desktop-up: only screen and (min-width:1024px)"; }

.breakpoint-preview-desktop-only::after {
  content: "$breakpoint-desktop-only: only screen and (min-width:1024px) and (max-width:1439px)"; }

.breakpoint-preview-desktop-xl-up::after {
  content: "$breakpoint-desktop-xl-up: only screen and (min-width:1440px)"; }

.breakpoint-preview-current::after {
  content: "$breakpoint-$breakpoint-mobile-up (default): only screen";
  color: #1a5eb8; }

@media only screen and (min-width: 768px) {
  .breakpoint-preview-current::after {
    content: "$breakpoint-tablet-up: only screen and (min-width:768px)";
    color: #5ba200; } }

@media only screen and (min-width: 1024px) {
  .breakpoint-preview-current::after {
    content: "$breakpoint-desktop-up: only screen and (min-width:1024px)";
    color: #f08a24; } }

@media only screen and (min-width: 1440px) {
  .breakpoint-preview-current::after {
    content: "$breakpoint-desktop-xl-up: only screen and (min-width:1440px)";
    color: #ed1c24; } }

/**
 * Wikia Corporate Colors:
 *
 *     @example
 *     div.color-preview-group
 *       div#color-dark-blue.color-preview-card
 *         div.color-preview-box.color-dark-blue
 *         div.color-preview-name Dark Blue
 *         div.color-preview-variable $color-dark-blue
 *         div.color-preview-value #092344
 *       div#color-light-blue.color-preview-card
 *         div.color-preview-box.color-light-blue
 *         div.color-preview-name Light Blue
 *         div.color-preview-variable $color-light-blue
 *         div.color-preview-value #1a5eb8
 *       div#color-dark-blue-gray.color-preview-card
 *         div.color-preview-box.color-dark-blue-gray
 *         div.color-preview-name Dark Blue Gray
 *         div.color-preview-variable $color-dark-blue-gray
 *         div.color-preview-value #39424d
 *       div#color-slate-gray.color-preview-card
 *         div.color-preview-box.color-slate-gray
 *         div.color-preview-name Medium Gray
 *         div.color-preview-variable $color-slate-gray
 *         div.color-preview-value #656e78
 *       div#color-blue-gray.color-preview-card
 *         div.color-preview-box.color-blue-gray
 *         div.color-preview-name Blue Gray
 *         div.color-preview-variable $color-blue-gray
 *         div.color-preview-value #c5ced9
 *       div#color-light-blue-gray.color-preview-card
 *         div.color-preview-box.color-light-blue-gray
 *         div.color-preview-name Light Blue Gray
 *         div.color-preview-variable $color-light-blue-gray
 *         div.color-preview-value #e6ebf2
 *       div#color-faint-blue-gray.color-preview-card
 *         div.color-preview-box.color-faint-blue-gray
 *         div.color-preview-name Gray
 *         div.color-preview-variable $color-faint-blue-gray
 *         div.color-preview-value #f2f6fa
 *       div#color-white.color-preview-card
 *         div.color-preview-box.color-white
 *         div.color-preview-name White
 *         div.color-preview-variable $color-white
 *         div.color-preview-value #fff
 */
.color-dark-blue {
  background-color: #092344; }

.color-light-blue {
  background-color: #1a5eb8; }

.color-dark-blue-gray {
  background-color: #39424d; }

.color-slate-gray {
  background-color: #656e78; }

.color-blue-gray {
  background-color: #c5ced9; }

.color-light-blue-gray {
  background-color: #e6ebf2; }

.color-faint-blue-gray {
  background-color: #f2f6fa; }

.color-white {
  background-color: #fff; }

/**
 * Vertical Colors:
 *
 *     @example
 *     div.color-preview-group
 *       div#color-comics.color-preview-card
 *         div.color-preview-box.color-comics
 *         div.color-preview-name Comics
 *         div.color-preview-variable $color-comics
 *         div.color-preview-value #ff5400
 *       div#color-games.color-preview-card
 *         div.color-preview-box.color-games
 *         div.color-preview-name Games
 *         div.color-preview-variable $color-games
 *         div.color-preview-value #94d11f
 *       div#color-books.color-preview-card
 *         div.color-preview-box.color-books
 *         div.color-preview-name Books
 *         div.color-preview-variable $color-books
 *         div.color-preview-value #ff7f26
 *       div#color-movies.color-preview-card
 *         div.color-preview-box.color-movies
 *         div.color-preview-name Movies
 *         div.color-preview-variable $color-movies
 *         div.color-preview-value #09d3bf
 *       div#color-lifestyle.color-preview-card
 *         div.color-preview-box.color-lifestyle
 *         div.color-preview-name Lifestyle
 *         div.color-preview-variable $color-lifestyle
 *         div.color-preview-value #ffd000
 *       div#color-music.color-preview-card
 *         div.color-preview-box.color-music
 *         div.color-preview-name Music
 *         div.color-preview-variable $color-music
 *         div.color-preview-value #c819ad
 *       div#color-tv.color-preview-card
 *         div.color-preview-box.color-tv
 *         div.color-preview-name TV
 *         div.color-preview-variable $color-tv
 *         div.color-preview-value #00b7e0
 */
.color-comics {
  background-color: #ff5400; }

.color-games {
  background-color: #94d11f; }

.color-books {
  background-color: #ff7f26; }

.color-movies {
  background-color: #09d3bf; }

.color-lifestyle {
  background-color: #ffd000; }

.color-music {
  background-color: #c819ad; }

.color-tv {
  background-color: #00b7e0; }

/**
 * Alerts:
 *
 *     @example
 *     div.color-preview-group
 *       div#color-alert.color-preview-card
 *         div.color-preview-box.color-alert
 *         div.color-preview-name Alert/Delete
 *         div.color-preview-variable $color-alert
 *         div.color-preview-value #ed1c24
 *       div#color-warning.color-preview-card
 *         div.color-preview-box.color-warning
 *         div.color-preview-name Warning/Reported
 *         div.color-preview-variable $color-warning
 *         div.color-preview-value #f08a24
 *       div#color-success.color-preview-card
 *         div.color-preview-box.color-success
 *         div.color-preview-name Success/Approve
 *         div.color-preview-variable $color-success
 *         div.color-preview-value #5ba200
 *       div#color-message.color-preview-card
 *         div.color-preview-box.color-message
 *         div.color-preview-name Message
 *         div.color-preview-variable $color-message
 *         div.color-preview-value #1a5eb8
 */
.color-alert {
  background-color: #ed1c24; }

.color-warning {
  background-color: #f08a24; }

.color-success {
  background-color: #5ba200; }

.color-message {
  background-color: #1a5eb8; }

/**
 * Fandom Corporate Colors:
 *
 *     @example
 *     div.color-preview-group
 *       div#color-games.color-preview-card
 *         div.color-preview-box.color-games
 *         div.color-preview-name Games
 *         div.color-preview-variable $color-games
 *         div.color-preview-value #94d11f
 *       div#color-movies.color-preview-card
 *         div.color-preview-box.color-movies
 *         div.color-preview-name Movies
 *         div.color-preview-variable $color-movies
 *         div.color-preview-value #09d3bf
 *       div#color-tv.color-preview-card
 *         div.color-preview-box.color-tv
 *         div.color-preview-name TV
 *         div.color-preview-variable $color-tv
 *         div.color-preview-value #00b7e0
 *       div#color-dark-blue-gray.color-preview-card
 *         div.color-preview-box.color-dark-blue-gray
 *         div.color-preview-name Dark Blue Gray
 *         div.color-preview-variable $color-dark-blue-gray
 *         div.color-preview-value #39424d
 *       div#color-slate-gray.color-preview-card
 *         div.color-preview-box.color-slate-gray
 *         div.color-preview-name Medium Gray
 *         div.color-preview-variable $color-slate-gray
 *         div.color-preview-value #656e78
 *       div#color-blue-gray.color-preview-card
 *         div.color-preview-box.color-blue-gray
 *         div.color-preview-name Blue Gray
 *         div.color-preview-variable $color-blue-gray
 *         div.color-preview-value #c5ced9
 *       div#color-off-white.color-preview-card
 *         div.color-preview-box.color-off-white
 *         div.color-preview-name Off-White 96%
 *         div.color-preview-variable $color-off-white
 *         div.color-preview-value #f6f6f6
 */
.color-off-white {
  background-color: #f6f6f6; }

/**
 * Light Theme:
 *
 *     @example
 *     div.color-preview-group
 *       div#color-light-c1.color-preview-card
 *         div.color-preview-box.color-light-c1
 *         div.color-preview-name White 100%
 *         div.color-preview-variable $color-light-c1
 *         div.color-preview-value #fff
 *       div#color-light-c2.color-preview-card
 *         div.color-preview-box.color-light-c2
 *         div.color-preview-name Off-White 96%
 *         div.color-preview-variable $color-light-c2
 *         div.color-preview-value #f6f6f6
 *       div#color-light-c3.color-preview-card
 *         div.color-preview-box.color-light-c3
 *         div.color-preview-name Mist Gray 90%
 *         div.color-preview-variable $color-light-c3
 *         div.color-preview-value #e6e6e6
 *       div#color-light-c4.color-preview-card
 *         div.color-preview-box.color-light-c4
 *         div.color-preview-name Faint Gray 80%
 *         div.color-preview-variable $color-light-c4
 *         div.color-preview-value #ccc
 *       div#color-light-c5.color-preview-card
 *         div.color-preview-box.color-light-c5
 *         div.color-preview-name Light Gray 60%
 *         div.color-preview-variable $color-light-c5
 *         div.color-preview-value #999
 *       div#color-light-c6.color-preview-card
 *         div.color-preview-box.color-light-c6
 *         div.color-preview-name Dark Gray 20%
 *         div.color-preview-variable $color-light-c6
 *         div.color-preview-value #333
 *       div#color-light-c7.color-preview-card
 *         div.color-preview-box.color-light-c7
 *         div.color-preview-name Medium Gray 40%
 *         div.color-preview-variable $color-light-c7
 *         div.color-preview-value #666
 *       div#color-light-c8.color-preview-card
 *         div.color-preview-box.color-light-c8
 *         div.color-preview-name Gold
 *         div.color-preview-variable $color-light-c8
 *         div.color-preview-value #e3bd00
 */
.color-light-c1 {
  background-color: #fff; }

.color-light-c2 {
  background-color: #f6f6f6; }

.color-light-c3 {
  background-color: #e6e6e6; }

.color-light-c4 {
  background-color: #ccc; }

.color-light-c5 {
  background-color: #999; }

.color-light-c6 {
  background-color: #333; }

.color-light-c7 {
  background-color: #666; }

.color-light-c8 {
  background-color: #e3bd00; }

/**
 * Dark Theme:
 *
 *     @example
 *     div.color-preview-group
 *       div#color-dark-c1.color-preview-card
 *         div.color-preview-box.color-dark-c1
 *         div.color-preview-name Dark Gray 15%
 *         div.color-preview-variable $color-dark-c1
 *         div.color-preview-value #262626
 *       div#color-dark-c2.color-preview-card
 *         div.color-preview-box.color-dark-c2
 *         div.color-preview-name Dark Gray 10%
 *         div.color-preview-variable $color-dark-c2
 *         div.color-preview-value #1a1a1a
 *       div#color-dark-c3.color-preview-card
 *         div.color-preview-box.color-dark-c3
 *         div.color-preview-name Dark Gray 20%
 *         div.color-preview-variable $color-dark-c3
 *         div.color-preview-value #333
 *       div#color-dark-c4.color-preview-card
 *         div.color-preview-box.color-dark-c4
 *         div.color-preview-name Medium Gray 40%
 *         div.color-preview-variable $color-dark-c4
 *         div.color-preview-value #666
 *       div#color-dark-c5.color-preview-card
 *         div.color-preview-box.color-dark-c5
 *         div.color-preview-name Light Gray 60%
 *         div.color-preview-variable $color-dark-c5
 *         div.color-preview-value #999
 *       div#color-dark-c6.color-preview-card
 *         div.color-preview-box.color-dark-c6
 *         div.color-preview-name Faint Gray 80%
 *         div.color-preview-variable $color-dark-c6
 *         div.color-preview-value #ccc
 *       div#color-dark-c7.color-preview-card
 *         div.color-preview-box.color-dark-c7
 *         div.color-preview-name White 100%
 *         div.color-preview-variable $color-dark-c7
 *         div.color-preview-value #fff
 *       div#color-dark-c8.color-preview-card
 *         div.color-preview-box.color-dark-c8
 *         div.color-preview-name Gold
 *         div.color-preview-variable $color-dark-c8
 *         div.color-preview-value #e3bd00
 */
.color-dark-c1 {
  background-color: #262626; }

.color-dark-c2 {
  background-color: #1a1a1a; }

.color-dark-c3 {
  background-color: #333; }

.color-dark-c4 {
  background-color: #666; }

.color-dark-c5 {
  background-color: #999; }

.color-dark-c6 {
  background-color: #ccc; }

.color-dark-c7 {
  background-color: #fff; }

.color-dark-c8 {
  background-color: #e3bd00; }

/**
 * Standard Set (24x24):
 *
 *     @example
 *     div.icon-preview-group
 *       div.icon-preview-card
 *         div.icon.icon-alert
 *         div.icon-name alert
 *       div.icon-preview-card
 *         div.icon.icon-arrow
 *         div.icon-name arrow
 *       div.icon-preview-card
 *         div.icon.icon-bell
 *         div.icon-name bell
 *       div.icon-preview-card
 *         div.icon.icon-bold
 *         div.icon-name bold
 *       div.icon-preview-card
 *         div.icon.icon-bookmark
 *         div.icon-name bookmark
 *       div.icon-preview-card
 *         div.icon.icon-bullet-list
 *         div.icon-name bullet-list
 *       div.icon-preview-card
 *         div.icon.icon-camera
 *         div.icon-name camera
 *       div.icon-preview-card
 *         div.icon.icon-checkbox
 *         div.icon-name checkbox
 *       div.icon-preview-card
 *         div.icon.icon-checkmark
 *         div.icon-name checkmark
 *       div.icon-preview-card
 *         div.icon.icon-checkmark-circle
 *         div.icon-name checkmark-circle
 *       div.icon-preview-card
 *         div.icon.icon-clipboard
 *         div.icon-name clipboard
 *       div.icon-preview-card
 *         div.icon.icon-community
 *         div.icon-name community
 *       div.icon-preview-card
 *         div.icon.icon-controls
 *         div.icon-name controls
 *       div.icon-preview-card
 *         div.icon.icon-cross
 *         div.icon-name cross
 *       div.icon-preview-card
 *         div.icon.icon-document
 *         div.icon-name document
 *       div.icon-preview-card
 *         div.icon.icon-dropdown
 *         div.icon-name dropdown
 *       div.icon-preview-card
 *         div.icon.icon-eye
 *         div.icon-name eye
 *       div.icon-preview-card
 *         div.icon.icon-eye-crossed
 *         div.icon-name eye-crossed
 *       div.icon-preview-card
 *         div.icon.icon-flag
 *         div.icon-name flag
 *       div.icon-preview-card
 *         div.icon.icon-gear
 *         div.icon-name gear
 *       div.icon-preview-card
 *         div.icon.icon-gift
 *         div.icon-name gift
 *       div.icon-preview-card
 *         div.icon.icon-grid
 *         div.icon-name grid
 *       div.icon-preview-card
 *         div.icon.icon-house
 *         div.icon-name house
 *       div.icon-preview-card
 *         div.icon.icon-image
 *         div.icon-name image
 *       div.icon-preview-card
 *         div.icon.icon-image-add
 *         div.icon-name image-add
 *       div.icon-preview-card
 *         div.icon.icon-image-remove
 *         div.icon-name image-remove
 *       div.icon-preview-card
 *         div.icon.icon-information
 *         div.icon-name information
 *       div.icon-preview-card
 *         div.icon.icon-italics
 *         div.icon-name italics
 *       div.icon-preview-card
 *         div.icon.icon-link
 *         div.icon-name link
 *       div.icon-preview-card
 *         div.icon.icon-loading
 *         div.icon-name loading
 *       div.icon-preview-card
 *         div.icon.icon-lock
 *         div.icon-name lock
 *       div.icon-preview-card
 *         div.icon.icon-magnifying-glass
 *         div.icon-name magnifying-glass
 *       div.icon-preview-card
 *         div.icon.icon-mail
 *         div.icon-name mail
 *       div.icon-preview-card
 *         div.icon.icon-map
 *         div.icon-name map
 *       div.icon-preview-card
 *         div.icon.icon-menu
 *         div.icon-name menu
 *       div.icon-preview-card
 *         div.icon.icon-menu-control
 *         div.icon-name menu-control
 *       div.icon-preview-card
 *         div.icon.icon-more
 *         div.icon-name more
 *       div.icon-preview-card
 *         div.icon.icon-note
 *         div.icon-name note
 *       div.icon-preview-card
 *         div.icon.icon-numbered-list
 *         div.icon-name numbered-list
 *       div.icon-preview-card
 *         div.icon.icon-page
 *         div.icon-name page
 *       div.icon-preview-card
 *         div.icon.icon-pencil
 *         div.icon-name pencil
 *       div.icon-preview-card
 *         div.icon.icon-play
 *         div.icon-name play
 *       div.icon-preview-card
 *         div.icon.icon-plus
 *         div.icon-name plus
 *       div.icon-preview-card
 *         div.icon.icon-question
 *         div.icon-name question
 *       div.icon-preview-card
 *         div.icon.icon-quote
 *         div.icon-name quote
 *       div.icon-preview-card
 *         div.icon.icon-refresh
 *         div.icon-name refresh
 *       div.icon-preview-card
 *         div.icon.icon-reply
 *         div.icon-name reply
 *       div.icon-preview-card
 *         div.icon.icon-reply-arrow
 *         div.icon-name reply-arrow
 *       div.icon-preview-card
 *         div.icon.icon-share
 *         div.icon-name share
 *       div.icon-preview-card
 *         div.icon.icon-text
 *         div.icon-name text
 *       div.icon-preview-card
 *         div.icon.icon-trash
 *         div.icon-name trash
 *       div.icon-preview-card
 *         div.icon.icon-trash-open
 *         div.icon-name trash-open
 *       div.icon-preview-card
 *         div.icon.icon-undo
 *         div.icon-name undo
 *       div.icon-preview-card
 *         div.icon.icon-unlock
 *         div.icon-name unlock
 *       div.icon-preview-card
 *         div.icon.icon-upload
 *         div.icon-name upload
 *       div.icon-preview-card
 *         div.icon.icon-upvote
 *         div.icon-name upvote
 *       div.icon-preview-card
 *         div.icon.icon-user
 *         div.icon-name user
 *       div.icon-preview-card
 *         div.icon.icon-video-camera
 *         div.icon-name video-camera
 **/
.icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  height: 36px;
  width: 110px; }

.icon-name {
  padding: 5px; }

.icon-alert {
  background-image: url(../bower_components/design-system/assets/icons/alert.svg); }

.icon-arrow {
  background-image: url(../bower_components/design-system/assets/icons/arrow.svg); }

.icon-bell {
  background-image: url(../bower_components/design-system/assets/icons/bell.svg); }

.icon-bold {
  background-image: url(../bower_components/design-system/assets/icons/bold.svg); }

.icon-bookmark {
  background-image: url(../bower_components/design-system/assets/icons/bookmark.svg); }

.icon-bullet-list {
  background-image: url(../bower_components/design-system/assets/icons/bullet-list.svg); }

.icon-camera {
  background-image: url(../bower_components/design-system/assets/icons/camera.svg); }

.icon-checkbox {
  background-image: url(../bower_components/design-system/assets/icons/checkbox.svg); }

.icon-checkmark {
  background-image: url(../bower_components/design-system/assets/icons/checkmark.svg); }

.icon-checkmark-circle {
  background-image: url(../bower_components/design-system/assets/icons/checkmark-circle.svg); }

.icon-clipboard {
  background-image: url(../bower_components/design-system/assets/icons/clipboard.svg); }

.icon-community {
  background-image: url(../bower_components/design-system/assets/icons/community.svg); }

.icon-controls {
  background-image: url(../bower_components/design-system/assets/icons/controls.svg); }

.icon-cross {
  background-image: url(../bower_components/design-system/assets/icons/cross.svg); }

.icon-document {
  background-image: url(../bower_components/design-system/assets/icons/document.svg); }

.icon-dropdown {
  background-image: url(../bower_components/design-system/assets/icons/dropdown.svg); }

.icon-eye {
  background-image: url(../bower_components/design-system/assets/icons/eye.svg); }

.icon-eye-crossed {
  background-image: url(../bower_components/design-system/assets/icons/eye-crossed.svg); }

.icon-flag {
  background-image: url(../bower_components/design-system/assets/icons/flag.svg); }

.icon-gear {
  background-image: url(../bower_components/design-system/assets/icons/gear.svg); }

.icon-gift {
  background-image: url(../bower_components/design-system/assets/icons/gift.svg); }

.icon-grid {
  background-image: url(../bower_components/design-system/assets/icons/grid.svg); }

.icon-house {
  background-image: url(../bower_components/design-system/assets/icons/house.svg); }

.icon-image {
  background-image: url(../bower_components/design-system/assets/icons/image.svg); }

.icon-image-add {
  background-image: url(../bower_components/design-system/assets/icons/image-add.svg); }

.icon-image-remove {
  background-image: url(../bower_components/design-system/assets/icons/image-remove.svg); }

.icon-information {
  background-image: url(../bower_components/design-system/assets/icons/information.svg); }

.icon-italics {
  background-image: url(../bower_components/design-system/assets/icons/italics.svg); }

.icon-link {
  background-image: url(../bower_components/design-system/assets/icons/link.svg); }

.icon-loading {
  background-image: url(../bower_components/design-system/assets/icons/loading.svg); }

.icon-lock {
  background-image: url(../bower_components/design-system/assets/icons/lock.svg); }

.icon-magnifying-glass {
  background-image: url(../bower_components/design-system/assets/icons/magnifying-glass.svg); }

.icon-mail {
  background-image: url(../bower_components/design-system/assets/icons/mail.svg); }

.icon-map {
  background-image: url(../bower_components/design-system/assets/icons/map.svg); }

.icon-menu {
  background-image: url(../bower_components/design-system/assets/icons/menu.svg); }

.icon-menu-control {
  background-image: url(../bower_components/design-system/assets/icons/menu-control.svg); }

.icon-more {
  background-image: url(../bower_components/design-system/assets/icons/more.svg); }

.icon-note {
  background-image: url(../bower_components/design-system/assets/icons/note.svg); }

.icon-numbered-list {
  background-image: url(../bower_components/design-system/assets/icons/numbered-list.svg); }

.icon-page {
  background-image: url(../bower_components/design-system/assets/icons/page.svg); }

.icon-pencil {
  background-image: url(../bower_components/design-system/assets/icons/pencil.svg); }

.icon-play {
  background-image: url(../bower_components/design-system/assets/icons/play.svg); }

.icon-plus {
  background-image: url(../bower_components/design-system/assets/icons/plus.svg); }

.icon-question {
  background-image: url(../bower_components/design-system/assets/icons/question.svg); }

.icon-quote {
  background-image: url(../bower_components/design-system/assets/icons/quote.svg); }

.icon-refresh {
  background-image: url(../bower_components/design-system/assets/icons/refresh.svg); }

.icon-reply {
  background-image: url(../bower_components/design-system/assets/icons/reply.svg); }

.icon-reply-arrow {
  background-image: url(../bower_components/design-system/assets/icons/reply-arrow.svg); }

.icon-share {
  background-image: url(../bower_components/design-system/assets/icons/share.svg); }

.icon-text {
  background-image: url(../bower_components/design-system/assets/icons/text.svg); }

.icon-trash {
  background-image: url(../bower_components/design-system/assets/icons/trash.svg); }

.icon-trash-open {
  background-image: url(../bower_components/design-system/assets/icons/trash-open.svg); }

.icon-undo {
  background-image: url(../bower_components/design-system/assets/icons/undo.svg); }

.icon-unlock {
  background-image: url(../bower_components/design-system/assets/icons/unlock.svg); }

.icon-upload {
  background-image: url(../bower_components/design-system/assets/icons/upload.svg); }

.icon-upvote {
  background-image: url(../bower_components/design-system/assets/icons/upvote.svg); }

.icon-user {
  background-image: url(../bower_components/design-system/assets/icons/user.svg); }

.icon-video-camera {
  background-image: url(../bower_components/design-system/assets/icons/video-camera.svg); }

/**
 * Small Set (18x18):
 *     @example
 *     div.icon-preview-group
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-alert-small
 *         div.icon-name alert-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-bold-small
 *         div.icon-name bold-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-bookmark-small
 *         div.icon-name bookmark-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-bullet-list-small
 *         div.icon-name bullet-list-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-checkmark-small
 *         div.icon-name checkmark-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-clipboard-small
 *         div.icon-name clipboard-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-community-small
 *         div.icon-name community-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-eye-small
 *         div.icon-name eye-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-eye-crossed-small
 *         div.icon-name eye-crossed-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-house-small
 *         div.icon-name house-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-italics-small
 *         div.icon-name italics-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-lock-small
 *         div.icon-name lock-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-menu-control-small
 *         div.icon-name menu-control-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-numbered-list-small
 *         div.icon-name numbered-list-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-pencil-small
 *         div.icon-name pencil-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-quote-small
 *         div.icon-name quote-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-reply-small
 *         div.icon-name reply-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-reply-arrow-small
 *         div.icon-name reply-arrow-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-share-small
 *         div.icon-name share-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-text-small
 *         div.icon-name text-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-trash-small
 *         div.icon-name trash-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-trash-open-small
 *         div.icon-name trash-open-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-upvote-small
 *         div.icon-name upvote-small
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-unlock-small
 *         div.icon-name unlock-small
 **/
.icon-small {
  background-size: 18px; }

.icon-alert-small {
  background-image: url(../bower_components/design-system/assets/icons/alert-small.svg); }

.icon-bold-small {
  background-image: url(../bower_components/design-system/assets/icons/bold-small.svg); }

.icon-bookmark-small {
  background-image: url(../bower_components/design-system/assets/icons/bookmark-small.svg); }

.icon-bullet-list-small {
  background-image: url(../bower_components/design-system/assets/icons/bullet-list-small.svg); }

.icon-checkmark-small {
  background-image: url(../bower_components/design-system/assets/icons/checkmark-small.svg); }

.icon-clipboard-small {
  background-image: url(../bower_components/design-system/assets/icons/clipboard-small.svg); }

.icon-community-small {
  background-image: url(../bower_components/design-system/assets/icons/community-small.svg); }

.icon-eye-small {
  background-image: url(../bower_components/design-system/assets/icons/eye-small.svg); }

.icon-eye-crossed-small {
  background-image: url(../bower_components/design-system/assets/icons/eye-crossed-small.svg); }

.icon-house-small {
  background-image: url(../bower_components/design-system/assets/icons/house-small.svg); }

.icon-italics-small {
  background-image: url(../bower_components/design-system/assets/icons/italics-small.svg); }

.icon-lock-small {
  background-image: url(../bower_components/design-system/assets/icons/lock-small.svg); }

.icon-menu-control-small {
  background-image: url(../bower_components/design-system/assets/icons/menu-control-small.svg); }

.icon-numbered-list-small {
  background-image: url(../bower_components/design-system/assets/icons/numbered-list-small.svg); }

.icon-pencil-small {
  background-image: url(../bower_components/design-system/assets/icons/pencil-small.svg); }

.icon-quote-small {
  background-image: url(../bower_components/design-system/assets/icons/quote-small.svg); }

.icon-reply-small {
  background-image: url(../bower_components/design-system/assets/icons/reply-small.svg); }

.icon-reply-arrow-small {
  background-image: url(../bower_components/design-system/assets/icons/reply-arrow-small.svg); }

.icon-share-small {
  background-image: url(../bower_components/design-system/assets/icons/share-small.svg); }

.icon-text-small {
  background-image: url(../bower_components/design-system/assets/icons/text-small.svg); }

.icon-trash-small {
  background-image: url(../bower_components/design-system/assets/icons/trash-small.svg); }

.icon-trash-open-small {
  background-image: url(../bower_components/design-system/assets/icons/trash-open-small.svg); }

.icon-upvote-small {
  background-image: url(../bower_components/design-system/assets/icons/upvote-small.svg); }

.icon-unlock-small {
  background-image: url(../bower_components/design-system/assets/icons/unlock-small.svg); }

/**
 * Tiny Set (12x12):
 *     @example
 *     div.icon-preview-group
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-menu-control-tiny
 *         div.icon-name menu-control-tiny
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-reply-tiny
 *         div.icon-name reply-tiny
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-upvote-tiny
 *         div.icon-name upvote-tiny
 *       div.icon-preview-card
 *         div.icon.icon-small.icon-upvote-reply-tiny
 *         div.icon-name upvote-reply-tiny
 **/
.icon-tiny {
  background-size: 12px; }

.icon-menu-control-tiny {
  background-image: url(../bower_components/design-system/assets/icons/menu-control-tiny.svg); }

.icon-reply-tiny {
  background-image: url(../bower_components/design-system/assets/icons/reply-tiny.svg); }

.icon-upvote-tiny {
  background-image: url(../bower_components/design-system/assets/icons/upvote-tiny.svg); }

.icon-upvote-reply-tiny {
  background-image: url(../bower_components/design-system/assets/icons/upvote-reply-tiny.svg); }

/**
 * Social Icons:
 *
 *     @example
 *     div.icon-preview-group
 *       div.icon-preview-card
 *         div.icon.icon-facebook-active
 *         div.icon-name facebook-active
 *       div.icon-preview-card
 *         div.icon.icon-facebook-default
 *         div.icon-name facebook-default
 *       div.icon-preview-card
 *         div.icon.icon-google-plus-active
 *         div.icon-name google-plus-active
 *       div.icon-preview-card
 *         div.icon.icon-google-plus-default
 *         div.icon-name google-plus-default
 *       div.icon-preview-card
 *         div.icon.icon-instagram-active
 *         div.icon-name instagram-active
 *       div.icon-preview-card
 *         div.icon.icon-instagram-default
 *         div.icon-name instagram-default
 *       div.icon-preview-card
 *         div.icon.icon-line-active
 *         div.icon-name line-active
 *       div.icon-preview-card
 *         div.icon.icon-line-default
 *         div.icon-name line-default
 *       div.icon-preview-card
 *         div.icon.icon-meneame-active
 *         div.icon-name meneame-active
 *       div.icon-preview-card
 *         div.icon.icon-meneame-default
 *         div.icon-name meneame-default
 *       div.icon-preview-card
 *         div.icon.icon-nk-active
 *         div.icon-name nk-active
 *       div.icon-preview-card
 *         div.icon.icon-nk-default
 *         div.icon-name nk-default
 *       div.icon-preview-card
 *         div.icon.icon-odnoklassniki-active
 *         div.icon-name odnoklassniki-active
 *       div.icon-preview-card
 *         div.icon.icon-odnoklassniki-default
 *         div.icon-name odnoklassniki-default
 *       div.icon-preview-card
 *         div.icon.icon-qzone-active
 *         div.icon-name qzone-active
 *       div.icon-preview-card
 *         div.icon.icon-qzone-default
 *         div.icon-name qzone-default
 *       div.icon-preview-card
 *         div.icon.icon-reddit-active
 *         div.icon-name reddit-active
 *       div.icon-preview-card
 *         div.icon.icon-reddit-default
 *         div.icon-name reddit-default
 *       div.icon-preview-card
 *         div.icon.icon-tumblr-active
 *         div.icon-name tumblr-active
 *       div.icon-preview-card
 *         div.icon.icon-tumblr-default
 *         div.icon-name tumblr-default
 *       div.icon-preview-card
 *         div.icon.icon-twitter-active
 *         div.icon-name twitter-active
 *       div.icon-preview-card
 *         div.icon.icon-twitter-default
 *         div.icon-name twitter-default
 *       div.icon-preview-card
 *         div.icon.icon-vkontakte-active
 *         div.icon-name vkontakte-active
 *       div.icon-preview-card
 *         div.icon.icon-vkontakte-default
 *         div.icon-name vkontakte-default
 *       div.icon-preview-card
 *         div.icon.icon-weibo-active
 *         div.icon-name weibo-active
 *       div.icon-preview-card
 *         div.icon.icon-weibo-default
 *         div.icon-name weibo-default
 *       div.icon-preview-card
 *         div.icon.icon-wykop-active
 *         div.icon-name wykop-active
 *       div.icon-preview-card
 *         div.icon.icon-wykop-default
 *         div.icon-name wykop-default
 *       div.icon-preview-card
 *         div.icon.icon-youtube-active
 *         div.icon-name youtube-active
 *       div.icon-preview-card
 *         div.icon.icon-youtube-default
 *         div.icon-name youtube-default
 */
.icon-facebook-active {
  background-image: url(../bower_components/design-system/assets/icons/facebook-active.svg); }

.icon-facebook-default {
  background-image: url(../bower_components/design-system/assets/icons/facebook-default.svg); }

.icon-google-plus-default {
  background-image: url(../bower_components/design-system/assets/icons/google-plus-default.svg); }

.icon-google-plus-active {
  background-image: url(../bower_components/design-system/assets/icons/google-plus-active.svg); }

.icon-instagram-active {
  background-image: url(../bower_components/design-system/assets/icons/instagram-active.svg); }

.icon-instagram-default {
  background-image: url(../bower_components/design-system/assets/icons/instagram-default.svg); }

.icon-line-active {
  background-image: url(../bower_components/design-system/assets/icons/line-active.svg); }

.icon-line-default {
  background-image: url(../bower_components/design-system/assets/icons/line-default.svg); }

.icon-meneame-active {
  background-image: url(../bower_components/design-system/assets/icons/meneame-active.svg); }

.icon-meneame-default {
  background-image: url(../bower_components/design-system/assets/icons/meneame-default.svg); }

.icon-nk-active {
  background-image: url(../bower_components/design-system/assets/icons/nk-active.svg); }

.icon-nk-default {
  background-image: url(../bower_components/design-system/assets/icons/nk-default.svg); }

.icon-odnoklassniki-active {
  background-image: url(../bower_components/design-system/assets/icons/odnoklassniki-active.svg); }

.icon-odnoklassniki-default {
  background-image: url(../bower_components/design-system/assets/icons/odnoklassniki-default.svg); }

.icon-qzone-active {
  background-image: url(../bower_components/design-system/assets/icons/qzone-active.svg); }

.icon-qzone-default {
  background-image: url(../bower_components/design-system/assets/icons/qzone-default.svg); }

.icon-reddit-active {
  background-image: url(../bower_components/design-system/assets/icons/reddit-active.svg); }

.icon-reddit-default {
  background-image: url(../bower_components/design-system/assets/icons/reddit-default.svg); }

.icon-tumblr-active {
  background-image: url(../bower_components/design-system/assets/icons/tumblr-active.svg); }

.icon-tumblr-default {
  background-image: url(../bower_components/design-system/assets/icons/tumblr-default.svg); }

.icon-twitter-active {
  background-image: url(../bower_components/design-system/assets/icons/tumblr-active.svg); }

.icon-twitter-default {
  background-image: url(../bower_components/design-system/assets/icons/twitter-default.svg); }

.icon-vkontakte-active {
  background-image: url(../bower_components/design-system/assets/icons/vkontakte-active.svg); }

.icon-vkontakte-default {
  background-image: url(../bower_components/design-system/assets/icons/vkontakte-default.svg); }

.icon-weibo-active {
  background-image: url(../bower_components/design-system/assets/icons/weibo-active.svg); }

.icon-weibo-default {
  background-image: url(../bower_components/design-system/assets/icons/weibo-default.svg); }

.icon-wykop-active {
  background-image: url(../bower_components/design-system/assets/icons/wykop-active.svg); }

.icon-wykop-default {
  background-image: url(../bower_components/design-system/assets/icons/wykop-default.svg); }

.icon-youtube-active {
  background-image: url(../bower_components/design-system/assets/icons/youtube-active.svg); }

.icon-youtube-default {
  background-image: url(../bower_components/design-system/assets/icons/youtube-default.svg); }

/**
 * Typescale:
 *
 *     @example
 *     p
 *       div.typescale-size-plus-7 The quick brown fox jumps over the lazy dog
 *       code.sg $typograghy-size-plus-7
 *     p
 *       div.typescale-size-plus-6 The quick brown fox jumps over the lazy dog
 *       code.sg $typograghy-size-plus-6
 *     p
 *       div.typescale-size-plus-5 The quick brown fox jumps over the lazy dog
 *       code.sg $typograghy-size-plus-5
 *     p
 *       div.typescale-size-plus-4 The quick brown fox jumps over the lazy dog
 *       code.sg $typograghy-size-plus-4
 *     p
 *       div.typescale-size-plus-3 The quick brown fox jumps over the lazy dog
 *       code.sg $typograghy-size-plus-3
 *     p
 *       div.typescale-size-plus-2 The quick brown fox jumps over the lazy dog
 *       code.sg $typograghy-size-plus-2
 *     p
 *       div.typescale-size-plus-1 The quick brown fox jumps over the lazy dog
 *       code.sg $typograghy-size-plus-1
 *     p
 *       div.typescale-size-base The quick brown fox jumps over the lazy dog
 *       code.sg $typograghy-size-base
 *     p
 *       div.typescale-size-minus-1 The quick brown fox jumps over the lazy dog
 *       code.sg $typograghy-minus-1
 *     p
 *       div.typescale-size-minus-2 The quick brown fox jumps over the lazy dog
 *       code.sg $typograghy-minus-2
 *     p
 *       div.typescale-size-minus-3 The quick brown fox jumps over the lazy dog
 *       code.sg $typograghy-minus-3
 */
body {
  font-family: "San Francisco", "Helvetica Neue", "Roboto", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif; }

.typescale-size-base {
  font-size: 16px;
  line-height: 1.5em; }

.typescale-size-minus-1 {
  font-size: 14px;
  line-height: 1.5em; }

.typescale-size-minus-2 {
  font-size: 12px;
  line-height: 1.5em; }

.typescale-size-minus-3 {
  font-size: 10px;
  line-height: 1.5em; }

.typescale-size-plus-1 {
  font-size: 18px;
  line-height: 1.5em; }

.typescale-size-plus-2 {
  font-size: 24px;
  line-height: 1.5em; }

.typescale-size-plus-3 {
  font-size: 28px;
  line-height: 1.5em; }

.typescale-size-plus-4 {
  font-size: 36px;
  line-height: 1.5em; }

.typescale-size-plus-5 {
  font-size: 40px;
  line-height: 1.5em; }

.typescale-size-plus-6 {
  font-size: 48px;
  line-height: 1.5em; }

.typescale-size-plus-7 {
  font-size: 54px;
  line-height: 1.5em; }

.typescale-size-minus-3 {
  font-size: 10px;
  line-height: 1.5em; }

templates.application.hbs

<h1>English</h1>
{{footer-wrapper language='en' model=model}}

<h1>International</h1>
{{footer-wrapper language='pl' model=model}}

templates.components.footer-image-header.hbs

{{#if model.href}}
  <a href="{{model.href}}">
    <img class="global-footer__{{imageSizeModifier}}{{section}}-logo" src="http://public.diana.wikia-dev.com/design-system-reference-page/bower_components/design-system/assets/{{model.image}}.svg" alt="{{model.title.key}}">
  </a>
{{else}}
  <img class="global-footer__{{imageSizeModifier}}{{section}}-logo" src="http://public.diana.wikia-dev.com/design-system-reference-page/bower_components/design-system/assets/{{model.image}}.svg" alt="{{model.title.key}}">
{{/if}}

templates.components.footer-link-branded.hbs

<div>{{!model.title}}branded link</div>
<div class="global-footer__branded-arrow"></div>

templates.components.footer-link-image.hbs

<img alt="{{model.title.key}}" src="http://public.diana.wikia-dev.com/design-system-reference-page/bower_components/design-system/assets/{{model.image}}.svg">

templates.components.footer-link-text.hbs

{{!model.title.key}}
link

templates.components.footer-section.hbs

{{#if model.header.title}}
  <h3 class="global-footer__section-header">{{!model.header.title.key}}header</h3>
{{/if}}

{{#if model.description}}
  <div>{{model.description.key}}</div>
{{/if}}

<ul class="global-footer__links is-{{name}}">
	{{#each model.links as |link|}}
  <li>
  	{{component (concat 'footer-' link.type) model=link section=name}}
  </li>
	{{/each}}
</ul>

templates.components.footer-wrapper.hbs

{{#if isInternational}}
	<h2 class="global-footer__header">
    {{#with model.international_header.header as |header|}}
      <img class="global-footer__large-wikia-logo" src="http://public.diana.wikia-dev.com/design-system-reference-page/bower_components/design-system/assets/{{header.image}}.svg" alt="{{header.title.key}}">
      <span class="global-footer__home-of-fandom">{{header.subtitle.key}}</span>
    {{/with}}
	</h2>
{{/if}}
<div class="global-footer__main">
	{{#unless isInternational}}
  	{{footer-image-header model=model.fandom.header section='fandom'}}
  {{/unless}}
  <div class="global-footer__fandom-sections">
    {{footer-section model=model.fandom_overview name='fandom-overview' parentName='fandom'}}
    {{footer-section model=model.follow_us name='follow-us' parentName='fandom'}}
  </div>

	{{#unless isInternational}}
  	{{footer-image-header model=model.wikia.header section='wikia' imageSizeModifier='small-'}}
  {{/unless}}
  <div class="global-footer__wikia-sections">
    {{footer-section model=model.company_overview name='company-overview' parentName='wikia'}}
    {{footer-section model=model.site_overview name='site-overview' parentName='wikia'}}
    {{footer-section model=model.community name='community' parentName='wikia'}}
    {{footer-section model=model.create_wiki name='create-wiki' parentName='wikia'}}
    {{footer-section model=model.community_apps name='community-apps' parentName='wikia'}}
    {{footer-section model=model.advertise name='advertise' parentName='wikia'}}
  </div>
</div>
<div class="global-footer__licensing-and-vertical">
  {{#with model.licensing_and_vertical as |section|}}
    <span>{{section.description.key}}</span>
  {{/with}}
</div>

twiddle.json

{
  "version": "0.9.3",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  }
}