RubyGems - ustyle - Versions diffs - 1.3.12 → 1.4.0 - Mend

ustyle 1.3.12 → 1.4.0

Files changed (18) hide show

checksums.yaml +4 -4
data/Gruntfile.js +8 -1
data/dist/ustyle-content.css +1 -1
data/dist/ustyle-icons.css +1 -1
data/dist/ustyle-latest.css +1 -1
data/dist/ustyle.json +1 -1
data/dist/ustyle.min.js +1 -0
data/lib/ustyle/version.rb +1 -1
data/package.json +4 -4
data/styleguide/partials/_head.tpl +2 -2
data/tasks/publish.rake +1 -0
data/vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss +31 -53
data/vendor/assets/stylesheets/ustyle/components/_cta.scss +1 -1
data/vendor/assets/stylesheets/ustyle/components/_featured.scss +2 -2
data/vendor/assets/stylesheets/ustyle/components/_tabs.scss +72 -41
data/vendor/assets/stylesheets/ustyle/forms/_select.scss +27 -3
data/vendor/assets/stylesheets/ustyle/utilities/_general.scss +4 -0
metadata +3 -2

data/dist/ustyle.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"pages":[{"name":"Framework","page":"index.html","template":"styleguide/templates/simple.tpl","section":"brand","content":"<h2 id=\"we-believe-in-simplicity-\">We believe in simplicity.</h2>\n<p>That’s why we’ve made these guidelines really simple. They inform the way we look, feel, behave and sound as a company. They help ensure we remain consistent, impactful and recognisable across all of our communications.</p>\n<h3 id=\"our-values\">Our values</h3>\n<ul>\n<li>Fairness</li>\n<li>Knowledge</li>\n<li>Clarity</li>\n<li>Confidence</li>\n<li>Possibilities</li>\n</ul>\n<h3 id=\"our-mission\">Our mission</h3>\n<p>Using our expansive market knowledge and customer insight, we want to provide a simple, relevant service allowing customers to switch with minimal hassle.</p>\n<h3 id=\"our-ambition\">Our ambition</h3>\n<p>To be the UK’s leading comparison site for all consumers who wish to make their money go further.</p>\n<h3 id=\"our-vision\">Our vision</h3>\n<p>We are the comparison service of choice – because we make it relevant, personal and simple to use for consumers and partners.</p>\n<h3 id=\"our-benefit\">Our benefit</h3>\n<p>We help our customers feel like life just keeps on switching for the better, allowing their time and money to be spent on what really matters.</p>\n<h3 id=\"our-personality\">Our personality</h3>\n<ul>\n<li>Expert</li>\n<li>Frank</li>\n<li>Connected</li>\n<li>Human</li>\n<li>Advisory</li>\n</ul>\n<h2 id=\"brand-positioning\">Brand positioning</h2>\n<h3 id=\"intuitive-and-focused\">Intuitive and focused</h3>\n<p>We are connected to the individual needs of our customers. In fact, we work to understand them better than anyone. We use masses of customer data, constantly capturing more and more to continually improve the relevance of our advice. Add that to our commitment to ensure ours is the most simple and comprehensive switching service available, and our customers can find clarity in a confusing marketplace and build confidence in our brand.</p>\n<h3 id=\"authoritative-and-directional\">Authoritative and directional</h3>\n<p>We know what we’re talking about because we’re experts in what we do. We can demonstrate an unparalleled in-depth and connected understanding of our customers, the economy, household finances and the industries in which we operate. We’re always frank. We fight for what we believe is fair. And we do what we believe is right to build respect and trust.</p>\n<h3 id=\"personal-and-engaging\">Personal and engaging</h3>\n<p>We are a human brand that talks to our customers, not preaches. We treat them like knowledgeable peers. Always consistent in our tone, look and customer experience across all touch points. To make things easy to understand, information is visualised and bought to life, enabling our customers to see how they can save money or get better value for money.</p>\n<h3 id=\"experimental-and-bold\">Experimental and bold</h3>\n<p>We are pro-active, always adapting and pre-empting changes in customer mood and wider markets in which we exist. It lets our customers connect and interact with us with confidence.And we are proud of our BETA mindset. We stay agile, but we never look unpredictably experimental. Rather, we are open, current, honest, committed and consistent with our advice</p>\n"},{"name":"uSwitch living styleguide","page":"index.html","template":"styleguide/templates/simple.tpl","section":"","content":"<p>\n The sum of our efforts towards style guidelines, a pattern library and an automated front-end. Made with ❤ at <a href=\"http://www.uswitch.com\" target=\"_blank\"><strong class=\"us-color--blue\">uSwitch.com</strong></a>\n</p>\n<div class=\"us-content-group mobile-bordered\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <h3>Design guidelines</h3>\n <p>uStyle includes documentation and guidelines relating to our core design principles. It is where we document everything that happens within our brand, UX and front-end development.</p>\n </div>\n <div class=\"us-col-md-6\">\n <h3>Automated development</h3>\n <p>uStyle is a gem, a bower package, a npm package and static assets. This allows our team setup to choose how they wish to implement the core front-end of uSwitch. We've tried to be as accessible as possible.</p>\n </div>\n </div>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <h3>Pattern library</h3>\n <p>At its core, uStyle is a pattern library. It contains all current components and elements of the uSwitch UI. These are documented in the <a href=\"/pattern-library/\">pattern library</a> section.</p>\n </div>\n <div class=\"us-col-md-6\">\n <h3>Designer + developer happiness</h3>\n <p>Delivering designer + developer happiness is very important to us. uStyle provides a base for all our design and development work and allows our designers and developers to focus on the things that matter, whilst making their lives easier when prototyping.</p>\n </div>\n </div>\n</div>\n<div class=\"us-content-group\">\n <h2>The logo</h2>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-2\">\n <span class=\"us-icon--notext us-icon--ustyle us-icon--large logo--ustyle\"></span>\n </div>\n <div class=\"us-col-md-10\">\n <p>There is no reason for this logo other than it's funny and unicorns are all the rage just now.</p>\n\n <p><strong>Disclaimer:</strong> uSwitch is not a unicorn company.\n </div>\n </div>\n</div>\n<div class=\"us-content-group\">\n <h2>We're looking for great talent</h2>\n <p>Want to help us build more things like uStyle? We're constantly trying to deliver a better experience for customers and developers, and we're looking for passionate people to join our team.</p>\n <p>Fire us an email at <a href=\"mailto:jobs+developer@uswitch.com\">jobs@uswitch.com</a> with your CV and tell us a bit about yourself.</p>\n</div>\n"},{"name":"Introduction","page":"index.html","template":"styleguide/templates/simple.tpl","section":"pattern-library","content":"<p>\n Our pattern library comes as a easily distributed package, ready to use in multiple programming environments. It contains our basic CSS components and correct usage, as well as JavaScript components that are widely used across the website.\n</p>\n<a class=\"us-btn us-btn--small\" href=\"http://github.com/uswitch/ustyle\">View on github</a>\n<div class=\"us-content-group mobile-bordered\">\n <h2 class=\"trailered\">Distribution methods</h2>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6 trailered\">\n <img src=\"/images/ruby-logo.png\" alt=\"Ruby logo\" class=\"distro-image\">\n <h3>Ruby gem</h3>\n <p>uStyle was initially created as a gem. Some of the Sass functions rely on Ruby to run. You can install it via any Gemfile and it will install the required dependencies.</p>\n <pre><code class=\"ruby\">gem 'ustyle', git: \"git@github.com:uswitch/ustyle.git\"</code></pre>\n </div>\n <div class=\"us-col-md-6 trailered\">\n <img src=\"/images/bower-logo.png\" alt=\"Bower logo\" class=\"distro-image\">\n <h3>Bower package</h3>\n <p>Install is as a bower package. This will pull down the original <code>.scss</code> files and compiled static CSS + JS.</p>\n <pre><code class=\"javascript\">\n \"dependencies\": {\n \"ustyle\": \"git@github.com:uswitch/ustyle.git#~0.19.1\"\n }\n </code></pre>\n </div>\n </div>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6 trailered\">\n <img src=\"/images/cloudfront-logo.png\" alt=\"Cloudfront logo\" class=\"distro-image\">\n <h3>Cloudfront</h3>\n <p>Every time uStyle gets a new version, the version gets updated across our Cloudfront distributions.\n <pre><code class=\"html\">\n <!-- get latest -->\n <link href='//assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/ustyle-latest.css' media='all' rel='stylesheet' type='text/css' />\n <!-- get versioned -->\n <link href='//assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/VERSION/ustyle-latest.css' media='all' rel='stylesheet' type='text/css' />\n </code></pre>\n </div>\n <div class=\"us-col-md-6\">\n <img src=\"/images/npm-logo.png\" alt=\"NPM logo\" class=\"distro-image\">\n <h3>NPM Package</h3>\n <pre><code class=\"javascript\">\n \"devDependencies\": {\n \"ustyle\": \"git@github.com:uswitch/ustyle.git#~0.19.1\"\n }\n </code></pre>\n </div>\n </div>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <h2>Browser support</h2>\n <p>We use <a href=\"https://github.com/postcss/autoprefixer\">Autoprefixer + Browserlist</a> to decide what vendor prefixes to apply to our <code>Sass</code> files. We have a slightly wider browser support than the default (<a href=\"https://github.com/ai/browserslist#browserslist-\">here</a>). Currently we support all the way to IE8.</p>\n <p>Below is what we support. Each line is the minimum version or % use based on CanIUse metrics</p>\n <table class=\"pure-table pure-table-bordered\">\n <thead>\n <tr>\n <th>Browser</th>\n <th>Minimum version supported</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Safari, Chrome</td>\n <td>Last 5 versions</td>\n </tr>\n <tr>\n <td>Firefox</td>\n <td>22</td>\n </tr>\n <tr>\n <td>Opera</td>\n <td>12.1</td>\n </tr>\n <tr>\n <td>Internet Explorer</td>\n <td>8 (unless stated)</td>\n </tr>\n <tr>\n <td>Global usage</td>\n <td>> 1%</td>\n </tr>\n </tbody>\n </table>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <h2>Installation</h2>\n <p>See our github for documentation on installing this across applications.</p>\n</div>\n"},{"name":"Imagery","page":"index.html","template":"styleguide/templates/simple.tpl","section":"design","content":"\n<p>Our brand imagery is made up of <strong>lifestyle photography, product and object images, illustrations,</strong> and <strong>infographics.</strong> All of our imagery types should reassert our brand values of fairness, clarity and confidence.</p>\n<p>It’s important to remember that imagery is an extension of the uSwitch brand. It's use is to support or convey a message, not drive it.</p>\n<div class=\"us-content-group\">\n <h2>Lifestyle photography</h2>\n \n <p>Lifestyle photography should have a British feel where possible, avoiding obviously American or global images. It should be ‘reportage’ in style, avoiding cheesy, posed, forced or unrealistic photography.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-01.png\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-02.png\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-05.png\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-06.png\">\n </div>\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-03.png\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-04.png\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-07.png\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-08.png\">\n </div>\n </div>\n</div>\n<div class=\"us-content-group\">\n <h2>Product and object images</h2>\n <p>Our product and object focused imagery may be cut out over our brand colours, brand gradients or white. When objects aren’t cut out, they should be realistic in their setting and not appear staged. Images should be straightforward, not overly metaphor based, and should not appear noticeably manipulatd. Images should be ‘documentary’ in style, avoiding cheesy, posed, forced or unrealistic photography.</p>\n <p>This will also extend into 3D renderings of objects, which are used within the banner areas of our website.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-01.png\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-02.png\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-05.png\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-06.png\">\n </div>\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-03.png\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-04.png\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-07.png\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-08.png\">\n </div>\n </div>\n</div>\n<div class=\"us-content-group\">\n <h2>Illustrations</h2>\n <p>Our illustration style should be straightforward, clean and simple. Illustrations should be put over our brand colours, gradients or white, and they should be 2-D where possible, and not be overly metaphor based or cliché.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-01.png\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-02.png\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-05.png\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-06.png\">\n </div>\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-03.png\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-04.png\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-07.png\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-08.png\">\n </div>\n </div>\n</div>\n<div class=\"us-content-group\">\n <h2>Infographics</h2> \n <p>We use a 3D text effect to give some depth to our infographics. This should be used on objects to highlight or pull them out of the infographic. Due to the uniqueness of each infographic, there is not a rigid style in place. Just be as sympathetic to our guidelines as possible and use the colour palette.</p>\n <h4>Sizing</h4>\n <p>Infographics are generally displayed on our news and guide pages, so size the graphic accordingly (ie. 8 column width). They are also sometimes printed, so prepare them at 300dpi, then save at 72dpi if also needed for web.</p>\n \n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/infographic-01.png\">\n </div>\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/infographic-02.png\">\n </div>\n </div>\n </div>\n </div>\n</div>\n"},{"name":"Articles","page":"articles.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Articles","name":"Base article","description":"<p> Article listings for news are important on the landing pages.</p>\n","markup":{"example":" <article class='us-article'>\n <a class='us-article__link' href=\"#\">\n <div class='us-grid-row'>\n <div class='us-col-md-8'>\n <h3 class='us-article__title'>Car insurance guides</h3>\n <p class='us-article__description'>\n A quarter of 18-34 year olds believe that tech companies could offer better financial services than banks\n </p>\n <div class=\"us-article__meta\">\n <span class=\"date\">2 months ago</span>\n in\n <span class=\"category\">Banking</span>\n </div>\n </div>\n <div class='us-col-md-4 us-tablet--block'>\n <img class='us-img--full us-article__image' src='http://www.uswitch.com/insurance/assets/guide-home-16141c84afd29e2063ee76803037716c.jpg' />\n </div>\n </a>\n </div>\n </article>","escaped":" <article class='us-article'>\n <a class='us-article__link' href=\"#\">\n <div class='us-grid-row'>\n <div class='us-col-md-8'>\n <h3 class='us-article__title'>Car insurance guides</h3>\n <p class='us-article__description'>\n A quarter of 18-34 year olds believe that tech companies could offer better financial services than banks\n </p>\n <div class=\"us-article__meta\">\n <span class=\"date\">2 months ago</span>\n in\n <span class=\"category\">Banking</span>\n </div>\n </div>\n <div class='us-col-md-4 us-tablet--block'>\n <img class='us-img--full us-article__image' src='http://www.uswitch.com/insurance/assets/guide-home-16141c84afd29e2063ee76803037716c.jpg' />\n </div>\n </a>\n </div>\n </article>"},"path":"vendor/assets/stylesheets/ustyle/articles/_base.scss","file":"_base.scss","link":"base_article"},{"page":"Pattern Library/Articles","name":"Guide article","description":"<p> Our guide and news articles are used across the site to communicate news/guide snippets. The layout is decided by our grid, by default they have 100% width.</p>\n","markup":{"example":" <div class='us-article-group'>\n <div class='us-guide-item us-col-md-4'>\n <a class='us-guide-item-link' href='#'>\n <div class='us-guide-item-image-container'>\n <div class='us-guide-item-image background' style='background-image: url(http://www.uswitch.com/insurance/assets/guide-home-16141c84afd29e2063ee76803037716c.jpg)'></div>\n </div>\n <div class='us-guide-item-content'>\n <h4 class='us-guide-item-title'>Car insurance guides</h4>\n <p class='us-guide-item-description'>Read our car insurance advice guides for the facts on why you need car insurance, the types of cover available, and tips on how to make a claim.</p>\n </div>\n <div class='us-guide-item-readmore'>\n <span class='us-news-item-readmorelink'>Read more</span>\n </div>\n </a>\n </div>\n </div>","escaped":" <div class='us-article-group'>\n <div class='us-guide-item us-col-md-4'>\n <a class='us-guide-item-link' href='#'>\n <div class='us-guide-item-image-container'>\n <div class='us-guide-item-image background' style='background-image: url(http://www.uswitch.com/insurance/assets/guide-home-16141c84afd29e2063ee76803037716c.jpg)'></div>\n </div>\n <div class='us-guide-item-content'>\n <h4 class='us-guide-item-title'>Car insurance guides</h4>\n <p class='us-guide-item-description'>Read our car insurance advice guides for the facts on why you need car insurance, the types of cover available, and tips on how to make a claim.</p>\n </div>\n <div class='us-guide-item-readmore'>\n <span class='us-news-item-readmorelink'>Read more</span>\n </div>\n </a>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/articles/_guide.scss","file":"_guide.scss","link":"guide_article"},{"page":"Pattern Library/Articles","name":"More article","description":"<p> If the article listing has more in a category, we use this to let a user navigate to that category</p>\n","markup":{"example":" <div class='us-more-item us-col-md-4'>\n <a class='us-more-item-link' href='#'>\n <span class='us-more-item-title'>See more banking news</span>\n </a>\n </div>","escaped":" <div class='us-more-item us-col-md-4'>\n <a class='us-more-item-link' href='#'>\n <span class='us-more-item-title'>See more banking news</span>\n </a>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/articles/_more.scss","file":"_more.scss","link":"more_article"},{"page":"Pattern Library/Articles","name":"News article","description":"<p> The news item article standard. It mirrors the guide article. The news item image is a background image as the problem of not displaying <code><img></code> tags on mobile hasn't been resolved.</p>\n","markup":{"example":" <div class='us-article-group'>\n <div class='us-news-item us-col-md-4'>\n <a class='us-news-item-link' href='#'>\n <div class='us-news-item-image-container'>\n <div class='us-news-item-image background' style='background-image: url(http://uswitch-wp-blog-assets.s3-website-eu-west-1.amazonaws.com/wp-content/uploads/2013/09/Untitled-1.jpg)'></div>\n </div>\n <div class='us-news-meta'>\n <span class='category'>Consumer rights</span>\n <span class='date'>14 Nov 2014</span>\n </div>\n <h3 class='us-news-item-title'>Customer uses promoted tweet to complain about BA</h3>\n <p class='us-news-item-snippet'>Sign of things to come? Social media helps to empower disgruntled consumer amid lost luggage row</p>\n <div class='us-news-item-readmore'>\n <span class='us-news-item-readmorelink'>More consumer rights</span>\n </div>\n </a>\n </div>\n </div>","escaped":" <div class='us-article-group'>\n <div class='us-news-item us-col-md-4'>\n <a class='us-news-item-link' href='#'>\n <div class='us-news-item-image-container'>\n <div class='us-news-item-image background' style='background-image: url(http://uswitch-wp-blog-assets.s3-website-eu-west-1.amazonaws.com/wp-content/uploads/2013/09/Untitled-1.jpg)'></div>\n </div>\n <div class='us-news-meta'>\n <span class='category'>Consumer rights</span>\n <span class='date'>14 Nov 2014</span>\n </div>\n <h3 class='us-news-item-title'>Customer uses promoted tweet to complain about BA</h3>\n <p class='us-news-item-snippet'>Sign of things to come? Social media helps to empower disgruntled consumer amid lost luggage row</p>\n <div class='us-news-item-readmore'>\n <span class='us-news-item-readmorelink'>More consumer rights</span>\n </div>\n </a>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/articles/_news.scss","file":"_news.scss","link":"news_article"},{"page":"Pattern Library/Articles","name":"Related items","description":"<p> Related lists used for content sidebars</p>\n","markup":{"example":" <ul class=\"us-related us-list--reset\">\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">Car accident claims — How to make a car insurance claim</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">How to get the best car insurance deals</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">No claims bonus explained: how to protect a no claims discount</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link us-related__item-link--more\" href=\"#\">See more guides</a>\n </li>\n </ul>","escaped":" <ul class=\"us-related us-list--reset\">\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">Car accident claims — How to make a car insurance claim</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">How to get the best car insurance deals</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">No claims bonus explained: how to protect a no claims discount</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link us-related__item-link--more\" href=\"#\">See more guides</a>\n </li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/articles/_related.scss","file":"_related.scss","link":"related_items"}]},{"name":"Colours","page":"colours.html","template":"styleguide/templates/styleguide.tpl","section":"brand","blocks":[{"page":"Brand/Colours","name":"Primary palette","partial":"colour","description":"<p> Our colours (with a “u”, we’re a UK company) are divided into primary, secondary and tertiary palettes. The primary and secondary are core to all our design work and supported by the tertiary which we use in infographics, graphs and the like. CMYK equivalents are available for print work.</p>\n","variable":[{"name":"c-cyan","description":"Hero banners","value":"#99e2ff"},{"name":"c-navy","description":"Text with emphasis","value":"#1c1f4e"},{"name":"c-blue","description":"Logo","value":"#174695"},{"name":"c-typecyan","description":"Text links, icons","value":"#008fe9"},{"name":"c-typegrey","description":"Body text","value":"#333"},{"name":"c-typegrey-2","description":"Text without emphasis","value":"#767676"},{"name":"c-inputgrey","description":"Dropdowns, icons","value":"#97999a"},{"name":"c-bordergrey","description":"Borders","value":"#bbb"},{"name":"c-keylinegrey","description":"Keylines, separators","value":"#eaeaea"},{"name":"c-bggrey","description":"Backgrounds","value":"#f4f4f4"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"primary_palette"},{"page":"Brand/Colours","name":"Secondary palette","partial":"colour","variable":[{"name":"c-red","description":"Primary buttons","value":"#d64226"},{"name":"c-green","description":"Action buttons, USPs","value":"#2aaa5b"},{"name":"c-yellow","description":"USPs","value":"#ffd32f"},{"name":"c-orange","description":"USPs","value":"#f27930"},{"name":"c-purple","description":"USPs","value":"#9c55b8"},{"name":"c-navy-light","description":"","value":"#1a316e"},{"name":"c-blue-light","description":"","value":"#0c72bf"},{"name":"c-typecyan-light","description":"","value":"#4cc0f4"},{"name":"c-cyan-light","description":"","value":"#e4f8ff"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"secondary_palette"},{"page":"Brand/Colours","name":"Tertiary palette","partial":"colour","variable":[{"name":"c-yellow-lightest","description":"","value":"#ffedab"},{"name":"c-yellow-light","description":"","value":"#ffe06d"},{"name":"c-yellow-dark","description":"","value":"#d8b327"},{"name":"c-orange-lightest","description":"","value":"#f9c9ac"},{"name":"c-orange-light","description":"","value":"#f5a16e"},{"name":"c-orange-dark","description":"","value":"#cd6628"},{"name":"c-purple-lightest","description":"","value":"#d7bbe2"},{"name":"c-purple-light","description":"","value":"#b988cd"},{"name":"c-purple-dark","description":"","value":"#84489c"},{"name":"c-red-lightest","description":"","value":"#eeb3a8"},{"name":"c-red-light","description":"","value":"#e27a67"},{"name":"c-red-dark","description":"","value":"#b53820"},{"name":"c-green-lightest","description":"","value":"#a9ddbd"},{"name":"c-green-light","description":"","value":"#69c38c"},{"name":"c-green-dark","description":"","value":"#23904d"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"tertiary_palette"}]},{"name":"Utilities","page":"utilities.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Utilities","name":"General","description":"<p> These utility classes allow for some basic CSS properties to be applied across elements. The classname applies to the property that is getting set, with the value as the modifier.</p>\n","state":[{"name":".us-clearfix","escaped":"us-clearfix","description":"Clear floats","markup":{"example":" <div class='us-clearfix'>\n <p>content</p>\n </div>"}},{"name":".us-float--left","escaped":"us-float--left","description":"Float element to the left","markup":{"example":" <div class='us-float--left'>\n <p>content</p>\n </div>"}},{"name":".us-float--right","escaped":"us-float--right","description":"Float element to the right","markup":{"example":" <div class='us-float--right'>\n <p>content</p>\n </div>"}},{"name":".us-align--left","escaped":"us-align--left","description":"Align content of the element to the left","markup":{"example":" <div class='us-align--left'>\n <p>content</p>\n </div>"}},{"name":".us-align--center","escaped":"us-align--center","description":"Align content of the element to the center","markup":{"example":" <div class='us-align--center'>\n <p>content</p>\n </div>"}},{"name":".us-align--right","escaped":"us-align--right","description":"Align content of the element to the right","markup":{"example":" <div class='us-align--right'>\n <p>content</p>\n </div>"}},{"name":".us-block","escaped":"us-block","description":"Display element as a block","markup":{"example":" <div class='us-block'>\n <p>content</p>\n </div>"}},{"name":".us-color--cyan","escaped":"us-color--cyan","description":"Change content color to blue, navy, typecyan, cyan, red, green","markup":{"example":" <div class='us-color--cyan'>\n <p>content</p>\n </div>"}},{"name":".us-list--reset","escaped":"us-list--reset","description":"Reset list style","markup":{"example":" <div class='us-list--reset'>\n <p>content</p>\n </div>"}}],"markup":{"example":" <div class='{$modifiers}'>\n <p>content</p>\n </div>","escaped":" <div>\n <p>content</p>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_general.scss","file":"_general.scss","link":"general"},{"page":"Pattern Library/Utilities","name":"Images","description":"<p> Helpful image classes for making images full width or floating within content.</p>\n","state":[{"name":".us-img--full","escaped":"us-img--full","description":"Full width image","markup":{"example":" <p>\n <img class=\"us-img--full\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"}},{"name":".us-img--left","escaped":"us-img--left","description":"Left floated image","markup":{"example":" <p>\n <img class=\"us-img--left\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"}},{"name":".us-img--right","escaped":"us-img--right","description":"Right floated image","markup":{"example":" <p>\n <img class=\"us-img--right\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"}}],"markup":{"example":" <p>\n <img class=\"{$modifiers}\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>","escaped":" <p>\n <img src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_images.scss","file":"_images.scss","link":"images"},{"page":"Pattern Library/Utilities","name":"Responsive","description":"<p> Responsive classes to allow display of elements across devices. You have the option of displaying them as <code>block</code>, <code>inline-block</code> or <code>inline</code> elements.</p>\n<p> You can also hide elements by <code>.us-{DEVICE}--hidden</code> and will hide those elements above that breakpoint.</p>\n","markup":{"example":" <div class='us-lg-desktop--block'><strong>.us-lg-desktop--block</strong> Shows on large desktop and up</div>\n <div class='us-desktop--block'><strong>.us-desktop--block</strong> Shows on desktop and up</div>\n <div class='us-tablet--block'><strong>.us-tablet--block</strong> Shows on tablet and up</div>\n <div class='us-sm-tablet--block'><strong>.us-sm-tablet--block</strong> Shows on small tablet and up</div>\n <div class='us-mobile--block'><strong>.us-mobile--block</strong> Shows on mobile only</div>\n <div class='us-tablet--hidden'><strong>.us-tablet--hidden</strong> Hidden on tablet and up</div>","escaped":" <div class='us-lg-desktop--block'><strong>.us-lg-desktop--block</strong> Shows on large desktop and up</div>\n <div class='us-desktop--block'><strong>.us-desktop--block</strong> Shows on desktop and up</div>\n <div class='us-tablet--block'><strong>.us-tablet--block</strong> Shows on tablet and up</div>\n <div class='us-sm-tablet--block'><strong>.us-sm-tablet--block</strong> Shows on small tablet and up</div>\n <div class='us-mobile--block'><strong>.us-mobile--block</strong> Shows on mobile only</div>\n <div class='us-tablet--hidden'><strong>.us-tablet--hidden</strong> Hidden on tablet and up</div>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_responsive.scss","file":"_responsive.scss","link":"responsive"},{"page":"Pattern Library/Utilities","name":"Spacing","description":"<p> Allow control of spacing around element. You can set margin or padding for an element without creating an extra class.</p>\n<p> An example of this <code>.us-margin-top</code>, <code>.us-margin-top--small</code>, <code>.us-margin-top--large</code> where <code>margin</code> can be replaced by <code>padding</code> and <code>top</code> can be replaced by <code>bottom</code>, <code>left</code> or <code>right</code>.</p>\n<p> Default space for margin and padding is 1em, <code>small</code> modifier uses .5em and <code>large</code> modifier uses 1.5em.</p>\n","state":[{"name":".us-margin-top","escaped":"us-margin-top","description":"Use default top margin (1em)","markup":{"example":"<div class='class-goes-here us-margin-top'>Sample content</div>"}},{"name":".us-margin-top--small","escaped":"us-margin-top--small","description":"Use small top margin (.5em)","markup":{"example":"<div class='class-goes-here us-margin-top--small'>Sample content</div>"}},{"name":".us-margin-top--large","escaped":"us-margin-top--large","description":"Use large top margin (1.5em)","markup":{"example":"<div class='class-goes-here us-margin-top--large'>Sample content</div>"}},{"name":".us-margin-bottom","escaped":"us-margin-bottom","description":"Use default bottom margin (1em)","markup":{"example":"<div class='class-goes-here us-margin-bottom'>Sample content</div>"}},{"name":".us-margin-bottom--small","escaped":"us-margin-bottom--small","description":"Use small bottom margin (.5em)","markup":{"example":"<div class='class-goes-here us-margin-bottom--small'>Sample content</div>"}},{"name":".us-margin-bottom--large","escaped":"us-margin-bottom--large","description":"Use large bottom margin (1.5em)","markup":{"example":"<div class='class-goes-here us-margin-bottom--large'>Sample content</div>"}},{"name":".us-margin-left","escaped":"us-margin-left","description":"Use default left margin (1em)","markup":{"example":"<div class='class-goes-here us-margin-left'>Sample content</div>"}},{"name":".us-margin-left--small","escaped":"us-margin-left--small","description":"Use small left margin (.5em)","markup":{"example":"<div class='class-goes-here us-margin-left--small'>Sample content</div>"}},{"name":".us-margin-left--large","escaped":"us-margin-left--large","description":"Use large left margin (1.5em)","markup":{"example":"<div class='class-goes-here us-margin-left--large'>Sample content</div>"}},{"name":".us-margin-right","escaped":"us-margin-right","description":"Use default right margin (1em)","markup":{"example":"<div class='class-goes-here us-margin-right'>Sample content</div>"}},{"name":".us-margin-right--small","escaped":"us-margin-right--small","description":"Use small right margin (.5em)","markup":{"example":"<div class='class-goes-here us-margin-right--small'>Sample content</div>"}},{"name":".us-margin-right--large","escaped":"us-margin-right--large","description":"Use large right margin (1.5em)","markup":{"example":"<div class='class-goes-here us-margin-right--large'>Sample content</div>"}},{"name":".us-padding-top","escaped":"us-padding-top","description":"Use default top padding (1em)","markup":{"example":"<div class='class-goes-here us-padding-top'>Sample content</div>"}},{"name":".us-padding-top--small","escaped":"us-padding-top--small","description":"Use small top padding (.5em)","markup":{"example":"<div class='class-goes-here us-padding-top--small'>Sample content</div>"}},{"name":".us-padding-top--large","escaped":"us-padding-top--large","description":"Use large top padding (1.5em)","markup":{"example":"<div class='class-goes-here us-padding-top--large'>Sample content</div>"}},{"name":".us-padding-bottom","escaped":"us-padding-bottom","description":"Use default bottom padding (1em)","markup":{"example":"<div class='class-goes-here us-padding-bottom'>Sample content</div>"}},{"name":".us-padding-bottom--small","escaped":"us-padding-bottom--small","description":"Use small bottom padding (.5em)","markup":{"example":"<div class='class-goes-here us-padding-bottom--small'>Sample content</div>"}},{"name":".us-padding-bottom--large","escaped":"us-padding-bottom--large","description":"Use large bottom padding (1.5em)","markup":{"example":"<div class='class-goes-here us-padding-bottom--large'>Sample content</div>"}},{"name":".us-padding-left","escaped":"us-padding-left","description":"Use default left padding (1em)","markup":{"example":"<div class='class-goes-here us-padding-left'>Sample content</div>"}},{"name":".us-padding-left--small","escaped":"us-padding-left--small","description":"Use small left padding (.5em)","markup":{"example":"<div class='class-goes-here us-padding-left--small'>Sample content</div>"}},{"name":".us-padding-left--large","escaped":"us-padding-left--large","description":"Use large left padding (1.5em)","markup":{"example":"<div class='class-goes-here us-padding-left--large'>Sample content</div>"}},{"name":".us-padding-right","escaped":"us-padding-right","description":"Use default right padding (1em)","markup":{"example":"<div class='class-goes-here us-padding-right'>Sample content</div>"}},{"name":".us-padding-right--small","escaped":"us-padding-right--small","description":"Use small right padding (.5em)","markup":{"example":"<div class='class-goes-here us-padding-right--small'>Sample content</div>"}},{"name":".us-padding-right--large","escaped":"us-padding-right--large","description":"Use large right padding (1.5em)","markup":{"example":"<div class='class-goes-here us-padding-right--large'>Sample content</div>"}},{"name":".us-reset--padding","escaped":"us-reset--padding","description":"Reset padding to 0","markup":{"example":"<div class='class-goes-here us-reset--padding'>Sample content</div>"}},{"name":".us-reset--margin","escaped":"us-reset--margin","description":"Reset margin to 0","markup":{"example":"<div class='class-goes-here us-reset--margin'>Sample content</div>"}},{"name":".us-reset","escaped":"us-reset","description":"Reset padding and margin to 0","markup":{"example":"<div class='class-goes-here us-reset'>Sample content</div>"}}],"markup":{"example":"<div class='class-goes-here {$modifiers}'>Sample content</div>","escaped":"<div class='class-goes-here'>Sample content</div>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_spacing.scss","file":"_spacing.scss","link":"spacing"}]},{"name":"Typography","page":"typography.html","template":"styleguide/templates/simple.tpl","section":"design","content":"<p>Typography is a key element of how we communicate at uSwitch. We've recently revised our type settings and removed FS Elliot Web from our fonts to increase legibility across devices.</p>\n<p>Our chosen font is the beautiful and open source Open Sans which performs exceptionally well across all of our target devices and operating systems. It is, unlike many custom webfonts, particularly well kerned for Windows machines.</p>\n<h2 id=\"open-sans\">Open Sans</h2>\n<div class=\"font-chars\">\nA B C D E F G H I J K L M N O P Q R S T U V W X Y Z\n<br>a b c d e f g h i j k l m n o p q r s t u v w x y z\n<br>0 1 2 3 4 5 6 7 8 9 10\n</div>\n\n<h2 id=\"open-sans-bold\">Open Sans Bold</h2>\n<div class=\"font-chars font-chars--bold\">\nA B C D E F G H I J K L M N O P Q R S T U V W X Y Z\n<br>a b c d e f g h i j k l m n o p q r s t u v w x y z\n<br>0 1 2 3 4 5 6 7 8 9 10\n</div>\n\n<h2 id=\"open-sans-italic\">Open Sans Italic</h2>\n<div class=\"font-chars font-chars--italic\">\nA B C D E F G H I J K L M N O P Q R S T U V W X Y Z\n<br>a b c d e f g h i j k l m n o p q r s t u v w x y z\n<br>0 1 2 3 4 5 6 7 8 9 10\n</div>\n"},{"name":"Icons","page":"icons.html","template":"styleguide/templates/styleguide.tpl","section":"design","blocks":[{"page":"Design/Icons","name":"Icons","partial":"icons","description":"<p> Icons are created by chaining classes together with <code>us-icon</code>. There are 3 sizes, 16px, 32px, 64px, these are named <code>us-icon--small</code>, <code>us-icon--medium</code> and <code>us-icon--large</code> respectively.</p>\n<p> There are 5 colours for each icon, <em>white</em>, <em>typegrey</em>, <em>inputgrey</em>, <em>typecyan</em> and <em>custom</em>. Where <em>custom</em> can differ depending on what the icon represents (for logos, the custom tends to be the brand colour of that company). If you want an icon to be part of a <strong>:pseudo</strong> element (:before, :after) then suffix your icon name with <code>--before</code> and <code>--after</code> respectively. To have an icon standalone with text as fallback, add <code>us-icon--notext</code> to the element.</p>\n","state":[{"name":"us-icon--alarm","escaped":"us-icon--alarm","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--alarm\"></div>"}},{"name":"us-icon--android","escaped":"us-icon--android","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--android\"></div>"}},{"name":"us-icon--angry","escaped":"us-icon--angry","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--angry\"></div>"}},{"name":"us-icon--apple","escaped":"us-icon--apple","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--apple\"></div>"}},{"name":"us-icon--arrow-circle","escaped":"us-icon--arrow-circle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--arrow-circle\"></div>"}},{"name":"us-icon--arrow-up-left","escaped":"us-icon--arrow-up-left","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--arrow-up-left\"></div>"}},{"name":"us-icon--arrow-up","escaped":"us-icon--arrow-up","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--arrow-up\"></div>"}},{"name":"us-icon--arrow-down","escaped":"us-icon--arrow-down","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--arrow-down\"></div>"}},{"name":"us-icon--barchart","escaped":"us-icon--barchart","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--barchart\"></div>"}},{"name":"us-icon--blackberry","escaped":"us-icon--blackberry","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--blackberry\"></div>"}},{"name":"us-icon--book","escaped":"us-icon--book","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--book\"></div>"}},{"name":"us-icon--bookmark","escaped":"us-icon--bookmark","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--bookmark\"></div>"}},{"name":"us-icon--breadcrumb","escaped":"us-icon--breadcrumb","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--breadcrumb\"></div>"}},{"name":"us-icon--calculator","escaped":"us-icon--calculator","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--calculator\"></div>"}},{"name":"us-icon--calendar","escaped":"us-icon--calendar","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--calendar\"></div>"}},{"name":"us-icon--car","escaped":"us-icon--car","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--car\"></div>"}},{"name":"us-icon--checkbox-tick","escaped":"us-icon--checkbox-tick","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--checkbox-tick\"></div>"}},{"name":"us-icon--chevron-right","escaped":"us-icon--chevron-right","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--chevron-right\"></div>"}},{"name":"us-icon--clock","escaped":"us-icon--clock","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--clock\"></div>"}},{"name":"us-icon--close","escaped":"us-icon--close","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--close\"></div>"}},{"name":"us-icon--cog","escaped":"us-icon--cog","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--cog\"></div>"}},{"name":"us-icon--credit-card","escaped":"us-icon--credit-card","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--credit-card\"></div>"}},{"name":"us-icon--cross","escaped":"us-icon--cross","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--cross\"></div>"}},{"name":"us-icon--desktop","escaped":"us-icon--desktop","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--desktop\"></div>"}},{"name":"us-icon--doc","escaped":"us-icon--doc","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--doc\"></div>"}},{"name":"us-icon--dual-fuel","escaped":"us-icon--dual-fuel","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--dual-fuel\"></div>"}},{"name":"us-icon--electric-light","escaped":"us-icon--electric-light","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--electric-light\"></div>"}},{"name":"us-icon--envelope","escaped":"us-icon--envelope","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--envelope\"></div>"}},{"name":"us-icon--exit-noexit","escaped":"us-icon--exit-noexit","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--exit-noexit\"></div>"}},{"name":"us-icon--facebook","escaped":"us-icon--facebook","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--facebook\"></div>"}},{"name":"us-icon--filter","escaped":"us-icon--filter","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--filter\"></div>"}},{"name":"us-icon--fixed-variable","escaped":"us-icon--fixed-variable","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--fixed-variable\"></div>"}},{"name":"us-icon--gas","escaped":"us-icon--gas","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--gas\"></div>"}},{"name":"us-icon--gauge","escaped":"us-icon--gauge","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--gauge\"></div>"}},{"name":"us-icon--github","escaped":"us-icon--github","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--github\"></div>"}},{"name":"us-icon--google","escaped":"us-icon--google","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--google\"></div>"}},{"name":"us-icon--graph-up","escaped":"us-icon--graph-up","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--graph-up\"></div>"}},{"name":"us-icon--happy","escaped":"us-icon--happy","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--happy\"></div>"}},{"name":"us-icon--home","escaped":"us-icon--home","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--home\"></div>"}},{"name":"us-icon--hot","escaped":"us-icon--hot","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--hot\"></div>"}},{"name":"us-icon--info","escaped":"us-icon--info","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--info\"></div>"}},{"name":"us-icon--kettle","escaped":"us-icon--kettle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--kettle\"></div>"}},{"name":"us-icon--key","escaped":"us-icon--key","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--key\"></div>"}},{"name":"us-icon--laptop","escaped":"us-icon--laptop","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--laptop\"></div>"}},{"name":"us-icon--lock","escaped":"us-icon--lock","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--lock\"></div>"}},{"name":"us-icon--magnify-in","escaped":"us-icon--magnify-in","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--magnify-in\"></div>"}},{"name":"us-icon--magnify-out","escaped":"us-icon--magnify-out","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--magnify-out\"></div>"}},{"name":"us-icon--magnify","escaped":"us-icon--magnify","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--magnify\"></div>"}},{"name":"us-icon--menu","escaped":"us-icon--menu","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--menu\"></div>"}},{"name":"us-icon--message","escaped":"us-icon--message","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--message\"></div>"}},{"name":"us-icon--mobile","escaped":"us-icon--mobile","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--mobile\"></div>"}},{"name":"us-icon--monthly-dd","escaped":"us-icon--monthly-dd","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--monthly-dd\"></div>"}},{"name":"us-icon--network","escaped":"us-icon--network","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--network\"></div>"}},{"name":"us-icon--neutral","escaped":"us-icon--neutral","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--neutral\"></div>"}},{"name":"us-icon--no-exit","escaped":"us-icon--no-exit","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--no-exit\"></div>"}},{"name":"us-icon--pdf","escaped":"us-icon--pdf","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--pdf\"></div>"}},{"name":"us-icon--pencil","escaped":"us-icon--pencil","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--pencil\"></div>"}},{"name":"us-icon--person-add","escaped":"us-icon--person-add","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--person-add\"></div>"}},{"name":"us-icon--person","escaped":"us-icon--person","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--person\"></div>"}},{"name":"us-icon--phone","escaped":"us-icon--phone","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--phone\"></div>"}},{"name":"us-icon--piggy-bank","escaped":"us-icon--piggy-bank","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--piggy-bank\"></div>"}},{"name":"us-icon--pin","escaped":"us-icon--pin","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--pin\"></div>"}},{"name":"us-icon--pound-note","escaped":"us-icon--pound-note","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--pound-note\"></div>"}},{"name":"us-icon--power","escaped":"us-icon--power","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--power\"></div>"}},{"name":"us-icon--present","escaped":"us-icon--present","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--present\"></div>"}},{"name":"us-icon--print","escaped":"us-icon--print","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--print\"></div>"}},{"name":"us-icon--quarterly-dd","escaped":"us-icon--quarterly-dd","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--quarterly-dd\"></div>"}},{"name":"us-icon--question-circle","escaped":"us-icon--question-circle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--question-circle\"></div>"}},{"name":"us-icon--question","escaped":"us-icon--question","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--question\"></div>"}},{"name":"us-icon--quote","escaped":"us-icon--quote","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--quote\"></div>"}},{"name":"us-icon--recycle","escaped":"us-icon--recycle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--recycle\"></div>"}},{"name":"us-icon--remove","escaped":"us-icon--remove","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--remove\"></div>"}},{"name":"us-icon--renewable","escaped":"us-icon--renewable","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--renewable\"></div>"}},{"name":"us-icon--results","escaped":"us-icon--results","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--results\"></div>"}},{"name":"us-icon--sad","escaped":"us-icon--sad","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--sad\"></div>"}},{"name":"us-icon--save","escaped":"us-icon--save","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--save\"></div>"}},{"name":"us-icon--share","escaped":"us-icon--share","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--share\"></div>"}},{"name":"us-icon--sim","escaped":"us-icon--sim","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--sim\"></div>"}},{"name":"us-icon--smiley","escaped":"us-icon--smiley","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--smiley\"></div>"}},{"name":"us-icon--sort","escaped":"us-icon--sort","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--sort\"></div>"}},{"name":"us-icon--speech-circle","escaped":"us-icon--speech-circle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--speech-circle\"></div>"}},{"name":"us-icon--speech","escaped":"us-icon--speech","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--speech\"></div>"}},{"name":"us-icon--spinner","escaped":"us-icon--spinner","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--spinner\"></div>"}},{"name":"us-icon--star-half","escaped":"us-icon--star-half","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--star-half\"></div>"}},{"name":"us-icon--star","escaped":"us-icon--star","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--star\"></div>"}},{"name":"us-icon--starline-half","escaped":"us-icon--starline-half","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--starline-half\"></div>"}},{"name":"us-icon--starline","escaped":"us-icon--starline","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--starline\"></div>"}},{"name":"us-icon--tablet","escaped":"us-icon--tablet","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--tablet\"></div>"}},{"name":"us-icon--talk","escaped":"us-icon--talk","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--talk\"></div>"}},{"name":"us-icon--tick-circle","escaped":"us-icon--tick-circle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--tick-circle\"></div>"}},{"name":"us-icon--tick","escaped":"us-icon--tick","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--tick\"></div>"}},{"name":"us-icon--tv","escaped":"us-icon--tv","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--tv\"></div>"}},{"name":"us-icon--twitter","escaped":"us-icon--twitter","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--twitter\"></div>"}},{"name":"us-icon--uswitch","escaped":"us-icon--uswitch","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--uswitch\"></div>"}},{"name":"us-icon--variable","escaped":"us-icon--variable","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--variable\"></div>"}},{"name":"us-icon--warning-circle","escaped":"us-icon--warning-circle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--warning-circle\"></div>"}},{"name":"us-icon--warning","escaped":"us-icon--warning","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--warning\"></div>"}},{"name":"us-icon--wifi","escaped":"us-icon--wifi","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--wifi\"></div>"}},{"name":"us-icon--wiki","escaped":"us-icon--wiki","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--wiki\"></div>"}},{"name":"us-icon--windows","escaped":"us-icon--windows","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--windows\"></div>"}},{"name":"us-icon--wondering","escaped":"us-icon--wondering","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--wondering\"></div>"}},{"name":"us-icon--world","escaped":"us-icon--world","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--world\"></div>"}},{"name":"us-icon--xml","escaped":"us-icon--xml","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--xml\"></div>"}},{"name":"us-icon--play","escaped":"us-icon--play","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--play\"></div>"}},{"name":"us-icon--controller","escaped":"us-icon--controller","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--controller\"></div>"}},{"name":"us-icon--pound-circle","escaped":"us-icon--pound-circle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--pound-circle\"></div>"}}],"markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan {$modifiers}\"></div>","escaped":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan\"></div>"},"path":"vendor/assets/stylesheets/ustyle/icons/_base.scss","file":"_base.scss","link":"icons"}]},{"name":"Forms","page":"forms.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Forms","name":"Fields","description":"<p> This is the basic form field, <code>.us-field</code> wrapper for any single input or select. It sets a few layout options by default (margin) and styles any labels within. You can create a fake label style with <code>.us-faux-label</code></p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li>For text inputs that are optional, add "(optional)" to the <code>placeholder</code> attribute for the input. Not highlighting required fields makes the form look less intimidating.</li>\n</ul>\n","state":[{"name":".us-field--blocked","escaped":"us-field--blocked","description":"Blocked label styling","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>"}},{"name":".us-field--inline","escaped":"us-field--inline","description":"Inline label styling","markup":{"example":" <div class=\"us-field us-field--inline\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>"}}],"markup":{"example":" <div class=\"us-field {$modifiers}\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>","escaped":" <div class=\"us-field\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_fields.scss","file":"_fields.scss","link":"fields"},{"page":"Pattern Library/Forms","name":"Input group","description":"<p> Inputs groups allow you to add "boxes" to the left or right of an input. These boxes usually contain a visual icon to represent the usage of the input</p>\n","state":[{"name":".us-input-group--disabled","escaped":"us-input-group--disabled","description":"Disabled state for input groups","markup":{"example":" <div class=\"us-input-group us-margin-bottom us-input-group--disabled\">\n <span class=\"us-input-group__box\"><span class=\"us-icon--small us-icon--inputgrey us-icon--envelope us-icon--notext\"></span></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom us-input-group--disabled\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>"}},{"name":".us-input-group--blocked","escaped":"us-input-group--blocked","description":"Fluid style","markup":{"example":" <div class=\"us-input-group us-margin-bottom us-input-group--blocked\">\n <span class=\"us-input-group__box\"><span class=\"us-icon--small us-icon--inputgrey us-icon--envelope us-icon--notext\"></span></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom us-input-group--blocked\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>"}}],"markup":{"example":" <div class=\"us-input-group us-margin-bottom {$modifiers}\">\n <span class=\"us-input-group__box\"><span class=\"us-icon--small us-icon--inputgrey us-icon--envelope us-icon--notext\"></span></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom {$modifiers}\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>","escaped":" <div class=\"us-input-group us-margin-bottom\">\n <span class=\"us-input-group__box\"><span class=\"us-icon--small us-icon--inputgrey us-icon--envelope us-icon--notext\"></span></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_input-group.scss","file":"_input-group.scss","link":"input_group"},{"page":"Pattern Library/Forms","name":"Inputs","description":"<p> Our standard input styling across the website. This is specifically for text, email, password, search etc. type inputs.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Specifying an appropriate <a href=\"https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-type\">type attribute</a> (e.g. type="tel" for telephone number fields) will not only control what input is displayed, but also helps mobile devices select a keyboard layout suitable for entering that type of data.</p>\n</li>\n<li><p>Where appropriate use the <a href=\"https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-autocomplete\">autocomplete attribute</a> to make it easier for the browser to fill in fields on the users behalf, saving them time on lengthy forms.</p>\n</li>\n</ul>\n","state":[{"name":".us-form-input--large","escaped":"us-form-input--large","description":"Larger input style","markup":{"example":"<input class=\"us-form-input us-form-input--large\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--blocked","escaped":"us-form-input--blocked","description":"Fluid input style","markup":{"example":"<input class=\"us-form-input us-form-input--blocked\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--error","escaped":"us-form-input--error","description":"Visual feedback for when the input has an error","markup":{"example":"<input class=\"us-form-input us-form-input--error\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--success","escaped":"us-form-input--success","description":"Visual feedback for when success needs to be communicated to the user","markup":{"example":"<input class=\"us-form-input us-form-input--success\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--disabled","escaped":"us-form-input--disabled","description":"Inactive state for form inputs that can't be interacted with","markup":{"example":"<input class=\"us-form-input us-form-input--disabled\" type=\"text\" placeholder=\"Placeholder\">"}}],"markup":{"example":"<input class=\"us-form-input {$modifiers}\" type=\"text\" placeholder=\"Placeholder\">","escaped":"<input class=\"us-form-input\" type=\"text\" placeholder=\"Placeholder\">"},"path":"vendor/assets/stylesheets/ustyle/forms/_input.scss","file":"_input.scss","link":"inputs"},{"page":"Pattern Library/Forms","name":"Radios and checkboxes","description":"<p> Browsers that support screen density media features display our font icon tick or a box shadow circle. Other browsers fallback to default styling.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Like select boxes, radio buttons are good for making a selection from a mutually exclusive list of options. The main difference between the two is that with radio buttons, the user must choose exactly one of the options.</p>\n</li>\n<li><p>Use radio buttons when each of the choices matters to the user. Each needs to be considered before they make their choice.</p>\n</li>\n<li><p>Checkboxes in a group should be used for choosing zero or more options from a list of independent options. Toggling one should not change the state of others in the group.</p>\n</li>\n<li><p>A stand-alone checkbox is good for toggling something on/off or opting in/out.</p>\n</li>\n<li><p>Provide a default selection to radio and checkbox groups if it's necessary and wont be changed by 90% of your users.</p>\n</li>\n<li><p>Try to keep the number of radio buttons and checkboxes in the same group to a maximum of 6.</p>\n</li>\n</ul>\n","state":[{"name":"us-form-input--disabled","escaped":"us-form-input--disabled","description":"Like other types of form inputs, adding this class to the element in conjunction with the disabled attribute helps to make the element look like it can't be interacted with","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Do you have a different billing address?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input us-form-input--disabled\" name=\"null\" type=\"radio\">\n Yes\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"radio\">\n No\n </label>\n </div>\n </div>\n <div class=\"us-field us-field--blocked\">\n <label>How would you like to be contacted?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input us-form-input--disabled\" name=\"null\" type=\"checkbox\">\n Mobile\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Email\n </label>\n </div>\n </div>"}}],"markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Do you have a different billing address?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input {$modifiers}\" name=\"null\" type=\"radio\">\n Yes\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"radio\">\n No\n </label>\n </div>\n </div>\n <div class=\"us-field us-field--blocked\">\n <label>How would you like to be contacted?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input {$modifiers}\" name=\"null\" type=\"checkbox\">\n Mobile\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Email\n </label>\n </div>\n </div>","escaped":" <div class=\"us-field us-field--blocked\">\n <label>Do you have a different billing address?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input\" name=\"null\" type=\"radio\">\n Yes\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"radio\">\n No\n </label>\n </div>\n </div>\n <div class=\"us-field us-field--blocked\">\n <label>How would you like to be contacted?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Mobile\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Email\n </label>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_radio-checkbox.scss","file":"_radio-checkbox.scss","link":"radios_and_checkboxes"},{"page":"Pattern Library/Forms","name":"Selects","description":"<p> Select boxes allow users to choose and option or options from a list of options.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Use select boxes when choosing one or more options from a list of related, but mutually exclusive options e.g. profession, title, month.</p>\n</li>\n<li><p>It can be tempting to put many things in a select box for users to choose from. Try to keep the list of options to between 4 and 15 so the user doesn't become overwhelmed with choices.</p>\n</li>\n</ul>\n","state":[{"name":".us-form-select--multiple","escaped":"us-form-select--multiple","description":"Removes the drop down arrow and adjusts the padding of <option> elements. Useful when using <select> elements that have the size=\"\" attribute set to anything higher than 1.","markup":{"example":" <select class=\"us-form-select us-form-select--multiple\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--blocked","escaped":"us-form-select--blocked","description":"Fluid style","markup":{"example":" <select class=\"us-form-select us-form-select--blocked\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--error","escaped":"us-form-select--error","description":"Visual feedback for when the input has an error","markup":{"example":" <select class=\"us-form-select us-form-select--error\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--success","escaped":"us-form-select--success","description":"Visual feedback for when success needs to be communicated to the user","markup":{"example":" <select class=\"us-form-select us-form-select--success\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--disabled","escaped":"us-form-select--disabled","description":"Inactive state for select boxes. You may also just add the disabled attribute to the <select> element in order to achieve the same effect.","markup":{"example":" <select class=\"us-form-select us-form-select--disabled\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}}],"markup":{"example":" <select class=\"us-form-select {$modifiers}\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>","escaped":" <select class=\"us-form-select\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"},"path":"vendor/assets/stylesheets/ustyle/forms/_select.scss","file":"_select.scss","link":"selects"},{"page":"Pattern Library/Forms","name":"Textarea","description":"<p> Our standard textarea styling across the website.</p>\n","state":[{"name":".us-form-textarea--blocked","escaped":"us-form-textarea--blocked","description":"Fluid textarea style","markup":{"example":"<textarea class=\"us-form-textarea us-form-textarea--blocked\"></textarea>"}},{"name":".us-form-textarea--disabled","escaped":"us-form-textarea--disabled","description":"Inactive state for textareas that can't be interacted with","markup":{"example":"<textarea class=\"us-form-textarea us-form-textarea--disabled\"></textarea>"}}],"markup":{"example":"<textarea class=\"us-form-textarea {$modifiers}\"></textarea>","escaped":"<textarea class=\"us-form-textarea\"></textarea>"},"path":"vendor/assets/stylesheets/ustyle/forms/_textarea.scss","file":"_textarea.scss","link":"textarea"},{"page":"Pattern Library/Forms","name":"Toggle","description":"<p> Toggle buttons provide and alternative way of displaying radio groups with a small number of options to a user.</p>\n<p> IE8 support is included with <code>radioToggle.js</code> which sets a <code>.checked</code> class on the radio button when clicked.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Use as an alternation to radio groups that have short labels for each option (Yes/No, Opt-in/Opt-out).</p>\n</li>\n<li><p>For forms that have many short radio group questions in them, toggle buttons provide a better experience for quickly selecting answers on both desktop and mobile due to larger visible click areas for each option.</p>\n</li>\n<li><p>Limit the number of options in the toggle group to 3.</p>\n</li>\n</ul>\n","state":[{"name":".us-toggle__btn--disabled","escaped":"us-toggle__btn--disabled","description":"Visual styling for toggle buttons that can't be interacted with","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Answer truthfully</label>\n <div class=\"us-toggle\">\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn us-toggle__btn--disabled\">\n Yes\n </span>\n </label>\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n No\n </span>\n </label>\n </div>\n </div>"}}],"javascript":"\n var radioToggle = new RadioToggle({\n $target: $(".us-toggle")\n })\n ","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Answer truthfully</label>\n <div class=\"us-toggle\">\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn {$modifiers}\">\n Yes\n </span>\n </label>\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n No\n </span>\n </label>\n </div>\n </div>","escaped":" <div class=\"us-field us-field--blocked\">\n <label>Answer truthfully</label>\n <div class=\"us-toggle\">\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n Yes\n </span>\n </label>\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n No\n </span>\n </label>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_toggle.scss","file":"_toggle.scss","link":"toggle"},{"page":"Pattern Library/Forms","name":"Validation messages","description":"<p> Used to provide more detailed feedback about the data users have entered into forms.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>For inputs that have a label above them, place the validation message between the input and the label.</p>\n</li>\n<li><p>Use success validation messages only when it makes sense to contextually. For example, they can help to reassure users about the data they entered when multiple criteria need to be satisfied, e.g. password fields.</p>\n</li>\n</ul>\n","state":[{"name":".us-validation--error","escaped":"us-validation--error","description":"Error styling for incorrect data on forms","markup":{"example":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation us-validation--error\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>"}},{"name":".us-validation--success","escaped":"us-validation--success","description":"Success styling for correct forms","markup":{"example":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation us-validation--success\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>"}}],"markup":{"example":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation {$modifiers}\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>","escaped":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_validation.scss","file":"_validation.scss","link":"validation_messages"}]},{"name":"Components","page":"components.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Components","name":"Breadcrumbs","description":"<p> Breadcrumbs are used to provide signposting of a users location and to enable quick navigation around the site. They are only to be used as a secondary means of navigation however. Pages should also be navigable through other means.</p>\n","markup":{"example":" <ul class=\"us-crumbs\">\n <li class=\"us-crumbs__item\"><a href=\"/\" class=\"us-crumbs__link\">uSwitch.com</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/\">Credit report</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/guides/\">Credit reports guides</a></li>\n <li class=\"us-crumbs__item\">Statutory credit reports</li>\n </ul>","escaped":" <ul class=\"us-crumbs\">\n <li class=\"us-crumbs__item\"><a href=\"/\" class=\"us-crumbs__link\">uSwitch.com</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/\">Credit report</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/guides/\">Credit reports guides</a></li>\n <li class=\"us-crumbs__item\">Statutory credit reports</li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_breadcrumbs.scss","file":"_breadcrumbs.scss","link":"breadcrumbs"},{"page":"Pattern Library/Components","name":"Buttons","description":"<p> Our buttons used across the site. The states give different use cases. Both <code><a></code> and <code><button></code> tags are supported. Please use <code>role='button'</code> when using in a <code><a></code> tag.</p>\n","state":[{"name":".us-btn--primary","escaped":"us-btn--primary","description":"Used a save/update button","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--primary\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--primary\">Button Element</button>"}},{"name":".us-btn--action","escaped":"us-btn--action","description":"Navigational button","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--action\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--action\">Button Element</button>"}},{"name":".us-btn--secondary","escaped":"us-btn--secondary","description":"Secondary","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--secondary\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--secondary\">Button Element</button>"}},{"name":".us-btn--hero","escaped":"us-btn--hero","description":"Navy outline used for buttons on hero banners","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--hero\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--hero\">Button Element</button>"}},{"name":".us-btn--reversed","escaped":"us-btn--reversed","description":"White outline for dark backgrounds","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--reversed\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--reversed\">Button Element</button>"}},{"name":".us-btn--large","escaped":"us-btn--large","description":"Larger button for heros","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--large\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--large\">Button Element</button>"}},{"name":".us-btn--small","escaped":"us-btn--small","description":"Smaller button for mobile tables","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--small\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--small\">Button Element</button>"}},{"name":".us-btn--blocked","escaped":"us-btn--blocked","description":"Full width button","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--blocked\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--blocked\">Button Element</button>"}},{"name":".us-btn--link","escaped":"us-btn--link","description":"link style button","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--link\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--link\">Button Element</button>"}},{"name":".us-btn--stronger","escaped":"us-btn--stronger","description":"Emphasis button","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--stronger\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--stronger\">Button Element</button>"}},{"name":".us-btn--disabled","escaped":"us-btn--disabled","description":"Disabled styling (can also be styled with :disabled)","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--disabled\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--disabled\">Button Element</button>"}}],"markup":{"example":" <a href=\"#\" class=\"us-btn {$modifiers}\" role=\"button\">Link Button</a>\n <button class=\"us-btn {$modifiers}\">Button Element</button>","escaped":" <a href=\"#\" class=\"us-btn\" role=\"button\">Link Button</a>\n <button class=\"us-btn\">Button Element</button>"},"path":"vendor/assets/stylesheets/ustyle/components/_button.scss","file":"_button.scss","link":"buttons"},{"page":"Pattern Library/Components","name":"Content group","description":"<p> The <code>.us-content-group</code> is a separator element for content groupings. Ideal to split up landing pages with reasonable padding.</p>\n","state":[{"name":".mobile-bordered","escaped":"mobile-bordered","description":"Adds a smaller border and padding to mobile devices.","markup":{"example":" <div class='us-content-group mobile-bordered'>\n <p>\n Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.\n </p>\n </div>"}}],"markup":{"example":" <div class='us-content-group {$modifiers}'>\n <p>\n Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.\n </p>\n </div>","escaped":" <div class='us-content-group'>\n <p>\n Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.\n </p>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_content-group.scss","file":"_content-group.scss","link":"content_group"},{"page":"Pattern Library/Components","name":"CTAs","description":"<p> Used within guide and news articles, these CTAs are intended to not interupt the content but to integrate in more subtle means.</p>\n","markup":{"example":" <section class=\"us-cta cta cta-column\">\n <form>\n <h3 class=\"us-cta__title\">It’s your report</h3>\n <p>Join the campaign to fight for free annual credit reports for everyone</p>\n <a href=\"/money/itsmyreport/\" class=\"us-btn us-btn--primary\" rel=\"nofollow\">Sign the petition</a>\n </form>\n </section>","escaped":" <section class=\"us-cta cta cta-column\">\n <form>\n <h3 class=\"us-cta__title\">It’s your report</h3>\n <p>Join the campaign to fight for free annual credit reports for everyone</p>\n <a href=\"/money/itsmyreport/\" class=\"us-btn us-btn--primary\" rel=\"nofollow\">Sign the petition</a>\n </form>\n </section>"},"path":"vendor/assets/stylesheets/ustyle/components/_cta.scss","file":"_cta.scss","link":"ctas"},{"page":"Pattern Library/Components","name":"Featured deal","description":"<p> The <code>.us-featured</code> is mostly composed by smaller components, the components can be shuffled around inside of a grid to create the needed variants.</p>\n<p> This featured deal won't make any assumptions around the media queries, it's up to you, to deal with it. As you can see on the examples.</p>\n","markup":{"example":"<div class=\"us-container\">\n <div class=\"us-featured__header us-grid-row us-padding-top us-padding-bottom\">\n <div class=\"us-featured__header-title us-col-xsm-9 us-align--left\">\n Title goes here\n </div>\n <div class=\"us-featured__header-subtitle us-col-xsm-3 us-align--right\">\n Promotion\n </div>\n </div>\n <div class=\"us-featured__content us-grid-row us-padding-top us-padding-bottom\">\n <div class=\"us-col-xsm-12\">\n <div class='us-usp us-usp--blue'>\n Awesome deal usp\n </div>\n </div>\n <div class=\"us-desktop--hidden us-padding-top us-col-xsm-4 us-mobile-block\">\n <img class=\"us-img--full\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"200\">\n </div>\n <div class=\"us-col-xsm-7 us-col-lg-8 us-col-sm-5\">\n <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n <li>List item 3</li>\n </ul>\n <div class=\"us-col-xsm-6 us-desktop--block\">\n <div class=\"us-featured-highlight\">\n <strong class=\"us-featured-highlight__title\">\n £99.99\n </strong>\n monthly cost\n </div>\n </div>\n <div class=\"us-col-xsm-6 us-desktop--block\">\n <div class=\"us-featured-highlight\">\n <strong class=\"us-featured-highlight__title\">\n £99.99\n </strong>\n monthly cost\n <br>\n <a class=\"us-featured-highlight__link us-link\" href=\"#\">Link</a>\n </div>\n </div>\n </div>\n <div class=\"us-col-xsm-3 us-col-lg-4 us-tablet--block\">\n <img class=\"us-img--full us-desktop--block\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"200\">\n <button class=\"margin-top margin-bottom us-btn us-btn--primary us-btn us-btn--blocked\">See deal</button>\n <div class=\"us-icon--before us-icon--small--before us-icon--typegrey--before us-icon--clock--before us-align--center\">\n <strong>3 days left</strong>\n </div>\n </div>\n <div class=\"us-featured__mobile-icon us-tablet--hidden us-col-xsm-3 us-icon us-icon--medium us-icon--typegrey us-icon--breadcrumb\"></div>\n </div>\n <div class=\"us-featured__footer us-grid-row us-padding-top us-padding-bottom us-desktop--block\">\n <div class=\"us-col-xsm-12\">\n Legal stuff goes here\n </div>\n </div>\n</div>","escaped":"<div class=\"us-container\">\n <div class=\"us-featured__header us-grid-row us-padding-top us-padding-bottom\">\n <div class=\"us-featured__header-title us-col-xsm-9 us-align--left\">\n Title goes here\n </div>\n <div class=\"us-featured__header-subtitle us-col-xsm-3 us-align--right\">\n Promotion\n </div>\n </div>\n <div class=\"us-featured__content us-grid-row us-padding-top us-padding-bottom\">\n <div class=\"us-col-xsm-12\">\n <div class='us-usp us-usp--blue'>\n Awesome deal usp\n </div>\n </div>\n <div class=\"us-desktop--hidden us-padding-top us-col-xsm-4 us-mobile-block\">\n <img class=\"us-img--full\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"200\">\n </div>\n <div class=\"us-col-xsm-7 us-col-lg-8 us-col-sm-5\">\n <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n <li>List item 3</li>\n </ul>\n <div class=\"us-col-xsm-6 us-desktop--block\">\n <div class=\"us-featured-highlight\">\n <strong class=\"us-featured-highlight__title\">\n £99.99\n </strong>\n monthly cost\n </div>\n </div>\n <div class=\"us-col-xsm-6 us-desktop--block\">\n <div class=\"us-featured-highlight\">\n <strong class=\"us-featured-highlight__title\">\n £99.99\n </strong>\n monthly cost\n <br>\n <a class=\"us-featured-highlight__link us-link\" href=\"#\">Link</a>\n </div>\n </div>\n </div>\n <div class=\"us-col-xsm-3 us-col-lg-4 us-tablet--block\">\n <img class=\"us-img--full us-desktop--block\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"200\">\n <button class=\"margin-top margin-bottom us-btn us-btn--primary us-btn us-btn--blocked\">See deal</button>\n <div class=\"us-icon--before us-icon--small--before us-icon--typegrey--before us-icon--clock--before us-align--center\">\n <strong>3 days left</strong>\n </div>\n </div>\n <div class=\"us-featured__mobile-icon us-tablet--hidden us-col-xsm-3 us-icon us-icon--medium us-icon--typegrey us-icon--breadcrumb\"></div>\n </div>\n <div class=\"us-featured__footer us-grid-row us-padding-top us-padding-bottom us-desktop--block\">\n <div class=\"us-col-xsm-12\">\n Legal stuff goes here\n </div>\n </div>\n</div>"},"path":"vendor/assets/stylesheets/ustyle/components/_featured.scss","file":"_featured.scss","link":"featured_deal"},{"page":"Pattern Library/Components","name":"Hero","description":"<p> The <code>.us-hero</code> is used for the upper part of most pages, where the calls to action are usually kept.</p>\n<p> It is intended to draw attention with <code>$c-cyan</code> as it's background color, and should be used across all landing pages.</p>\n","markup":{"example":" <div class='us-hero'>\n <div class='us-hero-container'>\n <h1 class='us-hero-title'>Hero title</h1>\n <p class='us-hero-description us-standfirst'>Swat at dog intrigued by the shower missing until dinner time.</p>\n </div>\n </div>","escaped":" <div class='us-hero'>\n <div class='us-hero-container'>\n <h1 class='us-hero-title'>Hero title</h1>\n <p class='us-hero-description us-standfirst'>Swat at dog intrigued by the shower missing until dinner time.</p>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_hero.scss","file":"_hero.scss","link":"hero"},{"page":"Pattern Library/Components","name":"Anchor links","description":"<p> Anchor tag styling, with and without a border</p>\n","state":[{"name":".us-link","escaped":"us-link","description":"Adds a border bottom to the link","markup":{"example":"<a href=\"#\" class=\"us-link\">Link</a>"}},{"name":".us-link--light","escaped":"us-link--light","description":"Changes the link colors to white for when links are placed on dark backgrounds","markup":{"example":"<a href=\"#\" class=\"us-link--light\">Link</a>"}}],"markup":{"example":"<a href=\"#\" class=\"{$modifiers}\">Link</a>","escaped":"<a href=\"#\">Link</a>"},"path":"vendor/assets/stylesheets/ustyle/components/_links.scss","file":"_links.scss","link":"anchor_links"},{"page":"Pattern Library/Components","name":"Link lists","description":"<p> The default list styling for lists that have anchors to take you to other pages.</p>\n","markup":{"example":" <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n </ul>","escaped":" <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_lists.scss","file":"_lists.scss","link":"link_lists"},{"page":"Pattern Library/Components","name":"Loader","description":"<p> Loader component to be added to any AJAX/filter loads across uSwitch. We use them specifically in tables when loading new rows.</p>\n<p> <code>.us-loader--loading</code> will initiate the animation and <code>.us-loader--centered</code> will vertically center the loading SVG.</p>\n","markup":{"example":" <div class='us-loader__container'>\n <div class='us-loader us-loader--loading us-loader--centered'>\n <div class='us-loader__inner'>\n <div class='us-loader__spinner'></div>\n <div class='us-loader__text'>\n Loading deals\n </div>\n </div>\n <div class='us-loader__overlay'></div>\n </div>\n <!-- EXAMPLE CONTENT -->\n <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n <li><a href=\"#\">List item 4</a></li>\n </ul>\n <!-- END EXAMPLE -->\n </div>","escaped":" <div class='us-loader__container'>\n <div class='us-loader us-loader--loading us-loader--centered'>\n <div class='us-loader__inner'>\n <div class='us-loader__spinner'></div>\n <div class='us-loader__text'>\n Loading deals\n </div>\n </div>\n <div class='us-loader__overlay'></div>\n </div>\n <!-- EXAMPLE CONTENT -->\n <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n <li><a href=\"#\">List item 4</a></li>\n </ul>\n <!-- END EXAMPLE -->\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_loader.scss","file":"_loader.scss","link":"loader"},{"page":"Pattern Library/Components","name":"Progress navigation","description":"<p> The progress navigation should be used for any funnel journeys on the website. Once a section has been completed the user should be able to get back to that step.</p>\n<p> The mobile view of the navigation just has the dotted numbers.</p>\n","markup":{"example":" <div class=\"us-progress\">\n <nav>\n <ul class=\"us-progress__nav us-clearfix\">\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Current supplier</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Usage</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--current\">\n <span class=\"us-tablet--inline\">Results</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">New tariff</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">Apply</span>\n </span>\n </li>\n </ul>\n </nav>\n </div>","escaped":" <div class=\"us-progress\">\n <nav>\n <ul class=\"us-progress__nav us-clearfix\">\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Current supplier</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Usage</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--current\">\n <span class=\"us-tablet--inline\">Results</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">New tariff</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">Apply</span>\n </span>\n </li>\n </ul>\n </nav>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_progress.scss","file":"_progress.scss","link":"progress_navigation"},{"page":"Pattern Library/Components","name":"USPs","description":"<p> USPs (Unique Selling Points) are used within tables and on splash pages to highlight offers within a deal, and also to differentiate deals.</p>\n<p> General guidelines; There should only be one USP per deal. Text within USPs should be written in sentence case (not uppercase).</p>\n","state":[{"name":".us-usp--blue","escaped":"us-usp--blue","description":"uSwitch related","markup":{"example":" <div class='us-usp us-usp--blue'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--blue'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--orange","escaped":"us-usp--orange","description":"Rewards (money/points)","markup":{"example":" <div class='us-usp us-usp--orange'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--orange'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--purple","escaped":"us-usp--purple","description":"Gifts eg. free TV","markup":{"example":" <div class='us-usp us-usp--purple'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--purple'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--yellow","escaped":"us-usp--yellow","description":"Vouchers","markup":{"example":" <div class='us-usp us-usp--yellow'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--yellow'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--typecyan","escaped":"us-usp--typecyan","description":"Micro persuasions eg. most popular, half price","markup":{"example":" <div class='us-usp us-usp--typecyan'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--typecyan'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--green","escaped":"us-usp--green","description":"Renewable and environmentally friendly","markup":{"example":" <div class='us-usp us-usp--green'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--green'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--navy","escaped":"us-usp--navy","description":"Generic vertical specific USP","markup":{"example":" <div class='us-usp us-usp--navy'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--navy'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--cyan","escaped":"us-usp--cyan","description":"Generic vertical specific USP","markup":{"example":" <div class='us-usp us-usp--cyan'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--cyan'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--typegrey","escaped":"us-usp--typegrey","description":"Generic vertical specific USP","markup":{"example":" <div class='us-usp us-usp--typegrey'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--typegrey'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--red","escaped":"us-usp--red","description":"Generic vertical specific USP","markup":{"example":" <div class='us-usp us-usp--red'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--red'>Annotated USP</div>\n More information about USP goes here\n </div>"}}],"markup":{"example":" <div class='us-usp {$modifiers}'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp {$modifiers}'>Annotated USP</div>\n More information about USP goes here\n </div>","escaped":" <div class='us-usp'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp'>Annotated USP</div>\n More information about USP goes here\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_usp.scss","file":"_usp.scss","link":"usps"}]},{"name":"JavaScript","page":"javascript.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/JavaScript","name":"Anchor","description":"<p> Anchor is a naive implementation of Tether by HubSpot. It creates an independent dropdown that is "anchored" to the bottom of the target element.</p>\n<p> We've decided to only support IE9+, as the uses of Anchor throughout uSwitch are for progressive enhancement.</p>\n","javascript":"\n var anchor = new Anchor({\n classPrefix: "us-anchor"\n openEvent: "click"\n showClose: true\n isAjax: false\n });\n ","markup":{"example":" <span class='us-btn js-example-anchor'>Click me!</span>\n <div class='us-anchor__target js-example-anchor__target'>\n <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>\n </div>","escaped":" <span class='us-btn js-example-anchor'>Click me!</span>\n <div class='us-anchor__target js-example-anchor__target'>\n <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_anchor.scss","file":"_anchor.scss","link":"anchor"},{"page":"Pattern Library/JavaScript","name":"Overlay","description":"<p> <code>.us-overlay</code> slides in from either side of the viewport, or can be shown as a modal window.</p>\n","javascript":"\n var overlay = new Overlay({\n bodyActiveClass: 'us-overlay--open',\n activeClass: 'us-overlay-parent--active',\n visibleClass: 'us-overlay-parent--visible',\n overlay: $('.us-overlay-parent'),\n openButton: '.js-open-overlay',\n closeButton: '.js-close-overlay',\n historyStatus: '#seedeal',\n history: false,\n preventDefault: true\n });\n ","state":[{"name":".us-overlay--modal","escaped":"us-overlay--modal","description":"Overlay appears as a modal window.","markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"us-overlay--modal\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"us-overlay--modal\">\n <div class=\"us-overlay us-overlay--modal\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"}},{"name":".us-overlay--right","escaped":"us-overlay--right","description":"Overlay appears on the right side of the viewport (not applicable when used in conjunction with .us-overlay--modal).","markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"us-overlay--right\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"us-overlay--right\">\n <div class=\"us-overlay us-overlay--right\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"}},{"name":".us-overlay--above","escaped":"us-overlay--above","description":"Overlay appears over the top of another open overlay.","markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"us-overlay--above\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"us-overlay--above\">\n <div class=\"us-overlay us-overlay--above\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"}}],"markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"{$modifiers}\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"{$modifiers}\">\n <div class=\"us-overlay {$modifiers}\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>","escaped":" <button class=\"us-btn js-open-overlay\" modifier=\"{$modifiers}\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"{$modifiers}\">\n <div class=\"us-overlay\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_overlay.scss","file":"_overlay.scss","link":"overlay"},{"page":"Pattern Library/JavaScript","name":"Tabs","description":"<p> These are the basic tabs used for landing pages. You can either reference a data-target for the urls or href for the target tabs. They have a non-js fallback and fold over to accordion when in small tablet view. They are initialised on page load if the tabs classes exist.</p>\n","javascript":"\n var tabs = new Tabs({\n tabContainer: ".us-tabs",\n tabLinks: ".us-tabs-nav-mainlink",\n tabTitle: "us-tab-title",\n activeClass: "active",\n changeUrls: true,\n collapsible: true,\n autoScroll: false\n });\n ","markup":{"example":" <div class='us-tabs'>\n <nav class='us-tabs-nav'>\n <div class='us-tabs-nav-wrapper'>\n <div class='us-tabs-nav-menu'>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab1\">Tab 1</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab2\">Tab 2</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab3\">Tab 3</a>\n </div>\n </div>\n </nav>\n <div class='us-tabs-container'>\n <div class='us-tab' id='tab1'>\n <h2 class='us-tab-title'><a class=\"us-tabs-nav-mainlink\" href=\"#tab1\">Test 1</a></h2>\n <div class='us-tab-content'>\n <p>Fatback capicola leberkas pork loin pork jowl. Meatloaf shoulder pancetta, salami prosciutto ribeye andouille chuck landjaeger short loin filet mignon sirloin. Pork chop tri-tip ham pork hamburger frankfurter leberkas short ribs biltong. Prosciutto ham hock rump, andouille tongue flank sirloin tri-tip ball tip frankfurter ham drumstick meatloaf pork loin.</p>\n </div>\n </div>\n <div class='us-tab' id='tab2'>\n <h2 class='us-tab-title'><a class=\"us-tabs-nav-mainlink\" href=\"#tab2\">Test 2</a></h2>\n <div class='us-tab-content'>\n <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>\n </div>\n </div>\n <div class='us-tab' id='tab3'>\n <h2 class='us-tab-title'><a class=\"us-tabs-nav-mainlink\" href=\"#tab3\">Test 3</a></h2>\n <div class='us-tab-content'>\n <p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola meatball. Pork belly beef ham landjaeger.</p>\n </div>\n </div>\n </div>\n </div>","escaped":" <div class='us-tabs'>\n <nav class='us-tabs-nav'>\n <div class='us-tabs-nav-wrapper'>\n <div class='us-tabs-nav-menu'>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab1\">Tab 1</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab2\">Tab 2</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab3\">Tab 3</a>\n </div>\n </div>\n </nav>\n <div class='us-tabs-container'>\n <div class='us-tab' id='tab1'>\n <h2 class='us-tab-title'><a class=\"us-tabs-nav-mainlink\" href=\"#tab1\">Test 1</a></h2>\n <div class='us-tab-content'>\n <p>Fatback capicola leberkas pork loin pork jowl. Meatloaf shoulder pancetta, salami prosciutto ribeye andouille chuck landjaeger short loin filet mignon sirloin. Pork chop tri-tip ham pork hamburger frankfurter leberkas short ribs biltong. Prosciutto ham hock rump, andouille tongue flank sirloin tri-tip ball tip frankfurter ham drumstick meatloaf pork loin.</p>\n </div>\n </div>\n <div class='us-tab' id='tab2'>\n <h2 class='us-tab-title'><a class=\"us-tabs-nav-mainlink\" href=\"#tab2\">Test 2</a></h2>\n <div class='us-tab-content'>\n <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>\n </div>\n </div>\n <div class='us-tab' id='tab3'>\n <h2 class='us-tab-title'><a class=\"us-tabs-nav-mainlink\" href=\"#tab3\">Test 3</a></h2>\n <div class='us-tab-content'>\n <p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola meatball. Pork belly beef ham landjaeger.</p>\n </div>\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_tabs.scss","file":"_tabs.scss","link":"tabs"},{"page":"Pattern Library/JavaScript","name":"Tooltip","description":"<p> <code>.us-tooltip</code> can be applied to any parent, and by hovering it, it will toggle the visibility of <code>.us-tooltip__note</code>. Please note that on mobile viewports, the tooltip will appeat underneath the element that is aligned with the tooltip icon.</p>\n","state":[{"name":".us-tooltip--top","escaped":"us-tooltip--top","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--top\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--bottom","escaped":"us-tooltip--bottom","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--bottom\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--left","escaped":"us-tooltip--left","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--left\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--right","escaped":"us-tooltip--right","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--right\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--small","escaped":"us-tooltip--small","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--small\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}}],"javascript":"\n var tooltips = new ClassToggler({\n containerClass: '.us-tooltip',\n $target: $('.us-tooltip__icon'),\n activeClass: "us-tooltip--active"\n });\n ","markup":{"example":" <div class=\"tooltip-demo us-tooltip {$modifiers}\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>","escaped":" <div class=\"tooltip-demo us-tooltip\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_tooltip.scss","file":"_tooltip.scss","link":"tooltip"}]},{"name":"Logo","page":"logo.html","template":"styleguide/templates/simple.tpl","section":"brand","content":"<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h3>Variations</h3>\n <p>Primary logo - can be used in either brand blue #174695 or as a white out version (see below for usage on different background colours)</p>\n </div>\n <div class=\"us-col-6\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h5>Blue logo</h5>\n <div class=\"logo-state logo--blue\">\n <span class=\"us-icon--notext us-icon--uswitch us-icon--custom us-icon--large\"></span>\n </div>\n </div>\n <div class=\"us-col-6\">\n <h5>White logo</h5>\n <div class=\"logo-state logo--white\">\n <span class=\"us-icon--notext us-icon--uswitch us-icon--white us-icon--large\"></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h3>Spacing</h3>\n <p>Every time our logo appears, there should always be minimum clear space around it.This can be worked out by taking the width of the left stem (see ‘S’ in the diagram), and applying it around the logo. This area should always be kept clear.</p>\n </div>\n <div class=\"us-col-6\">\n <p><strong>s</strong> = The width of the left stem of the U.</p>\n <div class=\"logo-state logo-spacer\">\n <span class=\"us-icon--notext us-icon--uswitch us-icon--custom us-icon--large\"></span>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h3>Sizing</h3>\n <p>Our logo comes in 3 different sizes through our SVG/PNG icon system.</p>\n </div>\n <div class=\"us-col-6\">\n <span class=\"us-icon--notext us-icon--uswitch us-icon--custom us-icon--small\"></span>\n <span class=\"us-icon--notext us-icon--uswitch us-icon--custom us-icon--medium\"></span>\n <span class=\"us-icon--notext us-icon--uswitch us-icon--custom us-icon--large\"></span>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h3>Usage rules</h3>\n <p>Please make sure you’re not tempted to do any of the following to the logo:</p>\n <ul>\n <li>Change elements of it</li>\n <li>Outline or put a keyline around it</li>\n <li>Use a different blue</li>\n <li>Use a gradient or tint</li>\n <li>Rotate the logo</li>\n </ul>\n </div>\n <div class=\"us-col-6\"></div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h3>Blue logo placement</h3>\n <p>Our blue logo can be placed on a white or light-coloured background, or even on simple photography. However, it should not be placed on a dark or contrasting blue, as it doesn’t stand out so well. The same goes for complex imagery and gradients.</p>\n </div>\n <div class=\"us-col-6\"></div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h3>White logo placement</h3>\n <p>Our white logo can be placed over any of the uSwitch blues, or dark-coloured backgrounds, and even on simple photography. However, it should not be placed on a light colour or complex imagery as it doesn’t stand out so well..</p>\n </div>\n <div class=\"us-col-6\"></div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h3>Partner / Off site usage</h3>\n <p>For off-site and partner use we have a logo variant that includes the site URL. The same usage guidelines apply</p>\n </div>\n <div class=\"us-col-6\">\n <span class=\"us-icon--before us-icon--uswitch--before us-icon--custom--before us-icon--large--before\"><strong class=\"us-color--blue\">uSwitch.com</strong></span>\n </div>\n </div>\n</div>\n"},{"name":"Typography","page":"typography.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Typography","name":"Headings","description":"<p> The default heading styling across all uSwitch pages.</p>\n<p> We allow extending the sizes of these headings with <code>%heading-{$i}</code> so that we don't repeat similar font sizes across the site</p>\n","markup":{"example":" <h1>Heading 1</h1>\n <h2>Heading 2</h2>\n <h3>Heading 3</h3>\n <h4>Heading 4</h4>\n <h5>Heading 5</h5>\n <h6>Heading 6</h6>","escaped":" <h1>Heading 1</h1>\n <h2>Heading 2</h2>\n <h3>Heading 3</h3>\n <h4>Heading 4</h4>\n <h5>Heading 5</h5>\n <h6>Heading 6</h6>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"headings"},{"page":"Pattern Library/Typography","name":"Paragraphs","description":"<p> Default paragraph styling with a margin bottom.</p>\n","state":[{"name":".us-standfirst","escaped":"us-standfirst","description":"Used for heros and introductory paragraphs","markup":{"example":" <p class=\"us-standfirst\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n </p>"}}],"markup":{"example":" <p class=\"{$modifiers}\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n </p>","escaped":" <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n </p>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"paragraphs"},{"page":"Pattern Library/Typography","name":"Lists","description":"<p> Normal list styling</p>\n","markup":{"example":" <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n <li>List item 3</li>\n </ul>","escaped":" <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n <li>List item 3</li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"lists"},{"page":"Pattern Library/Typography","name":"Blockquote","description":"<p> Default blockquote</p>\n","markup":{"example":" <blockquote>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus.\n </p>\n </blockquote>","escaped":" <blockquote>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus.\n </p>\n </blockquote>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"blockquote"},{"page":"Pattern Library/Typography","name":"Numbered list","description":"<p> Our default numbered list styling</p>\n<p> <code>.us-custom-list-alt</code> allows us to use the lists on hero/blue backgrounds.</p>\n","markup":{"example":" <ul class='us-numbered-list'>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n </ul>","escaped":" <ul class='us-numbered-list'>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_lists-li.scss","file":"_lists-li.scss","link":"numbered_list"},{"page":"Pattern Library/Typography","name":"Ticked list","description":"<p> Our default ticked list styling. <code>.us-custom-list-alt</code> allows us to use the lists on hero/blue backgrounds.</p>\n","markup":{"example":" <ul class='us-ticked-list'>\n <li class='us-icon--before us-icon--tick--before us-icon--small--before us-icon--typegrey--before'>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n <li class='us-icon--before us-icon--tick--before us-icon--small--before us-icon--typegrey--before'>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n </ul>","escaped":" <ul class='us-ticked-list'>\n <li class='us-icon--before us-icon--tick--before us-icon--small--before us-icon--typegrey--before'>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n <li class='us-icon--before us-icon--tick--before us-icon--small--before us-icon--typegrey--before'>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_lists-li.scss","file":"_lists-li.scss","link":"ticked_list"}]},{"name":"Grid","page":"grid.html","template":"styleguide/templates/simple.tpl","section":"pattern-library","content":"<div class=\"styleguide__block\">\n <p>\n Our grid is a 12 column grid, with similar sizes to that of Bootstrap. We also adhere to the same naming standards for device breakpoints.\n </p>\n <ul>\n <li>Default gutter width: <strong>15px either side</strong></li>\n <li>Large container width: <strong>1170px</strong></li>\n <li>Desktop container width: <strong>970px</strong></li>\n <li>Tablet container width: <strong>770px</strong></li>\n </ul>\n <ul>\n <li>The parent container is <code>.us-container</code>, you must have this to start building the uSwitch layouts.</li>\n <li><code>.us-grid-row</code> is then used when you are building rows of columns (gives a negative margin to the container so they align correctly)</li>\n <li>All grid class names are prefixed with <code>.us-col-</code></li>\n </ul>\n</div>\n<div class=\"styleguide__block\">\n <h2 class=\"styleguide__block-title\">Example</h2>\n <p>Here is an example of a grid which will turn into 100% width columns on mobile.</p>\n <div class=\"grid-example\">\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-md-2\">.us-col-md-2</div>\n <div class=\"col-example us-col-md-2\">.us-col-md-2</div>\n <div class=\"col-example us-col-md-4\">.us-col-md-4</div>\n <div class=\"col-example us-col-md-4\">.us-col-md-4</div>\n </div>\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-md-8\">.us-col-md-8</div>\n <div class=\"col-example us-col-md-4\">.us-col-md-4</div>\n </div>\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-md-6\">.us-col-md-6</div>\n <div class=\"col-example us-col-md-6\">.us-col-md-6</div>\n </div>\n </div>\n <pre><code class=\"html\">\n<div class="us-grid-row">\n <div class="us-col-md-2">.us-col-md-2</div>\n <div class="us-col-md-2">.us-col-md-2</div>\n <div class="us-col-md-4">.us-col-md-4</div>\n <div class="us-col-md-4">.us-col-md-4</div>\n</div>\n<div class="us-grid-row">\n <div class="us-col-md-8">.us-col-md-8</div>\n <div class="us-col-md-4">.us-col-md-4</div>\n</div>\n<div class="us-grid-row">\n <div class="us-col-md-6">.us-col-md-6</div>\n <div class="us-col-md-6">.us-col-md-6</div>\n</div>\n </code></pre>\n</div>\n<div class=\"styleguide__block\">\n <h2 class=\"styleguide__block-title\">Example with mobile columns</h2>\n <div class=\"grid-example\">\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-xsm-6 us-col-md-2\">.us-col-xsm-6.us-col-md-2</div>\n <div class=\"col-example us-col-xsm-6 us-col-md-2\">.us-col-xsm-6.us-col-md-2</div>\n <div class=\"col-example us-col-sm-6 us-col-md-4\">.us-col-sm-6.us-col-md-4</div>\n <div class=\"col-example us-col-sm-6 us-col-md-4\">.us-col-sm-6.us-col-md-4</div>\n </div>\n </div>\n </div>\n</div>\n"},{"name":"Language","page":"language.html","template":"styleguide/templates/simple.tpl","section":"brand","content":"<h2 id=\"how-does-a-brilliantly-simple-brand-sound-\">How does a brilliantly simple brand sound?</h2>\n<p>Think of our tone of voice as a natural extension of our values and personality. We might not mention them in our copy, but their ‘feel’ should come across in every word, sentence and paragraph.</p>\n<h4 id=\"table-of-contents\">Table of contents</h4>\n<ol>\n<li><a href=\"#tone-of-voice\">Tone of voice</a></li>\n<li><a href=\"#writing-tips\">Writing tips</a></li>\n<li><a href=\"#writing-conventions\">Writing conventions</a></li>\n</ol>\n<h2 id=\"tone-of-voice\">Tone of voice</h2>\n<ol>\n<li><strong>Expert</strong> - We have a deep understanding of people, household finances and the industries in which we operate. Be confident and authoritative.</li>\n<li><strong>Human</strong> - We always talk on the same level as our customers. Be friendly and conversational, never patronising.</li>\n<li><strong>Connected</strong> - We are seamlessly synchronised with the wider world and financial one. Be timely, knowledgeable and accurate.</li>\n<li><strong>Frank</strong> - We speak truthfully and with insight. Be honest and transparent.</li>\n<li><strong>Advisory</strong> - We make a positive impact on the lives of our customers. Be empowering and informative.</li>\n</ol>\n<h2 id=\"writing-tips\">Writing tips</h2>\n<h3 id=\"write-like-you-speak\">Write like you speak</h3>\n<p>Write as if the reader is in front of you. It’ll make your words sound more natural and believable.</p>\n<h3 id=\"jargon-free-zone\">Jargon-free zone</h3>\n<p>Leave the corporate words to the boardroom. Everyday words are much better. They’re easier to read and get our message across quicker.</p>\n<h3 id=\"statistical-value\">Statistical value</h3>\n<p>Well-placed stats and relevant data really add weight to what we’re saying. But use them sparingly, and only if it really merits it.</p>\n<h3 id=\"be-active\">Be active</h3>\n<p>Use an active voice rather than a passive one. This means writing sentences this way round: ‘The customers were saving money.’ Rather than this way round: ‘Money was being saved by the customers.</p>\n<h3 id=\"consistency-is-key\">Consistency is key</h3>\n<p>We all need to speak and write the same way, otherwise it waters down our brand and weakens our position.</p>\n<h3 id=\"headlines\">Headlines</h3>\n<p>Keep them short. The longer a headline is, the less likely it is to be read. So don’t write it in four words if you can do it in three.</p>\n<h3 id=\"less-is-more\">Less is more</h3>\n<p>Short copy gets read. Long copy doesn’t. Get to the point as quick as possible. Otherwise you’ll lose the reader.</p>\n<h3 id=\"be-purposeful-and-actionable\">Be purposeful and actionable</h3>\n<p>Content should always be actionable. You’ve given the customer relevant information, now tell them what they can do with it.</p>\n<h3 id=\"once-is-enough\">Once is enough</h3>\n<p>Say it once and say it well. Repetition makes copy boring and overly long, and creeps in when we’re not confident about what we’re saying.</p>\n<h3 id=\"snack-sized-copy\">Snack-sized copy</h3>\n<p>If you have a lot of information to get across, use bullet points or sub-headings to break it up. But don’t use too many bullets or make them too long or it will defeat the objective.</p>\n<h3 id=\"go-with-the-flow\">Go with the flow</h3>\n<p>Do your words trip off the tongue? There’s one way to find out. Read them out loud and you’ll soon find out where it’s not flowing.</p>\n<h2 id=\"writing-conventions\">Writing conventions</h2>\n<h3 id=\"abbreviations\">Abbreviations</h3>\n<p>For names of companies or organisations, if an abbreviation is more familiar than the full form (e.g. BBC, IBM) use that. If not, write the name in full the first time you mention it, followed by the abbreviation in brackets. The next time you refer to it, use only the abbreviation.</p>\n<h3 id=\"apostrophes\">Apostrophes</h3>\n<p>Avoid common misuse of apostrophes:</p>\n<ul>\n<li>Mixing up it’s (it is) and its (possessive)</li>\n<li>Using to denote plural: DVD’s (wrong) vs DVDs (correct)</li>\n<li>When writing Dos and Don’ts (not Do’s and Don’ts)</li>\n<li>When writing decades 1990s (not 1990’s); the ’80s (not the 80’s)</li>\n</ul>\n<h3 id=\"british-english\">British English</h3>\n<p>Use the British ‘s’ in words such as ‘realise’, and ‘specialise’, rather than the American ‘z’.</p>\n<h3 id=\"capital-letters\">Capital letters</h3>\n<p>Never use all capital letters. Headlines follow usual sentence structure, with only the first word and proper nouns utilising capitals.</p>\n<h3 id=\"company-names-and-references\">Company names and references</h3>\n<p>Follow punctuation and capitalisation of company names and products as they are branded.</p>\n<blockquote>\n<p>Example: E.ON, iPhone, iSaver</p>\n</blockquote>\n<p>When referencing a company in a news or guide, remember to always keep them in the singular.</p>\n<blockquote>\n<p>Example: BT is launching a new ... (not BT are launching a new ...)</p>\n</blockquote>\n<h3 id=\"contractions\">Contractions</h3>\n<p>Our tone of voice is friendly and familiar, so it’s fine to use contractions like ‘they’ll’, ‘it’ll’, ‘isn’t’.</p>\n<h3 id=\"dashes-and-hyphens\">Dashes and hyphens</h3>\n<p>If you use a dash within a sentence to create emphasis, then use a long em dash – rather than a hyphen.\nCompound adjectives before a noun generally use a hyphen (e.g. ‘the well-organised energy provider’). After a noun, they should be separated (e.g. ‘the energy provider was well organised’).</p>\n<h3 id=\"exclamation-marks\">Exclamation marks</h3>\n<p>Use sparingly.</p>\n<h3 id=\"full-stops\">Full stops</h3>\n<p>Don’t use full stops at the end of headlines.</p>\n<h3 id=\"legals-disclaimers-and-caveats\">Legals, disclaimers and caveats</h3>\n<p>Superscript numbering should be used when there is more than one caveat, however, when there is only one caveat in a communication, an asterisk (*) should be used.</p>\n"},{"name":"Stats","page":"stats.html","section":"pattern-library","content":{"report":[{"stylesheets":1,"size":77228,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.11"},{"stylesheets":1,"size":77228,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.10"},{"stylesheets":1,"size":77226,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.9"},{"stylesheets":1,"size":77122,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.8"},{"stylesheets":1,"size":77211,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.7"},{"stylesheets":1,"size":77211,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.6"},{"stylesheets":1,"size":77211,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.5"},{"stylesheets":1,"size":77585,"rules":782,"selectors":1239,"simplicity":0.6311541565778854,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.4"},{"stylesheets":1,"size":77585,"rules":782,"selectors":1239,"simplicity":0.6311541565778854,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.3"},{"stylesheets":1,"size":77585,"rules":782,"selectors":1239,"simplicity":0.6311541565778854,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.2"},{"stylesheets":1,"size":76931,"rules":793,"selectors":1218,"simplicity":0.6510673234811166,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":92,"version":"1.3.1"},{"stylesheets":1,"size":76905,"rules":793,"selectors":1217,"simplicity":0.6516023007395234,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":92,"version":"1.3.0"},{"stylesheets":1,"size":75981,"rules":779,"selectors":1201,"simplicity":0.6486261448792673,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.2.2"},{"stylesheets":1,"size":75959,"rules":779,"selectors":1201,"simplicity":0.6486261448792673,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.2.1"},{"stylesheets":1,"size":71768,"rules":784,"selectors":1119,"simplicity":0.7006255585344057,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.2.0"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.3"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.2"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.1"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.0"},{"stylesheets":1,"size":68662,"rules":713,"selectors":1006,"simplicity":0.7087475149105368,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":95,"version":"1.0.6"},{"stylesheets":1,"size":68662,"rules":713,"selectors":1006,"simplicity":0.7087475149105368,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":95,"version":"1.0.5"},{"stylesheets":1,"size":69077,"rules":716,"selectors":1009,"simplicity":0.709613478691774,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.4"},{"stylesheets":1,"size":69806,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.3"},{"stylesheets":1,"size":69806,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.2"},{"stylesheets":1,"size":69810,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.1"},{"stylesheets":1,"size":69755,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.0"},{"stylesheets":1,"size":69757,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"0.20.0"},{"stylesheets":1,"size":69757,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"0.19.1"},{"stylesheets":1,"size":69684,"rules":721,"selectors":1016,"simplicity":0.7096456692913385,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"0.19.0"},{"stylesheets":1,"size":69240,"rules":720,"selectors":1018,"simplicity":0.7072691552062869,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":99,"version":"0.18.2"},{"stylesheets":1,"size":70447,"rules":731,"selectors":1035,"simplicity":0.706280193236715,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":104,"version":"0.17.2"},{"stylesheets":1,"size":70451,"rules":731,"selectors":1035,"simplicity":0.706280193236715,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":104,"version":"0.17.1"},{"stylesheets":1,"size":70461,"rules":731,"selectors":1035,"simplicity":0.706280193236715,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":104,"version":"0.17.0"},{"stylesheets":1,"size":73656,"rules":711,"selectors":1018,"simplicity":0.6984282907662083,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":98,"version":"0.16.0"},{"stylesheets":1,"size":66536,"rules":639,"selectors":917,"simplicity":0.6968375136314068,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.15.2"},{"stylesheets":1,"size":66200,"rules":639,"selectors":917,"simplicity":0.6968375136314068,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.15.1"},{"stylesheets":1,"size":66536,"rules":639,"selectors":917,"simplicity":0.6968375136314068,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.15.0"},{"stylesheets":1,"size":67418,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.4"},{"stylesheets":1,"size":67445,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.3"},{"stylesheets":1,"size":67445,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.2"},{"stylesheets":1,"size":67406,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.1"},{"stylesheets":1,"size":67406,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.0"},{"stylesheets":1,"size":88578,"rules":883,"selectors":1256,"simplicity":0.7030254777070064,"idSelectors":47,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":25,"mediaQueries":122,"version":"0.13.0"},{"stylesheets":1,"size":88440,"rules":870,"selectors":1243,"simplicity":0.6999195494770716,"idSelectors":47,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":25,"mediaQueries":122,"version":"0.12.0"},{"stylesheets":1,"size":59825,"rules":511,"selectors":808,"simplicity":0.6324257425742574,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":18,"mediaQueries":50,"version":"0.11.0"},{"stylesheets":1,"size":54633,"rules":494,"selectors":748,"simplicity":0.660427807486631,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.10.0"},{"stylesheets":1,"size":54633,"rules":494,"selectors":748,"simplicity":0.660427807486631,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.9.21"},{"stylesheets":1,"size":54570,"rules":493,"selectors":747,"simplicity":0.6599732262382865,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.9.20"},{"stylesheets":1,"size":54718,"rules":493,"selectors":747,"simplicity":0.6599732262382865,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.9.19"},{"stylesheets":1,"size":51858,"rules":469,"selectors":703,"simplicity":0.6671408250355618,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":18,"mediaQueries":44,"version":"0.9.18"},{"stylesheets":1,"size":51858,"rules":469,"selectors":703,"simplicity":0.6671408250355618,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":18,"mediaQueries":44,"version":"0.9.17"},{"stylesheets":1,"size":51259,"rules":463,"selectors":687,"simplicity":0.6739446870451238,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":43,"version":"0.9.15"},{"stylesheets":1,"size":53483,"rules":464,"selectors":676,"simplicity":0.6863905325443787,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":43,"version":"0.9.13"},{"stylesheets":1,"size":53483,"rules":464,"selectors":676,"simplicity":0.6863905325443787,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":43,"version":"0.9.12"},{"stylesheets":1,"size":47186,"rules":383,"selectors":588,"simplicity":0.6513605442176871,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":41,"version":"0.9.11"},{"stylesheets":1,"size":47184,"rules":383,"selectors":588,"simplicity":0.6513605442176871,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":41,"version":"0.9.10"}]},"template":"styleguide/templates/stats.tpl"}],"navigation":["brand","pattern-library","design"],"project":{"name":"ustyle","version":"1.3.12","description":"A living styleguide and pattern library by uSwitch.","keywords":["css","sass","scss","js","javascript","front-end","styleguide","uswitch","ustyle"],"homepage":"http://ustyle.guide","bugs":{"url":"https://github.com/uswitch/ustyle/issues"},"license":"Apache-2.0","author":"uSwitch Limited","contributors":["Joe Green <joe.green@uswitch.com>","David Annez <david.annez@uswitch.com>","Thomas Britton <thomas.britton@uswitch.com>","Ricardo Cerqueira <ricardo.cerqueira@uswitch.com>","Ivo Reis <ivo.reis@uswitch.com>"],"main":"dist/ustyle-latest.css","files":["dist/"],"repository":"uswitch/ustyle","scripts":{"test":"grunt test"},"devDependencies":{"async":"^0.9.0","autoprefixer-core":"^4.0.1","bluebird":"^2.9.7","browser-sync":"^1.8.2","cssstats":"^1.0.1","dss":"^1.0.4","gray-matter":"^2.0.0","grunt":"^0.4.5","grunt-build-control":"^0.3.0","grunt-contrib-concat":"^0.5.0","grunt-contrib-copy":"^0.8.0","grunt-contrib-sass":"^0.9.2","grunt-contrib-uglify":"^0.9.2","grunt-contrib-watch":"^0.6.1","grunt-env":"^0.4.2","grunt-newer":"^1.1.0","grunt-postcss":"^0.2.0","grunt-sassdoc":"^2.0.0","grunt-scss-lint":"~0.3.4","grunt-shell":"^1.1.1","grunt-svgmin":"^2.0.0","grunt-version":"^1.0.0","handlebars":"^2.0.0","load-grunt-tasks":"~3.1.0","lodash":"^2.4.1","marked":"^0.3.2","path":"^0.11.14","semver":"^4.3.3","simple-git":"^1.3.0","stylestats":"^4.2.2","svg-to-png":"^2.0.0","svgo":"^0.5.0","underscore.string":"^3.0.2","grunt-jscs":"~2.0.0","jscs":"~2.1.0"}}}
1	+ {"pages":[{"name":"Framework","page":"index.html","template":"styleguide/templates/simple.tpl","section":"brand","content":"<h2 id=\"we-believe-in-simplicity-\">We believe in simplicity.</h2>\n<p>That’s why we’ve made these guidelines really simple. They inform the way we look, feel, behave and sound as a company. They help ensure we remain consistent, impactful and recognisable across all of our communications.</p>\n<h3 id=\"our-values\">Our values</h3>\n<ul>\n<li>Fairness</li>\n<li>Knowledge</li>\n<li>Clarity</li>\n<li>Confidence</li>\n<li>Possibilities</li>\n</ul>\n<h3 id=\"our-mission\">Our mission</h3>\n<p>Using our expansive market knowledge and customer insight, we want to provide a simple, relevant service allowing customers to switch with minimal hassle.</p>\n<h3 id=\"our-ambition\">Our ambition</h3>\n<p>To be the UK’s leading comparison site for all consumers who wish to make their money go further.</p>\n<h3 id=\"our-vision\">Our vision</h3>\n<p>We are the comparison service of choice – because we make it relevant, personal and simple to use for consumers and partners.</p>\n<h3 id=\"our-benefit\">Our benefit</h3>\n<p>We help our customers feel like life just keeps on switching for the better, allowing their time and money to be spent on what really matters.</p>\n<h3 id=\"our-personality\">Our personality</h3>\n<ul>\n<li>Expert</li>\n<li>Frank</li>\n<li>Connected</li>\n<li>Human</li>\n<li>Advisory</li>\n</ul>\n<h2 id=\"brand-positioning\">Brand positioning</h2>\n<h3 id=\"intuitive-and-focused\">Intuitive and focused</h3>\n<p>We are connected to the individual needs of our customers. In fact, we work to understand them better than anyone. We use masses of customer data, constantly capturing more and more to continually improve the relevance of our advice. Add that to our commitment to ensure ours is the most simple and comprehensive switching service available, and our customers can find clarity in a confusing marketplace and build confidence in our brand.</p>\n<h3 id=\"authoritative-and-directional\">Authoritative and directional</h3>\n<p>We know what we’re talking about because we’re experts in what we do. We can demonstrate an unparalleled in-depth and connected understanding of our customers, the economy, household finances and the industries in which we operate. We’re always frank. We fight for what we believe is fair. And we do what we believe is right to build respect and trust.</p>\n<h3 id=\"personal-and-engaging\">Personal and engaging</h3>\n<p>We are a human brand that talks to our customers, not preaches. We treat them like knowledgeable peers. Always consistent in our tone, look and customer experience across all touch points. To make things easy to understand, information is visualised and bought to life, enabling our customers to see how they can save money or get better value for money.</p>\n<h3 id=\"experimental-and-bold\">Experimental and bold</h3>\n<p>We are pro-active, always adapting and pre-empting changes in customer mood and wider markets in which we exist. It lets our customers connect and interact with us with confidence.And we are proud of our BETA mindset. We stay agile, but we never look unpredictably experimental. Rather, we are open, current, honest, committed and consistent with our advice</p>\n"},{"name":"uSwitch living styleguide","page":"index.html","template":"styleguide/templates/simple.tpl","section":"","content":"<p>\n The sum of our efforts towards style guidelines, a pattern library and an automated front-end. Made with ❤ at <a href=\"http://www.uswitch.com\" target=\"_blank\"><strong class=\"us-color--blue\">uSwitch.com</strong></a>\n</p>\n<div class=\"us-content-group mobile-bordered\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <h3>Design guidelines</h3>\n <p>uStyle includes documentation and guidelines relating to our core design principles. It is where we document everything that happens within our brand, UX and front-end development.</p>\n </div>\n <div class=\"us-col-md-6\">\n <h3>Automated development</h3>\n <p>uStyle is a gem, a bower package, a npm package and static assets. This allows our team setup to choose how they wish to implement the core front-end of uSwitch. We've tried to be as accessible as possible.</p>\n </div>\n </div>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <h3>Pattern library</h3>\n <p>At its core, uStyle is a pattern library. It contains all current components and elements of the uSwitch UI. These are documented in the <a href=\"/pattern-library/\">pattern library</a> section.</p>\n </div>\n <div class=\"us-col-md-6\">\n <h3>Designer + developer happiness</h3>\n <p>Delivering designer + developer happiness is very important to us. uStyle provides a base for all our design and development work and allows our designers and developers to focus on the things that matter, whilst making their lives easier when prototyping.</p>\n </div>\n </div>\n</div>\n<div class=\"us-content-group\">\n <h2>The logo</h2>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-2\">\n <span class=\"us-icon--notext us-icon--ustyle us-icon--large logo--ustyle\"></span>\n </div>\n <div class=\"us-col-md-10\">\n <p>There is no reason for this logo other than it's funny and unicorns are all the rage just now.</p>\n\n <p><strong>Disclaimer:</strong> uSwitch is not a unicorn company.\n </div>\n </div>\n</div>\n<div class=\"us-content-group\">\n <h2>We're looking for great talent</h2>\n <p>Want to help us build more things like uStyle? We're constantly trying to deliver a better experience for customers and developers, and we're looking for passionate people to join our team.</p>\n <p>Fire us an email at <a href=\"mailto:jobs+developer@uswitch.com\">jobs@uswitch.com</a> with your CV and tell us a bit about yourself.</p>\n</div>\n"},{"name":"Introduction","page":"index.html","template":"styleguide/templates/simple.tpl","section":"pattern-library","content":"<p>\n Our pattern library comes as a easily distributed package, ready to use in multiple programming environments. It contains our basic CSS components and correct usage, as well as JavaScript components that are widely used across the website.\n</p>\n<a class=\"us-btn us-btn--small\" href=\"http://github.com/uswitch/ustyle\">View on github</a>\n<div class=\"us-content-group mobile-bordered\">\n <h2 class=\"trailered\">Distribution methods</h2>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6 trailered\">\n <img src=\"/images/ruby-logo.png\" alt=\"Ruby logo\" class=\"distro-image\">\n <h3>Ruby gem</h3>\n <p>uStyle was initially created as a gem. Some of the Sass functions rely on Ruby to run. You can install it via any Gemfile and it will install the required dependencies.</p>\n <pre><code class=\"ruby\">gem 'ustyle', git: \"git@github.com:uswitch/ustyle.git\"</code></pre>\n </div>\n <div class=\"us-col-md-6 trailered\">\n <img src=\"/images/bower-logo.png\" alt=\"Bower logo\" class=\"distro-image\">\n <h3>Bower package</h3>\n <p>Install is as a bower package. This will pull down the original <code>.scss</code> files and compiled static CSS + JS.</p>\n <pre><code class=\"javascript\">\n \"dependencies\": {\n \"ustyle\": \"git@github.com:uswitch/ustyle.git#~0.19.1\"\n }\n </code></pre>\n </div>\n </div>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6 trailered\">\n <img src=\"/images/cloudfront-logo.png\" alt=\"Cloudfront logo\" class=\"distro-image\">\n <h3>Cloudfront</h3>\n <p>Every time uStyle gets a new version, the version gets updated across our Cloudfront distributions.\n <pre><code class=\"html\">\n <!-- get latest -->\n <link href='//assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/ustyle-latest.css' media='all' rel='stylesheet' type='text/css' />\n <!-- get versioned -->\n <link href='//assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/VERSION/ustyle-latest.css' media='all' rel='stylesheet' type='text/css' />\n </code></pre>\n </div>\n <div class=\"us-col-md-6\">\n <img src=\"/images/npm-logo.png\" alt=\"NPM logo\" class=\"distro-image\">\n <h3>NPM Package</h3>\n <pre><code class=\"javascript\">\n \"devDependencies\": {\n \"ustyle\": \"git@github.com:uswitch/ustyle.git#~0.19.1\"\n }\n </code></pre>\n </div>\n </div>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <h2>Browser support</h2>\n <p>We use <a href=\"https://github.com/postcss/autoprefixer\">Autoprefixer + Browserlist</a> to decide what vendor prefixes to apply to our <code>Sass</code> files. We have a slightly wider browser support than the default (<a href=\"https://github.com/ai/browserslist#browserslist-\">here</a>). Currently we support all the way to IE8.</p>\n <p>Below is what we support. Each line is the minimum version or % use based on CanIUse metrics</p>\n <table class=\"pure-table pure-table-bordered\">\n <thead>\n <tr>\n <th>Browser</th>\n <th>Minimum version supported</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Safari, Chrome</td>\n <td>Last 5 versions</td>\n </tr>\n <tr>\n <td>Firefox</td>\n <td>22</td>\n </tr>\n <tr>\n <td>Opera</td>\n <td>12.1</td>\n </tr>\n <tr>\n <td>Internet Explorer</td>\n <td>8 (unless stated)</td>\n </tr>\n <tr>\n <td>Global usage</td>\n <td>> 1%</td>\n </tr>\n </tbody>\n </table>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <h2>Installation</h2>\n <p>See our github for documentation on installing this across applications.</p>\n</div>\n"},{"name":"Imagery","page":"index.html","template":"styleguide/templates/simple.tpl","section":"design","content":"\n<p>Our brand imagery is made up of <strong>lifestyle photography, product and object images, illustrations,</strong> and <strong>infographics.</strong> All of our imagery types should reassert our brand values of fairness, clarity and confidence.</p>\n<p>It’s important to remember that imagery is an extension of the uSwitch brand. It's use is to support or convey a message, not drive it.</p>\n<div class=\"us-content-group\">\n <h2>Lifestyle photography</h2>\n \n <p>Lifestyle photography should have a British feel where possible, avoiding obviously American or global images. It should be ‘reportage’ in style, avoiding cheesy, posed, forced or unrealistic photography.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-01.png\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-02.png\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-05.png\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-06.png\">\n </div>\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-03.png\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-04.png\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-07.png\">\n <img class=\"us-img--full trailered\" src=\"/images/lifestyle-photography-08.png\">\n </div>\n </div>\n</div>\n<div class=\"us-content-group\">\n <h2>Product and object images</h2>\n <p>Our product and object focused imagery may be cut out over our brand colours, brand gradients or white. When objects aren’t cut out, they should be realistic in their setting and not appear staged. Images should be straightforward, not overly metaphor based, and should not appear noticeably manipulatd. Images should be ‘documentary’ in style, avoiding cheesy, posed, forced or unrealistic photography.</p>\n <p>This will also extend into 3D renderings of objects, which are used within the banner areas of our website.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-01.png\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-02.png\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-05.png\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-06.png\">\n </div>\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-03.png\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-04.png\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-07.png\">\n <img class=\"us-img--full trailered\" src=\"/images/object-photography-08.png\">\n </div>\n </div>\n</div>\n<div class=\"us-content-group\">\n <h2>Illustrations</h2>\n <p>Our illustration style should be straightforward, clean and simple. Illustrations should be put over our brand colours, gradients or white, and they should be 2-D where possible, and not be overly metaphor based or cliché.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-01.png\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-02.png\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-05.png\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-06.png\">\n </div>\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-03.png\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-04.png\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-07.png\">\n <img class=\"us-img--full trailered\" src=\"/images/illustration-08.png\">\n </div>\n </div>\n</div>\n<div class=\"us-content-group\">\n <h2>Infographics</h2> \n <p>We use a 3D text effect to give some depth to our infographics. This should be used on objects to highlight or pull them out of the infographic. Due to the uniqueness of each infographic, there is not a rigid style in place. Just be as sympathetic to our guidelines as possible and use the colour palette.</p>\n <h4>Sizing</h4>\n <p>Infographics are generally displayed on our news and guide pages, so size the graphic accordingly (ie. 8 column width). They are also sometimes printed, so prepare them at 300dpi, then save at 72dpi if also needed for web.</p>\n \n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/infographic-01.png\">\n </div>\n <div class=\"us-col-md-6\">\n <img class=\"us-img--full trailered\" src=\"/images/infographic-02.png\">\n </div>\n </div>\n </div>\n </div>\n</div>\n"},{"name":"Articles","page":"articles.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Articles","name":"Base article","description":"<p> Article listings for news are important on the landing pages.</p>\n","markup":{"example":" <article class='us-article'>\n <a class='us-article__link' href=\"#\">\n <div class='us-grid-row'>\n <div class='us-col-md-8'>\n <h3 class='us-article__title'>Car insurance guides</h3>\n <p class='us-article__description'>\n A quarter of 18-34 year olds believe that tech companies could offer better financial services than banks\n </p>\n <div class=\"us-article__meta\">\n <span class=\"date\">2 months ago</span>\n in\n <span class=\"category\">Banking</span>\n </div>\n </div>\n <div class='us-col-md-4 us-tablet--block'>\n <img class='us-img--full us-article__image' src='http://www.uswitch.com/insurance/assets/guide-home-16141c84afd29e2063ee76803037716c.jpg' />\n </div>\n </a>\n </div>\n </article>","escaped":" <article class='us-article'>\n <a class='us-article__link' href=\"#\">\n <div class='us-grid-row'>\n <div class='us-col-md-8'>\n <h3 class='us-article__title'>Car insurance guides</h3>\n <p class='us-article__description'>\n A quarter of 18-34 year olds believe that tech companies could offer better financial services than banks\n </p>\n <div class=\"us-article__meta\">\n <span class=\"date\">2 months ago</span>\n in\n <span class=\"category\">Banking</span>\n </div>\n </div>\n <div class='us-col-md-4 us-tablet--block'>\n <img class='us-img--full us-article__image' src='http://www.uswitch.com/insurance/assets/guide-home-16141c84afd29e2063ee76803037716c.jpg' />\n </div>\n </a>\n </div>\n </article>"},"path":"vendor/assets/stylesheets/ustyle/articles/_base.scss","file":"_base.scss","link":"base_article"},{"page":"Pattern Library/Articles","name":"Guide article","description":"<p> Our guide and news articles are used across the site to communicate news/guide snippets. The layout is decided by our grid, by default they have 100% width.</p>\n","markup":{"example":" <div class='us-article-group'>\n <div class='us-guide-item us-col-md-4'>\n <a class='us-guide-item-link' href='#'>\n <div class='us-guide-item-image-container'>\n <div class='us-guide-item-image background' style='background-image: url(http://www.uswitch.com/insurance/assets/guide-home-16141c84afd29e2063ee76803037716c.jpg)'></div>\n </div>\n <div class='us-guide-item-content'>\n <h4 class='us-guide-item-title'>Car insurance guides</h4>\n <p class='us-guide-item-description'>Read our car insurance advice guides for the facts on why you need car insurance, the types of cover available, and tips on how to make a claim.</p>\n </div>\n <div class='us-guide-item-readmore'>\n <span class='us-news-item-readmorelink'>Read more</span>\n </div>\n </a>\n </div>\n </div>","escaped":" <div class='us-article-group'>\n <div class='us-guide-item us-col-md-4'>\n <a class='us-guide-item-link' href='#'>\n <div class='us-guide-item-image-container'>\n <div class='us-guide-item-image background' style='background-image: url(http://www.uswitch.com/insurance/assets/guide-home-16141c84afd29e2063ee76803037716c.jpg)'></div>\n </div>\n <div class='us-guide-item-content'>\n <h4 class='us-guide-item-title'>Car insurance guides</h4>\n <p class='us-guide-item-description'>Read our car insurance advice guides for the facts on why you need car insurance, the types of cover available, and tips on how to make a claim.</p>\n </div>\n <div class='us-guide-item-readmore'>\n <span class='us-news-item-readmorelink'>Read more</span>\n </div>\n </a>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/articles/_guide.scss","file":"_guide.scss","link":"guide_article"},{"page":"Pattern Library/Articles","name":"More article","description":"<p> If the article listing has more in a category, we use this to let a user navigate to that category</p>\n","markup":{"example":" <div class='us-more-item us-col-md-4'>\n <a class='us-more-item-link' href='#'>\n <span class='us-more-item-title'>See more banking news</span>\n </a>\n </div>","escaped":" <div class='us-more-item us-col-md-4'>\n <a class='us-more-item-link' href='#'>\n <span class='us-more-item-title'>See more banking news</span>\n </a>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/articles/_more.scss","file":"_more.scss","link":"more_article"},{"page":"Pattern Library/Articles","name":"News article","description":"<p> The news item article standard. It mirrors the guide article. The news item image is a background image as the problem of not displaying <code><img></code> tags on mobile hasn't been resolved.</p>\n","markup":{"example":" <div class='us-article-group'>\n <div class='us-news-item us-col-md-4'>\n <a class='us-news-item-link' href='#'>\n <div class='us-news-item-image-container'>\n <div class='us-news-item-image background' style='background-image: url(http://uswitch-wp-blog-assets.s3-website-eu-west-1.amazonaws.com/wp-content/uploads/2013/09/Untitled-1.jpg)'></div>\n </div>\n <div class='us-news-meta'>\n <span class='category'>Consumer rights</span>\n <span class='date'>14 Nov 2014</span>\n </div>\n <h3 class='us-news-item-title'>Customer uses promoted tweet to complain about BA</h3>\n <p class='us-news-item-snippet'>Sign of things to come? Social media helps to empower disgruntled consumer amid lost luggage row</p>\n <div class='us-news-item-readmore'>\n <span class='us-news-item-readmorelink'>More consumer rights</span>\n </div>\n </a>\n </div>\n </div>","escaped":" <div class='us-article-group'>\n <div class='us-news-item us-col-md-4'>\n <a class='us-news-item-link' href='#'>\n <div class='us-news-item-image-container'>\n <div class='us-news-item-image background' style='background-image: url(http://uswitch-wp-blog-assets.s3-website-eu-west-1.amazonaws.com/wp-content/uploads/2013/09/Untitled-1.jpg)'></div>\n </div>\n <div class='us-news-meta'>\n <span class='category'>Consumer rights</span>\n <span class='date'>14 Nov 2014</span>\n </div>\n <h3 class='us-news-item-title'>Customer uses promoted tweet to complain about BA</h3>\n <p class='us-news-item-snippet'>Sign of things to come? Social media helps to empower disgruntled consumer amid lost luggage row</p>\n <div class='us-news-item-readmore'>\n <span class='us-news-item-readmorelink'>More consumer rights</span>\n </div>\n </a>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/articles/_news.scss","file":"_news.scss","link":"news_article"},{"page":"Pattern Library/Articles","name":"Related items","description":"<p> Related lists used for content sidebars</p>\n","markup":{"example":" <ul class=\"us-related us-list--reset\">\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">Car accident claims — How to make a car insurance claim</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">How to get the best car insurance deals</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">No claims bonus explained: how to protect a no claims discount</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link us-related__item-link--more\" href=\"#\">See more guides</a>\n </li>\n </ul>","escaped":" <ul class=\"us-related us-list--reset\">\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">Car accident claims — How to make a car insurance claim</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">How to get the best car insurance deals</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">No claims bonus explained: how to protect a no claims discount</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link us-related__item-link--more\" href=\"#\">See more guides</a>\n </li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/articles/_related.scss","file":"_related.scss","link":"related_items"}]},{"name":"Colours","page":"colours.html","template":"styleguide/templates/styleguide.tpl","section":"brand","blocks":[{"page":"Brand/Colours","name":"Primary palette","partial":"colour","description":"<p> Our colours (with a "u", we're a UK company) are divided into primary, secondary and tertiary palettes. The primary and secondary are core to all our design work and supported by the tertiary which we use in infographics, graphs and the like. CMYK equivalents are available for print work.</p>\n","variable":[{"name":"c-cyan","description":"Hero banners","value":"#99e2ff"},{"name":"c-navy","description":"Text with emphasis","value":"#1c1f4e"},{"name":"c-blue","description":"Logo","value":"#174695"},{"name":"c-typecyan","description":"Text links, icons","value":"#008fe9"},{"name":"c-typegrey","description":"Body text","value":"#2f353a"},{"name":"c-typegrey-2","description":"Text without emphasis","value":"#65717b"},{"name":"c-bggrey","description":"Backgrounds","value":"#f4f5f6"},{"name":"c-red","description":"Primary buttons","value":"#d64226"},{"name":"c-green","description":"Action buttons, USPs","value":"#2aaa5b"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"primary_palette"},{"page":"Brand/Colours","name":"Secondary palette","partial":"colour","variable":[{"name":"c-inputgrey","description":"Dropdowns, icons","value":"#84909a"},{"name":"c-bordergrey","description":"Borders","value":"#b0b8bf"},{"name":"c-keylinegrey","description":"Keylines, separators","value":"#e9ebed"},{"name":"c-blue-light","description":"","value":"#0c72bf"},{"name":"c-typecyan-light","description":"","value":"#4cc0f4"},{"name":"c-cyan-light","description":"","value":"#e4f8ff"},{"name":"c-yellow","description":"USPs","value":"#ffd32f"},{"name":"c-orange","description":"USPs","value":"#f27930"},{"name":"c-purple","description":"USPs","value":"#9c55b8"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"secondary_palette"},{"page":"Brand/Colours","name":"Tertiary palette","partial":"colour","variable":[{"name":"c-red-dark","description":"","value":"#b53820"},{"name":"c-green-dark","description":"","value":"#23904d"},{"name":"c-red-lightest","description":"","value":"#eeb3a8"},{"name":"c-green-lightest","description":"","value":"#adebc5"},{"name":"c-yellow-lightest","description":"","value":"#ffedab"},{"name":"c-orange-lightest","description":"","value":"#f9c9ac"},{"name":"c-purple-lightest","description":"","value":"#d7bbe2"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"tertiary_palette"}]},{"name":"Utilities","page":"utilities.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Utilities","name":"General","description":"<p> These utility classes allow for some basic CSS properties to be applied across elements. The classname applies to the property that is getting set, with the value as the modifier.</p>\n","state":[{"name":".us-clearfix","escaped":"us-clearfix","description":"Clear floats","markup":{"example":" <div class='us-clearfix'>\n <p>content</p>\n </div>"}},{"name":".us-float--left","escaped":"us-float--left","description":"Float element to the left","markup":{"example":" <div class='us-float--left'>\n <p>content</p>\n </div>"}},{"name":".us-float--right","escaped":"us-float--right","description":"Float element to the right","markup":{"example":" <div class='us-float--right'>\n <p>content</p>\n </div>"}},{"name":".us-align--left","escaped":"us-align--left","description":"Align content of the element to the left","markup":{"example":" <div class='us-align--left'>\n <p>content</p>\n </div>"}},{"name":".us-align--center","escaped":"us-align--center","description":"Align content of the element to the center","markup":{"example":" <div class='us-align--center'>\n <p>content</p>\n </div>"}},{"name":".us-align--right","escaped":"us-align--right","description":"Align content of the element to the right","markup":{"example":" <div class='us-align--right'>\n <p>content</p>\n </div>"}},{"name":".us-block","escaped":"us-block","description":"Display element as a block","markup":{"example":" <div class='us-block'>\n <p>content</p>\n </div>"}},{"name":".us-color--cyan","escaped":"us-color--cyan","description":"Change content color to blue, navy, typecyan, cyan, red, green","markup":{"example":" <div class='us-color--cyan'>\n <p>content</p>\n </div>"}},{"name":".us-list--reset","escaped":"us-list--reset","description":"Reset list style","markup":{"example":" <div class='us-list--reset'>\n <p>content</p>\n </div>"}}],"markup":{"example":" <div class='{$modifiers}'>\n <p>content</p>\n </div>","escaped":" <div>\n <p>content</p>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_general.scss","file":"_general.scss","link":"general"},{"page":"Pattern Library/Utilities","name":"Images","description":"<p> Helpful image classes for making images full width or floating within content.</p>\n","state":[{"name":".us-img--full","escaped":"us-img--full","description":"Full width image","markup":{"example":" <p>\n <img class=\"us-img--full\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"}},{"name":".us-img--left","escaped":"us-img--left","description":"Left floated image","markup":{"example":" <p>\n <img class=\"us-img--left\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"}},{"name":".us-img--right","escaped":"us-img--right","description":"Right floated image","markup":{"example":" <p>\n <img class=\"us-img--right\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"}}],"markup":{"example":" <p>\n <img class=\"{$modifiers}\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>","escaped":" <p>\n <img src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_images.scss","file":"_images.scss","link":"images"},{"page":"Pattern Library/Utilities","name":"Responsive","description":"<p> Responsive classes to allow display of elements across devices. You have the option of displaying them as <code>block</code>, <code>inline-block</code> or <code>inline</code> elements.</p>\n<p> You can also hide elements by <code>.us-{DEVICE}--hidden</code> and will hide those elements above that breakpoint.</p>\n","markup":{"example":" <div class='us-lg-desktop--block'><strong>.us-lg-desktop--block</strong> Shows on large desktop and up</div>\n <div class='us-desktop--block'><strong>.us-desktop--block</strong> Shows on desktop and up</div>\n <div class='us-tablet--block'><strong>.us-tablet--block</strong> Shows on tablet and up</div>\n <div class='us-sm-tablet--block'><strong>.us-sm-tablet--block</strong> Shows on small tablet and up</div>\n <div class='us-mobile--block'><strong>.us-mobile--block</strong> Shows on mobile only</div>\n <div class='us-tablet--hidden'><strong>.us-tablet--hidden</strong> Hidden on tablet and up</div>","escaped":" <div class='us-lg-desktop--block'><strong>.us-lg-desktop--block</strong> Shows on large desktop and up</div>\n <div class='us-desktop--block'><strong>.us-desktop--block</strong> Shows on desktop and up</div>\n <div class='us-tablet--block'><strong>.us-tablet--block</strong> Shows on tablet and up</div>\n <div class='us-sm-tablet--block'><strong>.us-sm-tablet--block</strong> Shows on small tablet and up</div>\n <div class='us-mobile--block'><strong>.us-mobile--block</strong> Shows on mobile only</div>\n <div class='us-tablet--hidden'><strong>.us-tablet--hidden</strong> Hidden on tablet and up</div>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_responsive.scss","file":"_responsive.scss","link":"responsive"},{"page":"Pattern Library/Utilities","name":"Spacing","description":"<p> Allow control of spacing around element. You can set margin or padding for an element without creating an extra class.</p>\n<p> An example of this <code>.us-margin-top</code>, <code>.us-margin-top--small</code>, <code>.us-margin-top--large</code> where <code>margin</code> can be replaced by <code>padding</code> and <code>top</code> can be replaced by <code>bottom</code>, <code>left</code> or <code>right</code>.</p>\n<p> Default space for margin and padding is 1em, <code>small</code> modifier uses .5em and <code>large</code> modifier uses 1.5em.</p>\n","state":[{"name":".us-margin-top","escaped":"us-margin-top","description":"Use default top margin (1em)","markup":{"example":"<div class='class-goes-here us-margin-top'>Sample content</div>"}},{"name":".us-margin-top--small","escaped":"us-margin-top--small","description":"Use small top margin (.5em)","markup":{"example":"<div class='class-goes-here us-margin-top--small'>Sample content</div>"}},{"name":".us-margin-top--large","escaped":"us-margin-top--large","description":"Use large top margin (1.5em)","markup":{"example":"<div class='class-goes-here us-margin-top--large'>Sample content</div>"}},{"name":".us-margin-bottom","escaped":"us-margin-bottom","description":"Use default bottom margin (1em)","markup":{"example":"<div class='class-goes-here us-margin-bottom'>Sample content</div>"}},{"name":".us-margin-bottom--small","escaped":"us-margin-bottom--small","description":"Use small bottom margin (.5em)","markup":{"example":"<div class='class-goes-here us-margin-bottom--small'>Sample content</div>"}},{"name":".us-margin-bottom--large","escaped":"us-margin-bottom--large","description":"Use large bottom margin (1.5em)","markup":{"example":"<div class='class-goes-here us-margin-bottom--large'>Sample content</div>"}},{"name":".us-margin-left","escaped":"us-margin-left","description":"Use default left margin (1em)","markup":{"example":"<div class='class-goes-here us-margin-left'>Sample content</div>"}},{"name":".us-margin-left--small","escaped":"us-margin-left--small","description":"Use small left margin (.5em)","markup":{"example":"<div class='class-goes-here us-margin-left--small'>Sample content</div>"}},{"name":".us-margin-left--large","escaped":"us-margin-left--large","description":"Use large left margin (1.5em)","markup":{"example":"<div class='class-goes-here us-margin-left--large'>Sample content</div>"}},{"name":".us-margin-right","escaped":"us-margin-right","description":"Use default right margin (1em)","markup":{"example":"<div class='class-goes-here us-margin-right'>Sample content</div>"}},{"name":".us-margin-right--small","escaped":"us-margin-right--small","description":"Use small right margin (.5em)","markup":{"example":"<div class='class-goes-here us-margin-right--small'>Sample content</div>"}},{"name":".us-margin-right--large","escaped":"us-margin-right--large","description":"Use large right margin (1.5em)","markup":{"example":"<div class='class-goes-here us-margin-right--large'>Sample content</div>"}},{"name":".us-padding-top","escaped":"us-padding-top","description":"Use default top padding (1em)","markup":{"example":"<div class='class-goes-here us-padding-top'>Sample content</div>"}},{"name":".us-padding-top--small","escaped":"us-padding-top--small","description":"Use small top padding (.5em)","markup":{"example":"<div class='class-goes-here us-padding-top--small'>Sample content</div>"}},{"name":".us-padding-top--large","escaped":"us-padding-top--large","description":"Use large top padding (1.5em)","markup":{"example":"<div class='class-goes-here us-padding-top--large'>Sample content</div>"}},{"name":".us-padding-bottom","escaped":"us-padding-bottom","description":"Use default bottom padding (1em)","markup":{"example":"<div class='class-goes-here us-padding-bottom'>Sample content</div>"}},{"name":".us-padding-bottom--small","escaped":"us-padding-bottom--small","description":"Use small bottom padding (.5em)","markup":{"example":"<div class='class-goes-here us-padding-bottom--small'>Sample content</div>"}},{"name":".us-padding-bottom--large","escaped":"us-padding-bottom--large","description":"Use large bottom padding (1.5em)","markup":{"example":"<div class='class-goes-here us-padding-bottom--large'>Sample content</div>"}},{"name":".us-padding-left","escaped":"us-padding-left","description":"Use default left padding (1em)","markup":{"example":"<div class='class-goes-here us-padding-left'>Sample content</div>"}},{"name":".us-padding-left--small","escaped":"us-padding-left--small","description":"Use small left padding (.5em)","markup":{"example":"<div class='class-goes-here us-padding-left--small'>Sample content</div>"}},{"name":".us-padding-left--large","escaped":"us-padding-left--large","description":"Use large left padding (1.5em)","markup":{"example":"<div class='class-goes-here us-padding-left--large'>Sample content</div>"}},{"name":".us-padding-right","escaped":"us-padding-right","description":"Use default right padding (1em)","markup":{"example":"<div class='class-goes-here us-padding-right'>Sample content</div>"}},{"name":".us-padding-right--small","escaped":"us-padding-right--small","description":"Use small right padding (.5em)","markup":{"example":"<div class='class-goes-here us-padding-right--small'>Sample content</div>"}},{"name":".us-padding-right--large","escaped":"us-padding-right--large","description":"Use large right padding (1.5em)","markup":{"example":"<div class='class-goes-here us-padding-right--large'>Sample content</div>"}},{"name":".us-reset--padding","escaped":"us-reset--padding","description":"Reset padding to 0","markup":{"example":"<div class='class-goes-here us-reset--padding'>Sample content</div>"}},{"name":".us-reset--margin","escaped":"us-reset--margin","description":"Reset margin to 0","markup":{"example":"<div class='class-goes-here us-reset--margin'>Sample content</div>"}},{"name":".us-reset","escaped":"us-reset","description":"Reset padding and margin to 0","markup":{"example":"<div class='class-goes-here us-reset'>Sample content</div>"}}],"markup":{"example":"<div class='class-goes-here {$modifiers}'>Sample content</div>","escaped":"<div class='class-goes-here'>Sample content</div>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_spacing.scss","file":"_spacing.scss","link":"spacing"}]},{"name":"Typography","page":"typography.html","template":"styleguide/templates/simple.tpl","section":"design","content":"<p>Typography is a key element of how we communicate at uSwitch. We've recently revised our type settings and removed FS Elliot Web from our fonts to increase legibility across devices.</p>\n<p>Our chosen font is the beautiful and open source Open Sans which performs exceptionally well across all of our target devices and operating systems. It is, unlike many custom webfonts, particularly well kerned for Windows machines.</p>\n<h2 id=\"open-sans\">Open Sans</h2>\n<div class=\"font-chars\">\nA B C D E F G H I J K L M N O P Q R S T U V W X Y Z\n<br>a b c d e f g h i j k l m n o p q r s t u v w x y z\n<br>0 1 2 3 4 5 6 7 8 9 10\n</div>\n\n<h2 id=\"open-sans-bold\">Open Sans Bold</h2>\n<div class=\"font-chars font-chars--bold\">\nA B C D E F G H I J K L M N O P Q R S T U V W X Y Z\n<br>a b c d e f g h i j k l m n o p q r s t u v w x y z\n<br>0 1 2 3 4 5 6 7 8 9 10\n</div>\n\n<h2 id=\"open-sans-italic\">Open Sans Italic</h2>\n<div class=\"font-chars font-chars--italic\">\nA B C D E F G H I J K L M N O P Q R S T U V W X Y Z\n<br>a b c d e f g h i j k l m n o p q r s t u v w x y z\n<br>0 1 2 3 4 5 6 7 8 9 10\n</div>\n"},{"name":"Icons","page":"icons.html","template":"styleguide/templates/styleguide.tpl","section":"design","blocks":[{"page":"Design/Icons","name":"Icons","partial":"icons","description":"<p> Icons are created by chaining classes together with <code>us-icon</code>. There are 3 sizes, 16px, 32px, 64px, these are named <code>us-icon--small</code>, <code>us-icon--medium</code> and <code>us-icon--large</code> respectively.</p>\n<p> There are 5 colours for each icon, <em>white</em>, <em>typegrey</em>, <em>inputgrey</em>, <em>typecyan</em> and <em>custom</em>. Where <em>custom</em> can differ depending on what the icon represents (for logos, the custom tends to be the brand colour of that company). If you want an icon to be part of a <strong>:pseudo</strong> element (:before, :after) then suffix your icon name with <code>--before</code> and <code>--after</code> respectively. To have an icon standalone with text as fallback, add <code>us-icon--notext</code> to the element.</p>\n","state":[{"name":"us-icon--alarm","escaped":"us-icon--alarm","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--alarm\"></div>"}},{"name":"us-icon--android","escaped":"us-icon--android","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--android\"></div>"}},{"name":"us-icon--angry","escaped":"us-icon--angry","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--angry\"></div>"}},{"name":"us-icon--apple","escaped":"us-icon--apple","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--apple\"></div>"}},{"name":"us-icon--arrow-circle","escaped":"us-icon--arrow-circle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--arrow-circle\"></div>"}},{"name":"us-icon--arrow-up-left","escaped":"us-icon--arrow-up-left","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--arrow-up-left\"></div>"}},{"name":"us-icon--arrow-up","escaped":"us-icon--arrow-up","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--arrow-up\"></div>"}},{"name":"us-icon--arrow-down","escaped":"us-icon--arrow-down","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--arrow-down\"></div>"}},{"name":"us-icon--barchart","escaped":"us-icon--barchart","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--barchart\"></div>"}},{"name":"us-icon--blackberry","escaped":"us-icon--blackberry","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--blackberry\"></div>"}},{"name":"us-icon--book","escaped":"us-icon--book","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--book\"></div>"}},{"name":"us-icon--bookmark","escaped":"us-icon--bookmark","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--bookmark\"></div>"}},{"name":"us-icon--breadcrumb","escaped":"us-icon--breadcrumb","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--breadcrumb\"></div>"}},{"name":"us-icon--calculator","escaped":"us-icon--calculator","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--calculator\"></div>"}},{"name":"us-icon--calendar","escaped":"us-icon--calendar","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--calendar\"></div>"}},{"name":"us-icon--car","escaped":"us-icon--car","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--car\"></div>"}},{"name":"us-icon--checkbox-tick","escaped":"us-icon--checkbox-tick","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--checkbox-tick\"></div>"}},{"name":"us-icon--chevron-right","escaped":"us-icon--chevron-right","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--chevron-right\"></div>"}},{"name":"us-icon--clock","escaped":"us-icon--clock","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--clock\"></div>"}},{"name":"us-icon--close","escaped":"us-icon--close","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--close\"></div>"}},{"name":"us-icon--cog","escaped":"us-icon--cog","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--cog\"></div>"}},{"name":"us-icon--credit-card","escaped":"us-icon--credit-card","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--credit-card\"></div>"}},{"name":"us-icon--cross","escaped":"us-icon--cross","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--cross\"></div>"}},{"name":"us-icon--desktop","escaped":"us-icon--desktop","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--desktop\"></div>"}},{"name":"us-icon--doc","escaped":"us-icon--doc","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--doc\"></div>"}},{"name":"us-icon--dual-fuel","escaped":"us-icon--dual-fuel","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--dual-fuel\"></div>"}},{"name":"us-icon--electric-light","escaped":"us-icon--electric-light","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--electric-light\"></div>"}},{"name":"us-icon--envelope","escaped":"us-icon--envelope","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--envelope\"></div>"}},{"name":"us-icon--exit-noexit","escaped":"us-icon--exit-noexit","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--exit-noexit\"></div>"}},{"name":"us-icon--facebook","escaped":"us-icon--facebook","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--facebook\"></div>"}},{"name":"us-icon--filter","escaped":"us-icon--filter","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--filter\"></div>"}},{"name":"us-icon--fixed-variable","escaped":"us-icon--fixed-variable","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--fixed-variable\"></div>"}},{"name":"us-icon--gas","escaped":"us-icon--gas","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--gas\"></div>"}},{"name":"us-icon--gauge","escaped":"us-icon--gauge","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--gauge\"></div>"}},{"name":"us-icon--github","escaped":"us-icon--github","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--github\"></div>"}},{"name":"us-icon--google","escaped":"us-icon--google","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--google\"></div>"}},{"name":"us-icon--graph-up","escaped":"us-icon--graph-up","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--graph-up\"></div>"}},{"name":"us-icon--happy","escaped":"us-icon--happy","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--happy\"></div>"}},{"name":"us-icon--home","escaped":"us-icon--home","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--home\"></div>"}},{"name":"us-icon--hot","escaped":"us-icon--hot","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--hot\"></div>"}},{"name":"us-icon--info","escaped":"us-icon--info","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--info\"></div>"}},{"name":"us-icon--kettle","escaped":"us-icon--kettle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--kettle\"></div>"}},{"name":"us-icon--key","escaped":"us-icon--key","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--key\"></div>"}},{"name":"us-icon--laptop","escaped":"us-icon--laptop","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--laptop\"></div>"}},{"name":"us-icon--lock","escaped":"us-icon--lock","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--lock\"></div>"}},{"name":"us-icon--magnify-in","escaped":"us-icon--magnify-in","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--magnify-in\"></div>"}},{"name":"us-icon--magnify-out","escaped":"us-icon--magnify-out","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--magnify-out\"></div>"}},{"name":"us-icon--magnify","escaped":"us-icon--magnify","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--magnify\"></div>"}},{"name":"us-icon--menu","escaped":"us-icon--menu","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--menu\"></div>"}},{"name":"us-icon--message","escaped":"us-icon--message","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--message\"></div>"}},{"name":"us-icon--mobile","escaped":"us-icon--mobile","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--mobile\"></div>"}},{"name":"us-icon--monthly-dd","escaped":"us-icon--monthly-dd","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--monthly-dd\"></div>"}},{"name":"us-icon--network","escaped":"us-icon--network","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--network\"></div>"}},{"name":"us-icon--neutral","escaped":"us-icon--neutral","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--neutral\"></div>"}},{"name":"us-icon--no-exit","escaped":"us-icon--no-exit","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--no-exit\"></div>"}},{"name":"us-icon--pdf","escaped":"us-icon--pdf","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--pdf\"></div>"}},{"name":"us-icon--pencil","escaped":"us-icon--pencil","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--pencil\"></div>"}},{"name":"us-icon--person-add","escaped":"us-icon--person-add","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--person-add\"></div>"}},{"name":"us-icon--person","escaped":"us-icon--person","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--person\"></div>"}},{"name":"us-icon--phone","escaped":"us-icon--phone","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--phone\"></div>"}},{"name":"us-icon--piggy-bank","escaped":"us-icon--piggy-bank","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--piggy-bank\"></div>"}},{"name":"us-icon--pin","escaped":"us-icon--pin","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--pin\"></div>"}},{"name":"us-icon--pound-note","escaped":"us-icon--pound-note","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--pound-note\"></div>"}},{"name":"us-icon--power","escaped":"us-icon--power","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--power\"></div>"}},{"name":"us-icon--present","escaped":"us-icon--present","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--present\"></div>"}},{"name":"us-icon--print","escaped":"us-icon--print","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--print\"></div>"}},{"name":"us-icon--quarterly-dd","escaped":"us-icon--quarterly-dd","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--quarterly-dd\"></div>"}},{"name":"us-icon--question-circle","escaped":"us-icon--question-circle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--question-circle\"></div>"}},{"name":"us-icon--question","escaped":"us-icon--question","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--question\"></div>"}},{"name":"us-icon--quote","escaped":"us-icon--quote","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--quote\"></div>"}},{"name":"us-icon--recycle","escaped":"us-icon--recycle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--recycle\"></div>"}},{"name":"us-icon--remove","escaped":"us-icon--remove","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--remove\"></div>"}},{"name":"us-icon--renewable","escaped":"us-icon--renewable","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--renewable\"></div>"}},{"name":"us-icon--results","escaped":"us-icon--results","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--results\"></div>"}},{"name":"us-icon--sad","escaped":"us-icon--sad","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--sad\"></div>"}},{"name":"us-icon--save","escaped":"us-icon--save","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--save\"></div>"}},{"name":"us-icon--share","escaped":"us-icon--share","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--share\"></div>"}},{"name":"us-icon--sim","escaped":"us-icon--sim","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--sim\"></div>"}},{"name":"us-icon--smiley","escaped":"us-icon--smiley","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--smiley\"></div>"}},{"name":"us-icon--sort","escaped":"us-icon--sort","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--sort\"></div>"}},{"name":"us-icon--speech-circle","escaped":"us-icon--speech-circle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--speech-circle\"></div>"}},{"name":"us-icon--speech","escaped":"us-icon--speech","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--speech\"></div>"}},{"name":"us-icon--spinner","escaped":"us-icon--spinner","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--spinner\"></div>"}},{"name":"us-icon--star-half","escaped":"us-icon--star-half","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--star-half\"></div>"}},{"name":"us-icon--star","escaped":"us-icon--star","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--star\"></div>"}},{"name":"us-icon--starline-half","escaped":"us-icon--starline-half","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--starline-half\"></div>"}},{"name":"us-icon--starline","escaped":"us-icon--starline","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--starline\"></div>"}},{"name":"us-icon--tablet","escaped":"us-icon--tablet","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--tablet\"></div>"}},{"name":"us-icon--talk","escaped":"us-icon--talk","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--talk\"></div>"}},{"name":"us-icon--tick-circle","escaped":"us-icon--tick-circle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--tick-circle\"></div>"}},{"name":"us-icon--tick","escaped":"us-icon--tick","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--tick\"></div>"}},{"name":"us-icon--tv","escaped":"us-icon--tv","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--tv\"></div>"}},{"name":"us-icon--twitter","escaped":"us-icon--twitter","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--twitter\"></div>"}},{"name":"us-icon--uswitch","escaped":"us-icon--uswitch","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--uswitch\"></div>"}},{"name":"us-icon--variable","escaped":"us-icon--variable","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--variable\"></div>"}},{"name":"us-icon--warning-circle","escaped":"us-icon--warning-circle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--warning-circle\"></div>"}},{"name":"us-icon--warning","escaped":"us-icon--warning","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--warning\"></div>"}},{"name":"us-icon--wifi","escaped":"us-icon--wifi","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--wifi\"></div>"}},{"name":"us-icon--wiki","escaped":"us-icon--wiki","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--wiki\"></div>"}},{"name":"us-icon--windows","escaped":"us-icon--windows","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--windows\"></div>"}},{"name":"us-icon--wondering","escaped":"us-icon--wondering","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--wondering\"></div>"}},{"name":"us-icon--world","escaped":"us-icon--world","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--world\"></div>"}},{"name":"us-icon--xml","escaped":"us-icon--xml","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--xml\"></div>"}},{"name":"us-icon--play","escaped":"us-icon--play","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--play\"></div>"}},{"name":"us-icon--controller","escaped":"us-icon--controller","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--controller\"></div>"}},{"name":"us-icon--pound-circle","escaped":"us-icon--pound-circle","description":"","markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan us-icon--pound-circle\"></div>"}}],"markup":{"example":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan {$modifiers}\"></div>","escaped":"<div class=\"us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan\"></div>"},"path":"vendor/assets/stylesheets/ustyle/icons/_base.scss","file":"_base.scss","link":"icons"}]},{"name":"Forms","page":"forms.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Forms","name":"Fields","description":"<p> This is the basic form field, <code>.us-field</code> wrapper for any single input or select. It sets a few layout options by default (margin) and styles any labels within. You can create a fake label style with <code>.us-faux-label</code></p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li>For text inputs that are optional, add "(optional)" to the <code>placeholder</code> attribute for the input. Not highlighting required fields makes the form look less intimidating.</li>\n</ul>\n","state":[{"name":".us-field--blocked","escaped":"us-field--blocked","description":"Blocked label styling","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>"}},{"name":".us-field--inline","escaped":"us-field--inline","description":"Inline label styling","markup":{"example":" <div class=\"us-field us-field--inline\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>"}}],"markup":{"example":" <div class=\"us-field {$modifiers}\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>","escaped":" <div class=\"us-field\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_fields.scss","file":"_fields.scss","link":"fields"},{"page":"Pattern Library/Forms","name":"Input group","description":"<p> Inputs groups allow you to add "boxes" to the left or right of an input. These boxes usually contain a visual icon to represent the usage of the input</p>\n","state":[{"name":".us-input-group--disabled","escaped":"us-input-group--disabled","description":"Disabled state for input groups","markup":{"example":" <div class=\"us-input-group us-margin-bottom us-input-group--disabled\">\n <span class=\"us-input-group__box\"><span class=\"us-icon--small us-icon--inputgrey us-icon--envelope us-icon--notext\"></span></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom us-input-group--disabled\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>"}},{"name":".us-input-group--blocked","escaped":"us-input-group--blocked","description":"Fluid style","markup":{"example":" <div class=\"us-input-group us-margin-bottom us-input-group--blocked\">\n <span class=\"us-input-group__box\"><span class=\"us-icon--small us-icon--inputgrey us-icon--envelope us-icon--notext\"></span></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom us-input-group--blocked\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>"}}],"markup":{"example":" <div class=\"us-input-group us-margin-bottom {$modifiers}\">\n <span class=\"us-input-group__box\"><span class=\"us-icon--small us-icon--inputgrey us-icon--envelope us-icon--notext\"></span></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom {$modifiers}\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>","escaped":" <div class=\"us-input-group us-margin-bottom\">\n <span class=\"us-input-group__box\"><span class=\"us-icon--small us-icon--inputgrey us-icon--envelope us-icon--notext\"></span></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_input-group.scss","file":"_input-group.scss","link":"input_group"},{"page":"Pattern Library/Forms","name":"Inputs","description":"<p> Our standard input styling across the website. This is specifically for text, email, password, search etc. type inputs.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Specifying an appropriate <a href=\"https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-type\">type attribute</a> (e.g. type="tel" for telephone number fields) will not only control what input is displayed, but also helps mobile devices select a keyboard layout suitable for entering that type of data.</p>\n</li>\n<li><p>Where appropriate use the <a href=\"https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-autocomplete\">autocomplete attribute</a> to make it easier for the browser to fill in fields on the users behalf, saving them time on lengthy forms.</p>\n</li>\n</ul>\n","state":[{"name":".us-form-input--large","escaped":"us-form-input--large","description":"Larger input style","markup":{"example":"<input class=\"us-form-input us-form-input--large\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--blocked","escaped":"us-form-input--blocked","description":"Fluid input style","markup":{"example":"<input class=\"us-form-input us-form-input--blocked\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--error","escaped":"us-form-input--error","description":"Visual feedback for when the input has an error","markup":{"example":"<input class=\"us-form-input us-form-input--error\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--success","escaped":"us-form-input--success","description":"Visual feedback for when success needs to be communicated to the user","markup":{"example":"<input class=\"us-form-input us-form-input--success\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--disabled","escaped":"us-form-input--disabled","description":"Inactive state for form inputs that can't be interacted with","markup":{"example":"<input class=\"us-form-input us-form-input--disabled\" type=\"text\" placeholder=\"Placeholder\">"}}],"markup":{"example":"<input class=\"us-form-input {$modifiers}\" type=\"text\" placeholder=\"Placeholder\">","escaped":"<input class=\"us-form-input\" type=\"text\" placeholder=\"Placeholder\">"},"path":"vendor/assets/stylesheets/ustyle/forms/_input.scss","file":"_input.scss","link":"inputs"},{"page":"Pattern Library/Forms","name":"Radios and checkboxes","description":"<p> Browsers that support screen density media features display our font icon tick or a box shadow circle. Other browsers fallback to default styling.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Like select boxes, radio buttons are good for making a selection from a mutually exclusive list of options. The main difference between the two is that with radio buttons, the user must choose exactly one of the options.</p>\n</li>\n<li><p>Use radio buttons when each of the choices matters to the user. Each needs to be considered before they make their choice.</p>\n</li>\n<li><p>Checkboxes in a group should be used for choosing zero or more options from a list of independent options. Toggling one should not change the state of others in the group.</p>\n</li>\n<li><p>A stand-alone checkbox is good for toggling something on/off or opting in/out.</p>\n</li>\n<li><p>Provide a default selection to radio and checkbox groups if it's necessary and wont be changed by 90% of your users.</p>\n</li>\n<li><p>Try to keep the number of radio buttons and checkboxes in the same group to a maximum of 6.</p>\n</li>\n</ul>\n","state":[{"name":"us-form-input--disabled","escaped":"us-form-input--disabled","description":"Like other types of form inputs, adding this class to the element in conjunction with the disabled attribute helps to make the element look like it can't be interacted with","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Do you have a different billing address?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input us-form-input--disabled\" name=\"null\" type=\"radio\">\n Yes\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"radio\">\n No\n </label>\n </div>\n </div>\n <div class=\"us-field us-field--blocked\">\n <label>How would you like to be contacted?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input us-form-input--disabled\" name=\"null\" type=\"checkbox\">\n Mobile\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Email\n </label>\n </div>\n </div>"}}],"markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Do you have a different billing address?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input {$modifiers}\" name=\"null\" type=\"radio\">\n Yes\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"radio\">\n No\n </label>\n </div>\n </div>\n <div class=\"us-field us-field--blocked\">\n <label>How would you like to be contacted?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input {$modifiers}\" name=\"null\" type=\"checkbox\">\n Mobile\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Email\n </label>\n </div>\n </div>","escaped":" <div class=\"us-field us-field--blocked\">\n <label>Do you have a different billing address?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input\" name=\"null\" type=\"radio\">\n Yes\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"radio\">\n No\n </label>\n </div>\n </div>\n <div class=\"us-field us-field--blocked\">\n <label>How would you like to be contacted?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Mobile\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Email\n </label>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_radio-checkbox.scss","file":"_radio-checkbox.scss","link":"radios_and_checkboxes"},{"page":"Pattern Library/Forms","name":"Selects","description":"<p> Select boxes allow users to choose and option or options from a list of options.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Use select boxes when choosing one or more options from a list of related, but mutually exclusive options e.g. profession, title, month.</p>\n</li>\n<li><p>It can be tempting to put many things in a select box for users to choose from. Try to keep the list of options to between 4 and 15 so the user doesn't become overwhelmed with choices.</p>\n</li>\n</ul>\n","state":[{"name":".us-form-select--multiple","escaped":"us-form-select--multiple","description":"Removes the drop down arrow and adjusts the padding of <option> elements. Useful when using <select> elements that have the size=\"\" attribute set to anything higher than 1.","markup":{"example":" <select class=\"us-form-select us-form-select--multiple\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--blocked","escaped":"us-form-select--blocked","description":"Fluid style","markup":{"example":" <select class=\"us-form-select us-form-select--blocked\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--error","escaped":"us-form-select--error","description":"Visual feedback for when the input has an error","markup":{"example":" <select class=\"us-form-select us-form-select--error\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--success","escaped":"us-form-select--success","description":"Visual feedback for when success needs to be communicated to the user","markup":{"example":" <select class=\"us-form-select us-form-select--success\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--disabled","escaped":"us-form-select--disabled","description":"Inactive state for select boxes. You may also just add the disabled attribute to the <select> element in order to achieve the same effect.","markup":{"example":" <select class=\"us-form-select us-form-select--disabled\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}}],"markup":{"example":" <select class=\"us-form-select {$modifiers}\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>","escaped":" <select class=\"us-form-select\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"},"path":"vendor/assets/stylesheets/ustyle/forms/_select.scss","file":"_select.scss","link":"selects"},{"page":"Pattern Library/Forms","name":"Textarea","description":"<p> Our standard textarea styling across the website.</p>\n","state":[{"name":".us-form-textarea--blocked","escaped":"us-form-textarea--blocked","description":"Fluid textarea style","markup":{"example":"<textarea class=\"us-form-textarea us-form-textarea--blocked\"></textarea>"}},{"name":".us-form-textarea--disabled","escaped":"us-form-textarea--disabled","description":"Inactive state for textareas that can't be interacted with","markup":{"example":"<textarea class=\"us-form-textarea us-form-textarea--disabled\"></textarea>"}}],"markup":{"example":"<textarea class=\"us-form-textarea {$modifiers}\"></textarea>","escaped":"<textarea class=\"us-form-textarea\"></textarea>"},"path":"vendor/assets/stylesheets/ustyle/forms/_textarea.scss","file":"_textarea.scss","link":"textarea"},{"page":"Pattern Library/Forms","name":"Toggle","description":"<p> Toggle buttons provide and alternative way of displaying radio groups with a small number of options to a user.</p>\n<p> IE8 support is included with <code>radioToggle.js</code> which sets a <code>.checked</code> class on the radio button when clicked.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Use as an alternation to radio groups that have short labels for each option (Yes/No, Opt-in/Opt-out).</p>\n</li>\n<li><p>For forms that have many short radio group questions in them, toggle buttons provide a better experience for quickly selecting answers on both desktop and mobile due to larger visible click areas for each option.</p>\n</li>\n<li><p>Limit the number of options in the toggle group to 3.</p>\n</li>\n</ul>\n","state":[{"name":".us-toggle__btn--disabled","escaped":"us-toggle__btn--disabled","description":"Visual styling for toggle buttons that can't be interacted with","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Answer truthfully</label>\n <div class=\"us-toggle\">\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn us-toggle__btn--disabled\">\n Yes\n </span>\n </label>\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n No\n </span>\n </label>\n </div>\n </div>"}}],"javascript":"\n var radioToggle = new RadioToggle({\n $target: $(".us-toggle")\n })\n ","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Answer truthfully</label>\n <div class=\"us-toggle\">\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn {$modifiers}\">\n Yes\n </span>\n </label>\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n No\n </span>\n </label>\n </div>\n </div>","escaped":" <div class=\"us-field us-field--blocked\">\n <label>Answer truthfully</label>\n <div class=\"us-toggle\">\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n Yes\n </span>\n </label>\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n No\n </span>\n </label>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_toggle.scss","file":"_toggle.scss","link":"toggle"},{"page":"Pattern Library/Forms","name":"Validation messages","description":"<p> Used to provide more detailed feedback about the data users have entered into forms.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>For inputs that have a label above them, place the validation message between the input and the label.</p>\n</li>\n<li><p>Use success validation messages only when it makes sense to contextually. For example, they can help to reassure users about the data they entered when multiple criteria need to be satisfied, e.g. password fields.</p>\n</li>\n</ul>\n","state":[{"name":".us-validation--error","escaped":"us-validation--error","description":"Error styling for incorrect data on forms","markup":{"example":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation us-validation--error\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>"}},{"name":".us-validation--success","escaped":"us-validation--success","description":"Success styling for correct forms","markup":{"example":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation us-validation--success\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>"}}],"markup":{"example":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation {$modifiers}\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>","escaped":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_validation.scss","file":"_validation.scss","link":"validation_messages"}]},{"name":"Components","page":"components.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Components","name":"Breadcrumbs","description":"<p> Breadcrumbs are used to provide signposting of a users location and to enable quick navigation around the site. They are only to be used as a secondary means of navigation however. Pages should also be navigable through other means.</p>\n","markup":{"example":" <ul class=\"us-crumbs\">\n <li class=\"us-crumbs__item\"><a href=\"/\" class=\"us-crumbs__link\">uSwitch.com</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/\">Credit report</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/guides/\">Credit reports guides</a></li>\n <li class=\"us-crumbs__item\">Statutory credit reports</li>\n </ul>","escaped":" <ul class=\"us-crumbs\">\n <li class=\"us-crumbs__item\"><a href=\"/\" class=\"us-crumbs__link\">uSwitch.com</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/\">Credit report</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/guides/\">Credit reports guides</a></li>\n <li class=\"us-crumbs__item\">Statutory credit reports</li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_breadcrumbs.scss","file":"_breadcrumbs.scss","link":"breadcrumbs"},{"page":"Pattern Library/Components","name":"Buttons","description":"<p> Our buttons used across the site. The states give different use cases. Both <code><a></code> and <code><button></code> tags are supported. Please use <code>role='button'</code> when using in a <code><a></code> tag.</p>\n","state":[{"name":".us-btn--primary","escaped":"us-btn--primary","description":"Used a save/update button","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--primary\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--primary\">Button Element</button>"}},{"name":".us-btn--action","escaped":"us-btn--action","description":"Navigational button","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--action\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--action\">Button Element</button>"}},{"name":".us-btn--secondary","escaped":"us-btn--secondary","description":"Secondary","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--secondary\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--secondary\">Button Element</button>"}},{"name":".us-btn--hero","escaped":"us-btn--hero","description":"Navy outline used for buttons on hero banners","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--hero\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--hero\">Button Element</button>"}},{"name":".us-btn--reversed","escaped":"us-btn--reversed","description":"White outline for dark backgrounds","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--reversed\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--reversed\">Button Element</button>"}},{"name":".us-btn--large","escaped":"us-btn--large","description":"Larger button for heros","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--large\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--large\">Button Element</button>"}},{"name":".us-btn--small","escaped":"us-btn--small","description":"Smaller button for mobile tables","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--small\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--small\">Button Element</button>"}},{"name":".us-btn--blocked","escaped":"us-btn--blocked","description":"Full width button","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--blocked\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--blocked\">Button Element</button>"}},{"name":".us-btn--link","escaped":"us-btn--link","description":"link style button","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--link\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--link\">Button Element</button>"}},{"name":".us-btn--stronger","escaped":"us-btn--stronger","description":"Emphasis button","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--stronger\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--stronger\">Button Element</button>"}},{"name":".us-btn--disabled","escaped":"us-btn--disabled","description":"Disabled styling (can also be styled with :disabled)","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--disabled\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--disabled\">Button Element</button>"}}],"markup":{"example":" <a href=\"#\" class=\"us-btn {$modifiers}\" role=\"button\">Link Button</a>\n <button class=\"us-btn {$modifiers}\">Button Element</button>","escaped":" <a href=\"#\" class=\"us-btn\" role=\"button\">Link Button</a>\n <button class=\"us-btn\">Button Element</button>"},"path":"vendor/assets/stylesheets/ustyle/components/_button.scss","file":"_button.scss","link":"buttons"},{"page":"Pattern Library/Components","name":"Content group","description":"<p> The <code>.us-content-group</code> is a separator element for content groupings. Ideal to split up landing pages with reasonable padding.</p>\n","state":[{"name":".mobile-bordered","escaped":"mobile-bordered","description":"Adds a smaller border and padding to mobile devices.","markup":{"example":" <div class='us-content-group mobile-bordered'>\n <p>\n Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.\n </p>\n </div>"}}],"markup":{"example":" <div class='us-content-group {$modifiers}'>\n <p>\n Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.\n </p>\n </div>","escaped":" <div class='us-content-group'>\n <p>\n Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.\n </p>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_content-group.scss","file":"_content-group.scss","link":"content_group"},{"page":"Pattern Library/Components","name":"CTAs","description":"<p> Used within guide and news articles, these CTAs are intended to not interupt the content but to integrate in more subtle means.</p>\n","markup":{"example":" <section class=\"us-cta cta cta-column\">\n <form>\n <h3 class=\"us-cta__title\">It's your report</h3>\n <p>Join the campaign to fight for free annual credit reports for everyone</p>\n <a href=\"/money/itsmyreport/\" class=\"us-btn us-btn--primary\" rel=\"nofollow\">Sign the petition</a>\n </form>\n </section>","escaped":" <section class=\"us-cta cta cta-column\">\n <form>\n <h3 class=\"us-cta__title\">It's your report</h3>\n <p>Join the campaign to fight for free annual credit reports for everyone</p>\n <a href=\"/money/itsmyreport/\" class=\"us-btn us-btn--primary\" rel=\"nofollow\">Sign the petition</a>\n </form>\n </section>"},"path":"vendor/assets/stylesheets/ustyle/components/_cta.scss","file":"_cta.scss","link":"ctas"},{"page":"Pattern Library/Components","name":"Featured deal","description":"<p> The <code>.us-featured</code> is mostly composed by smaller components, the components can be shuffled around inside of a grid to create the needed variants.</p>\n<p> This featured deal won't make any assumptions around the media queries, it's up to you, to deal with it. As you can see on the examples.</p>\n","markup":{"example":"<div class=\"us-container\">\n <div class=\"us-featured__header us-grid-row us-padding-top us-padding-bottom\">\n <div class=\"us-featured__header-title us-col-xsm-9 us-align--left\">\n Title goes here\n </div>\n <div class=\"us-featured__header-subtitle us-col-xsm-3 us-align--right\">\n Promotion\n </div>\n </div>\n <div class=\"us-featured__content us-grid-row us-padding-top us-padding-bottom\">\n <div class=\"us-col-xsm-12\">\n <div class='us-usp us-usp--blue'>\n Awesome deal usp\n </div>\n </div>\n <div class=\"us-desktop--hidden us-padding-top us-col-xsm-4 us-mobile-block\">\n <img class=\"us-img--full\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"200\">\n </div>\n <div class=\"us-col-xsm-7 us-col-lg-8 us-col-sm-5\">\n <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n <li>List item 3</li>\n </ul>\n <div class=\"us-col-xsm-6 us-desktop--block\">\n <div class=\"us-featured-highlight\">\n <strong class=\"us-featured-highlight__title\">\n £99.99\n </strong>\n monthly cost\n </div>\n </div>\n <div class=\"us-col-xsm-6 us-desktop--block\">\n <div class=\"us-featured-highlight\">\n <strong class=\"us-featured-highlight__title\">\n £99.99\n </strong>\n monthly cost\n <br>\n <a class=\"us-featured-highlight__link us-link\" href=\"#\">Link</a>\n </div>\n </div>\n </div>\n <div class=\"us-col-xsm-3 us-col-lg-4 us-tablet--block\">\n <img class=\"us-img--full us-desktop--block\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"200\">\n <button class=\"margin-top margin-bottom us-btn us-btn--primary us-btn us-btn--blocked\">See deal</button>\n <div class=\"us-icon--before us-icon--small--before us-icon--typegrey--before us-icon--clock--before us-align--center\">\n <strong>3 days left</strong>\n </div>\n </div>\n <div class=\"us-featured__mobile-icon us-tablet--hidden us-col-xsm-3 us-icon us-icon--medium us-icon--typegrey us-icon--breadcrumb\"></div>\n </div>\n <div class=\"us-featured__footer us-grid-row us-padding-top us-padding-bottom us-desktop--block\">\n <div class=\"us-col-xsm-12\">\n Legal stuff goes here\n </div>\n </div>\n</div>","escaped":"<div class=\"us-container\">\n <div class=\"us-featured__header us-grid-row us-padding-top us-padding-bottom\">\n <div class=\"us-featured__header-title us-col-xsm-9 us-align--left\">\n Title goes here\n </div>\n <div class=\"us-featured__header-subtitle us-col-xsm-3 us-align--right\">\n Promotion\n </div>\n </div>\n <div class=\"us-featured__content us-grid-row us-padding-top us-padding-bottom\">\n <div class=\"us-col-xsm-12\">\n <div class='us-usp us-usp--blue'>\n Awesome deal usp\n </div>\n </div>\n <div class=\"us-desktop--hidden us-padding-top us-col-xsm-4 us-mobile-block\">\n <img class=\"us-img--full\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"200\">\n </div>\n <div class=\"us-col-xsm-7 us-col-lg-8 us-col-sm-5\">\n <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n <li>List item 3</li>\n </ul>\n <div class=\"us-col-xsm-6 us-desktop--block\">\n <div class=\"us-featured-highlight\">\n <strong class=\"us-featured-highlight__title\">\n £99.99\n </strong>\n monthly cost\n </div>\n </div>\n <div class=\"us-col-xsm-6 us-desktop--block\">\n <div class=\"us-featured-highlight\">\n <strong class=\"us-featured-highlight__title\">\n £99.99\n </strong>\n monthly cost\n <br>\n <a class=\"us-featured-highlight__link us-link\" href=\"#\">Link</a>\n </div>\n </div>\n </div>\n <div class=\"us-col-xsm-3 us-col-lg-4 us-tablet--block\">\n <img class=\"us-img--full us-desktop--block\" src=\"http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"200\">\n <button class=\"margin-top margin-bottom us-btn us-btn--primary us-btn us-btn--blocked\">See deal</button>\n <div class=\"us-icon--before us-icon--small--before us-icon--typegrey--before us-icon--clock--before us-align--center\">\n <strong>3 days left</strong>\n </div>\n </div>\n <div class=\"us-featured__mobile-icon us-tablet--hidden us-col-xsm-3 us-icon us-icon--medium us-icon--typegrey us-icon--breadcrumb\"></div>\n </div>\n <div class=\"us-featured__footer us-grid-row us-padding-top us-padding-bottom us-desktop--block\">\n <div class=\"us-col-xsm-12\">\n Legal stuff goes here\n </div>\n </div>\n</div>"},"path":"vendor/assets/stylesheets/ustyle/components/_featured.scss","file":"_featured.scss","link":"featured_deal"},{"page":"Pattern Library/Components","name":"Hero","description":"<p> The <code>.us-hero</code> is used for the upper part of most pages, where the calls to action are usually kept.</p>\n<p> It is intended to draw attention with <code>$c-cyan</code> as it's background color, and should be used across all landing pages.</p>\n","markup":{"example":" <div class='us-hero'>\n <div class='us-hero-container'>\n <h1 class='us-hero-title'>Hero title</h1>\n <p class='us-hero-description us-standfirst'>Swat at dog intrigued by the shower missing until dinner time.</p>\n </div>\n </div>","escaped":" <div class='us-hero'>\n <div class='us-hero-container'>\n <h1 class='us-hero-title'>Hero title</h1>\n <p class='us-hero-description us-standfirst'>Swat at dog intrigued by the shower missing until dinner time.</p>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_hero.scss","file":"_hero.scss","link":"hero"},{"page":"Pattern Library/Components","name":"Anchor links","description":"<p> Anchor tag styling, with and without a border</p>\n","state":[{"name":".us-link","escaped":"us-link","description":"Adds a border bottom to the link","markup":{"example":"<a href=\"#\" class=\"us-link\">Link</a>"}},{"name":".us-link--light","escaped":"us-link--light","description":"Changes the link colors to white for when links are placed on dark backgrounds","markup":{"example":"<a href=\"#\" class=\"us-link--light\">Link</a>"}}],"markup":{"example":"<a href=\"#\" class=\"{$modifiers}\">Link</a>","escaped":"<a href=\"#\">Link</a>"},"path":"vendor/assets/stylesheets/ustyle/components/_links.scss","file":"_links.scss","link":"anchor_links"},{"page":"Pattern Library/Components","name":"Link lists","description":"<p> The default list styling for lists that have anchors to take you to other pages.</p>\n","markup":{"example":" <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n </ul>","escaped":" <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_lists.scss","file":"_lists.scss","link":"link_lists"},{"page":"Pattern Library/Components","name":"Loader","description":"<p> Loader component to be added to any AJAX/filter loads across uSwitch. We use them specifically in tables when loading new rows.</p>\n<p> <code>.us-loader--loading</code> will initiate the animation and <code>.us-loader--centered</code> will vertically center the loading SVG.</p>\n","markup":{"example":" <div class='us-loader__container'>\n <div class='us-loader us-loader--loading us-loader--centered'>\n <div class='us-loader__inner'>\n <div class='us-loader__spinner'></div>\n <div class='us-loader__text'>\n Loading deals\n </div>\n </div>\n <div class='us-loader__overlay'></div>\n </div>\n <!-- EXAMPLE CONTENT -->\n <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n <li><a href=\"#\">List item 4</a></li>\n </ul>\n <!-- END EXAMPLE -->\n </div>","escaped":" <div class='us-loader__container'>\n <div class='us-loader us-loader--loading us-loader--centered'>\n <div class='us-loader__inner'>\n <div class='us-loader__spinner'></div>\n <div class='us-loader__text'>\n Loading deals\n </div>\n </div>\n <div class='us-loader__overlay'></div>\n </div>\n <!-- EXAMPLE CONTENT -->\n <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n <li><a href=\"#\">List item 4</a></li>\n </ul>\n <!-- END EXAMPLE -->\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_loader.scss","file":"_loader.scss","link":"loader"},{"page":"Pattern Library/Components","name":"Progress navigation","description":"<p> The progress navigation should be used for any funnel journeys on the website. Once a section has been completed the user should be able to get back to that step.</p>\n<p> The mobile view of the navigation just has the dotted numbers.</p>\n","markup":{"example":" <div class=\"us-progress\">\n <nav>\n <ul class=\"us-progress__nav us-clearfix\">\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Current supplier</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Usage</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--current\">\n <span class=\"us-tablet--inline\">Results</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">New tariff</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">Apply</span>\n </span>\n </li>\n </ul>\n </nav>\n </div>","escaped":" <div class=\"us-progress\">\n <nav>\n <ul class=\"us-progress__nav us-clearfix\">\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Current supplier</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Usage</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--current\">\n <span class=\"us-tablet--inline\">Results</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">New tariff</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">Apply</span>\n </span>\n </li>\n </ul>\n </nav>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_progress.scss","file":"_progress.scss","link":"progress_navigation"},{"page":"Pattern Library/Components","name":"USPs","description":"<p> USPs (Unique Selling Points) are used within tables and on splash pages to highlight offers within a deal, and also to differentiate deals.</p>\n<p> General guidelines; There should only be one USP per deal. Text within USPs should be written in sentence case (not uppercase).</p>\n","state":[{"name":".us-usp--blue","escaped":"us-usp--blue","description":"uSwitch related","markup":{"example":" <div class='us-usp us-usp--blue'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--blue'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--orange","escaped":"us-usp--orange","description":"Rewards (money/points)","markup":{"example":" <div class='us-usp us-usp--orange'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--orange'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--purple","escaped":"us-usp--purple","description":"Gifts eg. free TV","markup":{"example":" <div class='us-usp us-usp--purple'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--purple'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--yellow","escaped":"us-usp--yellow","description":"Vouchers","markup":{"example":" <div class='us-usp us-usp--yellow'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--yellow'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--typecyan","escaped":"us-usp--typecyan","description":"Micro persuasions eg. most popular, half price","markup":{"example":" <div class='us-usp us-usp--typecyan'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--typecyan'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--green","escaped":"us-usp--green","description":"Renewable and environmentally friendly","markup":{"example":" <div class='us-usp us-usp--green'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--green'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--navy","escaped":"us-usp--navy","description":"Generic vertical specific USP","markup":{"example":" <div class='us-usp us-usp--navy'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--navy'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--cyan","escaped":"us-usp--cyan","description":"Generic vertical specific USP","markup":{"example":" <div class='us-usp us-usp--cyan'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--cyan'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--typegrey","escaped":"us-usp--typegrey","description":"Generic vertical specific USP","markup":{"example":" <div class='us-usp us-usp--typegrey'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--typegrey'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--red","escaped":"us-usp--red","description":"Generic vertical specific USP","markup":{"example":" <div class='us-usp us-usp--red'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--red'>Annotated USP</div>\n More information about USP goes here\n </div>"}}],"markup":{"example":" <div class='us-usp {$modifiers}'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp {$modifiers}'>Annotated USP</div>\n More information about USP goes here\n </div>","escaped":" <div class='us-usp'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp'>Annotated USP</div>\n More information about USP goes here\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_usp.scss","file":"_usp.scss","link":"usps"}]},{"name":"JavaScript","page":"javascript.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/JavaScript","name":"Anchor","description":"<p> Anchor is a naive implementation of Tether by HubSpot. It creates an independent dropdown that is "anchored" to the bottom of the target element.</p>\n<p> We've decided to only support IE9+, as the uses of Anchor throughout uSwitch are for progressive enhancement.</p>\n","javascript":"\n var anchor = new Anchor({\n classPrefix: "us-anchor"\n openEvent: "click"\n showClose: true\n isAjax: false\n });\n ","markup":{"example":" <span class='us-btn js-example-anchor'>Click me!</span>\n <div class='us-anchor__target js-example-anchor__target'>\n <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>\n </div>","escaped":" <span class='us-btn js-example-anchor'>Click me!</span>\n <div class='us-anchor__target js-example-anchor__target'>\n <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_anchor.scss","file":"_anchor.scss","link":"anchor"},{"page":"Pattern Library/JavaScript","name":"Overlay","description":"<p> <code>.us-overlay</code> slides in from either side of the viewport, or can be shown as a modal window.</p>\n","javascript":"\n var overlay = new Overlay({\n bodyActiveClass: 'us-overlay--open',\n activeClass: 'us-overlay-parent--active',\n visibleClass: 'us-overlay-parent--visible',\n overlay: $('.us-overlay-parent'),\n openButton: '.js-open-overlay',\n closeButton: '.js-close-overlay',\n historyStatus: '#seedeal',\n history: false,\n preventDefault: true\n });\n ","state":[{"name":".us-overlay--modal","escaped":"us-overlay--modal","description":"Overlay appears as a modal window.","markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"us-overlay--modal\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"us-overlay--modal\">\n <div class=\"us-overlay us-overlay--modal\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"}},{"name":".us-overlay--right","escaped":"us-overlay--right","description":"Overlay appears on the right side of the viewport (not applicable when used in conjunction with .us-overlay--modal).","markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"us-overlay--right\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"us-overlay--right\">\n <div class=\"us-overlay us-overlay--right\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"}},{"name":".us-overlay--above","escaped":"us-overlay--above","description":"Overlay appears over the top of another open overlay.","markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"us-overlay--above\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"us-overlay--above\">\n <div class=\"us-overlay us-overlay--above\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"}}],"markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"{$modifiers}\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"{$modifiers}\">\n <div class=\"us-overlay {$modifiers}\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>","escaped":" <button class=\"us-btn js-open-overlay\" modifier=\"{$modifiers}\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"{$modifiers}\">\n <div class=\"us-overlay\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_overlay.scss","file":"_overlay.scss","link":"overlay"},{"page":"Pattern Library/JavaScript","name":"Tabs","description":"<p> These are the basic tabs used for landing pages. You can either reference a data-target for the urls or href for the target tabs. They have a non-js fallback and fold over to accordion when in small tablet view. They are initialised on page load if the tabs classes exist.</p>\n","javascript":"\n var tabs = new Tabs({\n tabContainer: ".us-tabs",\n tabLinks: ".us-tabs-nav-mainlink",\n tabTitle: "us-tab-title",\n activeClass: "active",\n changeUrls: true,\n collapsible: true,\n autoScroll: false\n });\n ","markup":{"example":" <div class='us-tabs'>\n <nav class='us-tabs-nav'>\n <div class='us-tabs-nav-wrapper'>\n <div class='us-tabs-nav-menu'>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab1\">Tab 1</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab2\">Tab 2</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab3\">Tab 3</a>\n </div>\n </div>\n </nav>\n <div class='us-tabs-container'>\n <div class='us-tab' id='tab1'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink us-icon--after us-icon--chevron-right--after us-icon--small--after us-icon--inputgrey--after\" href=\"#tab1\">Test 1</a>\n </h2>\n <div class='us-tab-content'>\n <p>Fatback capicola leberkas pork loin pork jowl. Meatloaf shoulder pancetta, salami prosciutto ribeye andouille chuck landjaeger short loin filet mignon sirloin. Pork chop tri-tip ham pork hamburger frankfurter leberkas short ribs biltong. Prosciutto ham hock rump, andouille tongue flank sirloin tri-tip ball tip frankfurter ham drumstick meatloaf pork loin.</p>\n </div>\n </div>\n <div class='us-tab' id='tab2'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink us-icon--after us-icon--chevron-right--after us-icon--small--after us-icon--inputgrey--after\" href=\"#tab2\">Test 2</a>\n </h2>\n <div class='us-tab-content'>\n <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>\n </div>\n </div>\n <div class='us-tab' id='tab3'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink us-icon--after us-icon--chevron-right--after us-icon--small--after us-icon--inputgrey--after\" href=\"#tab3\">Test 3</a>\n </h2>\n <div class='us-tab-content'>\n <p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola meatball. Pork belly beef ham landjaeger.</p>\n </div>\n </div>\n </div>\n </div>","escaped":" <div class='us-tabs'>\n <nav class='us-tabs-nav'>\n <div class='us-tabs-nav-wrapper'>\n <div class='us-tabs-nav-menu'>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab1\">Tab 1</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab2\">Tab 2</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab3\">Tab 3</a>\n </div>\n </div>\n </nav>\n <div class='us-tabs-container'>\n <div class='us-tab' id='tab1'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink us-icon--after us-icon--chevron-right--after us-icon--small--after us-icon--inputgrey--after\" href=\"#tab1\">Test 1</a>\n </h2>\n <div class='us-tab-content'>\n <p>Fatback capicola leberkas pork loin pork jowl. Meatloaf shoulder pancetta, salami prosciutto ribeye andouille chuck landjaeger short loin filet mignon sirloin. Pork chop tri-tip ham pork hamburger frankfurter leberkas short ribs biltong. Prosciutto ham hock rump, andouille tongue flank sirloin tri-tip ball tip frankfurter ham drumstick meatloaf pork loin.</p>\n </div>\n </div>\n <div class='us-tab' id='tab2'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink us-icon--after us-icon--chevron-right--after us-icon--small--after us-icon--inputgrey--after\" href=\"#tab2\">Test 2</a>\n </h2>\n <div class='us-tab-content'>\n <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>\n </div>\n </div>\n <div class='us-tab' id='tab3'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink us-icon--after us-icon--chevron-right--after us-icon--small--after us-icon--inputgrey--after\" href=\"#tab3\">Test 3</a>\n </h2>\n <div class='us-tab-content'>\n <p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola meatball. Pork belly beef ham landjaeger.</p>\n </div>\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_tabs.scss","file":"_tabs.scss","link":"tabs"},{"page":"Pattern Library/JavaScript","name":"Tooltip","description":"<p> <code>.us-tooltip</code> can be applied to any parent, and by hovering it, it will toggle the visibility of <code>.us-tooltip__note</code>. Please note that on mobile viewports, the tooltip will appeat underneath the element that is aligned with the tooltip icon.</p>\n","state":[{"name":".us-tooltip--top","escaped":"us-tooltip--top","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--top\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--bottom","escaped":"us-tooltip--bottom","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--bottom\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--left","escaped":"us-tooltip--left","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--left\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--right","escaped":"us-tooltip--right","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--right\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--small","escaped":"us-tooltip--small","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--small\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}}],"javascript":"\n var tooltips = new ClassToggler({\n containerClass: '.us-tooltip',\n $target: $('.us-tooltip__icon'),\n activeClass: "us-tooltip--active"\n });\n ","markup":{"example":" <div class=\"tooltip-demo us-tooltip {$modifiers}\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>","escaped":" <div class=\"tooltip-demo us-tooltip\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_tooltip.scss","file":"_tooltip.scss","link":"tooltip"}]},{"name":"Logo","page":"logo.html","template":"styleguide/templates/simple.tpl","section":"brand","content":"<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h3>Variations</h3>\n <p>Primary logo - can be used in either brand blue #174695 or as a white out version (see below for usage on different background colours)</p>\n </div>\n <div class=\"us-col-6\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h5>Blue logo</h5>\n <div class=\"logo-state logo--blue\">\n <span class=\"us-icon--notext us-icon--uswitch us-icon--custom us-icon--large\"></span>\n </div>\n </div>\n <div class=\"us-col-6\">\n <h5>White logo</h5>\n <div class=\"logo-state logo--white\">\n <span class=\"us-icon--notext us-icon--uswitch us-icon--white us-icon--large\"></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h3>Spacing</h3>\n <p>Every time our logo appears, there should always be minimum clear space around it.This can be worked out by taking the width of the left stem (see ‘S’ in the diagram), and applying it around the logo. This area should always be kept clear.</p>\n </div>\n <div class=\"us-col-6\">\n <p><strong>s</strong> = The width of the left stem of the U.</p>\n <div class=\"logo-state logo-spacer\">\n <span class=\"us-icon--notext us-icon--uswitch us-icon--custom us-icon--large\"></span>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h3>Sizing</h3>\n <p>Our logo comes in 3 different sizes through our SVG/PNG icon system.</p>\n </div>\n <div class=\"us-col-6\">\n <span class=\"us-icon--notext us-icon--uswitch us-icon--custom us-icon--small\"></span>\n <span class=\"us-icon--notext us-icon--uswitch us-icon--custom us-icon--medium\"></span>\n <span class=\"us-icon--notext us-icon--uswitch us-icon--custom us-icon--large\"></span>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h3>Usage rules</h3>\n <p>Please make sure you’re not tempted to do any of the following to the logo:</p>\n <ul>\n <li>Change elements of it</li>\n <li>Outline or put a keyline around it</li>\n <li>Use a different blue</li>\n <li>Use a gradient or tint</li>\n <li>Rotate the logo</li>\n </ul>\n </div>\n <div class=\"us-col-6\"></div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h3>Blue logo placement</h3>\n <p>Our blue logo can be placed on a white or light-coloured background, or even on simple photography. However, it should not be placed on a dark or contrasting blue, as it doesn’t stand out so well. The same goes for complex imagery and gradients.</p>\n </div>\n <div class=\"us-col-6\"></div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h3>White logo placement</h3>\n <p>Our white logo can be placed over any of the uSwitch blues, or dark-coloured backgrounds, and even on simple photography. However, it should not be placed on a light colour or complex imagery as it doesn’t stand out so well..</p>\n </div>\n <div class=\"us-col-6\"></div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <h3>Partner / Off site usage</h3>\n <p>For off-site and partner use we have a logo variant that includes the site URL. The same usage guidelines apply</p>\n </div>\n <div class=\"us-col-6\">\n <span class=\"us-icon--before us-icon--uswitch--before us-icon--custom--before us-icon--large--before\"><strong class=\"us-color--blue\">uSwitch.com</strong></span>\n </div>\n </div>\n</div>\n"},{"name":"Typography","page":"typography.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Typography","name":"Headings","description":"<p> The default heading styling across all uSwitch pages.</p>\n<p> We allow extending the sizes of these headings with <code>%heading-{$i}</code> so that we don't repeat similar font sizes across the site</p>\n","markup":{"example":" <h1>Heading 1</h1>\n <h2>Heading 2</h2>\n <h3>Heading 3</h3>\n <h4>Heading 4</h4>\n <h5>Heading 5</h5>\n <h6>Heading 6</h6>","escaped":" <h1>Heading 1</h1>\n <h2>Heading 2</h2>\n <h3>Heading 3</h3>\n <h4>Heading 4</h4>\n <h5>Heading 5</h5>\n <h6>Heading 6</h6>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"headings"},{"page":"Pattern Library/Typography","name":"Paragraphs","description":"<p> Default paragraph styling with a margin bottom.</p>\n","state":[{"name":".us-standfirst","escaped":"us-standfirst","description":"Used for heros and introductory paragraphs","markup":{"example":" <p class=\"us-standfirst\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n </p>"}}],"markup":{"example":" <p class=\"{$modifiers}\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n </p>","escaped":" <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n </p>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"paragraphs"},{"page":"Pattern Library/Typography","name":"Lists","description":"<p> Normal list styling</p>\n","markup":{"example":" <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n <li>List item 3</li>\n </ul>","escaped":" <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n <li>List item 3</li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"lists"},{"page":"Pattern Library/Typography","name":"Blockquote","description":"<p> Default blockquote</p>\n","markup":{"example":" <blockquote>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus.\n </p>\n </blockquote>","escaped":" <blockquote>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus.\n </p>\n </blockquote>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"blockquote"},{"page":"Pattern Library/Typography","name":"Numbered list","description":"<p> Our default numbered list styling</p>\n<p> <code>.us-custom-list-alt</code> allows us to use the lists on hero/blue backgrounds.</p>\n","markup":{"example":" <ul class='us-numbered-list'>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n </ul>","escaped":" <ul class='us-numbered-list'>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_lists-li.scss","file":"_lists-li.scss","link":"numbered_list"},{"page":"Pattern Library/Typography","name":"Ticked list","description":"<p> Our default ticked list styling. <code>.us-custom-list-alt</code> allows us to use the lists on hero/blue backgrounds.</p>\n","markup":{"example":" <ul class='us-ticked-list'>\n <li class='us-icon--before us-icon--tick--before us-icon--small--before us-icon--typegrey--before'>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n <li class='us-icon--before us-icon--tick--before us-icon--small--before us-icon--typegrey--before'>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n </ul>","escaped":" <ul class='us-ticked-list'>\n <li class='us-icon--before us-icon--tick--before us-icon--small--before us-icon--typegrey--before'>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n <li class='us-icon--before us-icon--tick--before us-icon--small--before us-icon--typegrey--before'>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_lists-li.scss","file":"_lists-li.scss","link":"ticked_list"}]},{"name":"Grid","page":"grid.html","template":"styleguide/templates/simple.tpl","section":"pattern-library","content":"<div class=\"styleguide__block\">\n <p>\n Our grid is a 12 column grid, with similar sizes to that of Bootstrap. We also adhere to the same naming standards for device breakpoints.\n </p>\n <ul>\n <li>Default gutter width: <strong>15px either side</strong></li>\n <li>Large container width: <strong>1170px</strong></li>\n <li>Desktop container width: <strong>970px</strong></li>\n <li>Tablet container width: <strong>770px</strong></li>\n </ul>\n <ul>\n <li>The parent container is <code>.us-container</code>, you must have this to start building the uSwitch layouts.</li>\n <li><code>.us-grid-row</code> is then used when you are building rows of columns (gives a negative margin to the container so they align correctly)</li>\n <li>All grid class names are prefixed with <code>.us-col-</code></li>\n </ul>\n</div>\n<div class=\"styleguide__block\">\n <h2 class=\"styleguide__block-title\">Example</h2>\n <p>Here is an example of a grid which will turn into 100% width columns on mobile.</p>\n <div class=\"grid-example\">\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-md-2\">.us-col-md-2</div>\n <div class=\"col-example us-col-md-2\">.us-col-md-2</div>\n <div class=\"col-example us-col-md-4\">.us-col-md-4</div>\n <div class=\"col-example us-col-md-4\">.us-col-md-4</div>\n </div>\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-md-8\">.us-col-md-8</div>\n <div class=\"col-example us-col-md-4\">.us-col-md-4</div>\n </div>\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-md-6\">.us-col-md-6</div>\n <div class=\"col-example us-col-md-6\">.us-col-md-6</div>\n </div>\n </div>\n <pre><code class=\"html\">\n<div class="us-grid-row">\n <div class="us-col-md-2">.us-col-md-2</div>\n <div class="us-col-md-2">.us-col-md-2</div>\n <div class="us-col-md-4">.us-col-md-4</div>\n <div class="us-col-md-4">.us-col-md-4</div>\n</div>\n<div class="us-grid-row">\n <div class="us-col-md-8">.us-col-md-8</div>\n <div class="us-col-md-4">.us-col-md-4</div>\n</div>\n<div class="us-grid-row">\n <div class="us-col-md-6">.us-col-md-6</div>\n <div class="us-col-md-6">.us-col-md-6</div>\n</div>\n </code></pre>\n</div>\n<div class=\"styleguide__block\">\n <h2 class=\"styleguide__block-title\">Example with mobile columns</h2>\n <div class=\"grid-example\">\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-xsm-6 us-col-md-2\">.us-col-xsm-6.us-col-md-2</div>\n <div class=\"col-example us-col-xsm-6 us-col-md-2\">.us-col-xsm-6.us-col-md-2</div>\n <div class=\"col-example us-col-sm-6 us-col-md-4\">.us-col-sm-6.us-col-md-4</div>\n <div class=\"col-example us-col-sm-6 us-col-md-4\">.us-col-sm-6.us-col-md-4</div>\n </div>\n </div>\n </div>\n</div>\n"},{"name":"Language","page":"language.html","template":"styleguide/templates/simple.tpl","section":"brand","content":"<h2 id=\"how-does-a-brilliantly-simple-brand-sound-\">How does a brilliantly simple brand sound?</h2>\n<p>Think of our tone of voice as a natural extension of our values and personality. We might not mention them in our copy, but their ‘feel’ should come across in every word, sentence and paragraph.</p>\n<h4 id=\"table-of-contents\">Table of contents</h4>\n<ol>\n<li><a href=\"#tone-of-voice\">Tone of voice</a></li>\n<li><a href=\"#writing-tips\">Writing tips</a></li>\n<li><a href=\"#writing-conventions\">Writing conventions</a></li>\n</ol>\n<h2 id=\"tone-of-voice\">Tone of voice</h2>\n<ol>\n<li><strong>Expert</strong> - We have a deep understanding of people, household finances and the industries in which we operate. Be confident and authoritative.</li>\n<li><strong>Human</strong> - We always talk on the same level as our customers. Be friendly and conversational, never patronising.</li>\n<li><strong>Connected</strong> - We are seamlessly synchronised with the wider world and financial one. Be timely, knowledgeable and accurate.</li>\n<li><strong>Frank</strong> - We speak truthfully and with insight. Be honest and transparent.</li>\n<li><strong>Advisory</strong> - We make a positive impact on the lives of our customers. Be empowering and informative.</li>\n</ol>\n<h2 id=\"writing-tips\">Writing tips</h2>\n<h3 id=\"write-like-you-speak\">Write like you speak</h3>\n<p>Write as if the reader is in front of you. It’ll make your words sound more natural and believable.</p>\n<h3 id=\"jargon-free-zone\">Jargon-free zone</h3>\n<p>Leave the corporate words to the boardroom. Everyday words are much better. They’re easier to read and get our message across quicker.</p>\n<h3 id=\"statistical-value\">Statistical value</h3>\n<p>Well-placed stats and relevant data really add weight to what we’re saying. But use them sparingly, and only if it really merits it.</p>\n<h3 id=\"be-active\">Be active</h3>\n<p>Use an active voice rather than a passive one. This means writing sentences this way round: ‘The customers were saving money.’ Rather than this way round: ‘Money was being saved by the customers.</p>\n<h3 id=\"consistency-is-key\">Consistency is key</h3>\n<p>We all need to speak and write the same way, otherwise it waters down our brand and weakens our position.</p>\n<h3 id=\"headlines\">Headlines</h3>\n<p>Keep them short. The longer a headline is, the less likely it is to be read. So don’t write it in four words if you can do it in three.</p>\n<h3 id=\"less-is-more\">Less is more</h3>\n<p>Short copy gets read. Long copy doesn’t. Get to the point as quick as possible. Otherwise you’ll lose the reader.</p>\n<h3 id=\"be-purposeful-and-actionable\">Be purposeful and actionable</h3>\n<p>Content should always be actionable. You’ve given the customer relevant information, now tell them what they can do with it.</p>\n<h3 id=\"once-is-enough\">Once is enough</h3>\n<p>Say it once and say it well. Repetition makes copy boring and overly long, and creeps in when we’re not confident about what we’re saying.</p>\n<h3 id=\"snack-sized-copy\">Snack-sized copy</h3>\n<p>If you have a lot of information to get across, use bullet points or sub-headings to break it up. But don’t use too many bullets or make them too long or it will defeat the objective.</p>\n<h3 id=\"go-with-the-flow\">Go with the flow</h3>\n<p>Do your words trip off the tongue? There’s one way to find out. Read them out loud and you’ll soon find out where it’s not flowing.</p>\n<h2 id=\"writing-conventions\">Writing conventions</h2>\n<h3 id=\"abbreviations\">Abbreviations</h3>\n<p>For names of companies or organisations, if an abbreviation is more familiar than the full form (e.g. BBC, IBM) use that. If not, write the name in full the first time you mention it, followed by the abbreviation in brackets. The next time you refer to it, use only the abbreviation.</p>\n<h3 id=\"apostrophes\">Apostrophes</h3>\n<p>Avoid common misuse of apostrophes:</p>\n<ul>\n<li>Mixing up it’s (it is) and its (possessive)</li>\n<li>Using to denote plural: DVD’s (wrong) vs DVDs (correct)</li>\n<li>When writing Dos and Don’ts (not Do’s and Don’ts)</li>\n<li>When writing decades 1990s (not 1990’s); the ’80s (not the 80’s)</li>\n</ul>\n<h3 id=\"british-english\">British English</h3>\n<p>Use the British ‘s’ in words such as ‘realise’, and ‘specialise’, rather than the American ‘z’.</p>\n<h3 id=\"capital-letters\">Capital letters</h3>\n<p>Never use all capital letters. Headlines follow usual sentence structure, with only the first word and proper nouns utilising capitals.</p>\n<h3 id=\"company-names-and-references\">Company names and references</h3>\n<p>Follow punctuation and capitalisation of company names and products as they are branded.</p>\n<blockquote>\n<p>Example: E.ON, iPhone, iSaver</p>\n</blockquote>\n<p>When referencing a company in a news or guide, remember to always keep them in the singular.</p>\n<blockquote>\n<p>Example: BT is launching a new ... (not BT are launching a new ...)</p>\n</blockquote>\n<h3 id=\"contractions\">Contractions</h3>\n<p>Our tone of voice is friendly and familiar, so it’s fine to use contractions like ‘they’ll’, ‘it’ll’, ‘isn’t’.</p>\n<h3 id=\"dashes-and-hyphens\">Dashes and hyphens</h3>\n<p>If you use a dash within a sentence to create emphasis, then use a long em dash – rather than a hyphen.\nCompound adjectives before a noun generally use a hyphen (e.g. ‘the well-organised energy provider’). After a noun, they should be separated (e.g. ‘the energy provider was well organised’).</p>\n<h3 id=\"exclamation-marks\">Exclamation marks</h3>\n<p>Use sparingly.</p>\n<h3 id=\"full-stops\">Full stops</h3>\n<p>Don’t use full stops at the end of headlines.</p>\n<h3 id=\"legals-disclaimers-and-caveats\">Legals, disclaimers and caveats</h3>\n<p>Superscript numbering should be used when there is more than one caveat, however, when there is only one caveat in a communication, an asterisk (*) should be used.</p>\n"},{"name":"Stats","page":"stats.html","section":"pattern-library","content":{"report":[{"stylesheets":1,"size":79132,"rules":799,"selectors":1267,"simplicity":0.6306235201262825,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.19"},{"stylesheets":1,"size":79132,"rules":799,"selectors":1267,"simplicity":0.6306235201262825,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.18"},{"stylesheets":1,"size":79109,"rules":799,"selectors":1268,"simplicity":0.6301261829652997,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.17"},{"stylesheets":1,"size":79043,"rules":799,"selectors":1268,"simplicity":0.6301261829652997,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.16"},{"stylesheets":1,"size":78577,"rules":788,"selectors":1257,"simplicity":0.6268894192521878,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.15"},{"stylesheets":1,"size":77378,"rules":784,"selectors":1236,"simplicity":0.6343042071197411,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.14"},{"stylesheets":1,"size":77230,"rules":783,"selectors":1235,"simplicity":0.6340080971659919,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.13"},{"stylesheets":1,"size":77228,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.12"},{"stylesheets":1,"size":77228,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.11"},{"stylesheets":1,"size":77228,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.10"},{"stylesheets":1,"size":77226,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.9"},{"stylesheets":1,"size":77122,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.8"},{"stylesheets":1,"size":77211,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.7"},{"stylesheets":1,"size":77211,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.6"},{"stylesheets":1,"size":77211,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.5"},{"stylesheets":1,"size":77585,"rules":782,"selectors":1239,"simplicity":0.6311541565778854,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.4"},{"stylesheets":1,"size":77585,"rules":782,"selectors":1239,"simplicity":0.6311541565778854,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.3"},{"stylesheets":1,"size":77585,"rules":782,"selectors":1239,"simplicity":0.6311541565778854,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.2"},{"stylesheets":1,"size":76931,"rules":793,"selectors":1218,"simplicity":0.6510673234811166,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":92,"version":"1.3.1"},{"stylesheets":1,"size":76905,"rules":793,"selectors":1217,"simplicity":0.6516023007395234,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":92,"version":"1.3.0"},{"stylesheets":1,"size":75981,"rules":779,"selectors":1201,"simplicity":0.6486261448792673,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.2.2"},{"stylesheets":1,"size":75959,"rules":779,"selectors":1201,"simplicity":0.6486261448792673,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.2.1"},{"stylesheets":1,"size":71768,"rules":784,"selectors":1119,"simplicity":0.7006255585344057,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.2.0"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.3"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.2"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.1"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.0"},{"stylesheets":1,"size":68662,"rules":713,"selectors":1006,"simplicity":0.7087475149105368,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":95,"version":"1.0.6"},{"stylesheets":1,"size":68662,"rules":713,"selectors":1006,"simplicity":0.7087475149105368,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":95,"version":"1.0.5"},{"stylesheets":1,"size":69077,"rules":716,"selectors":1009,"simplicity":0.709613478691774,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.4"},{"stylesheets":1,"size":69806,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.3"},{"stylesheets":1,"size":69806,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.2"},{"stylesheets":1,"size":69810,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.1"},{"stylesheets":1,"size":69755,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.0"},{"stylesheets":1,"size":69757,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"0.20.0"},{"stylesheets":1,"size":69757,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"0.19.1"},{"stylesheets":1,"size":69684,"rules":721,"selectors":1016,"simplicity":0.7096456692913385,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"0.19.0"},{"stylesheets":1,"size":69240,"rules":720,"selectors":1018,"simplicity":0.7072691552062869,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":99,"version":"0.18.2"},{"stylesheets":1,"size":70447,"rules":731,"selectors":1035,"simplicity":0.706280193236715,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":104,"version":"0.17.2"},{"stylesheets":1,"size":70451,"rules":731,"selectors":1035,"simplicity":0.706280193236715,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":104,"version":"0.17.1"},{"stylesheets":1,"size":70461,"rules":731,"selectors":1035,"simplicity":0.706280193236715,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":104,"version":"0.17.0"},{"stylesheets":1,"size":73656,"rules":711,"selectors":1018,"simplicity":0.6984282907662083,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":98,"version":"0.16.0"},{"stylesheets":1,"size":66536,"rules":639,"selectors":917,"simplicity":0.6968375136314068,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.15.2"},{"stylesheets":1,"size":66200,"rules":639,"selectors":917,"simplicity":0.6968375136314068,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.15.1"},{"stylesheets":1,"size":66536,"rules":639,"selectors":917,"simplicity":0.6968375136314068,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.15.0"},{"stylesheets":1,"size":67418,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.4"},{"stylesheets":1,"size":67445,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.3"},{"stylesheets":1,"size":67445,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.2"},{"stylesheets":1,"size":67406,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.1"},{"stylesheets":1,"size":67406,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.0"},{"stylesheets":1,"size":88578,"rules":883,"selectors":1256,"simplicity":0.7030254777070064,"idSelectors":47,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":25,"mediaQueries":122,"version":"0.13.0"},{"stylesheets":1,"size":88440,"rules":870,"selectors":1243,"simplicity":0.6999195494770716,"idSelectors":47,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":25,"mediaQueries":122,"version":"0.12.0"},{"stylesheets":1,"size":59825,"rules":511,"selectors":808,"simplicity":0.6324257425742574,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":18,"mediaQueries":50,"version":"0.11.0"},{"stylesheets":1,"size":54633,"rules":494,"selectors":748,"simplicity":0.660427807486631,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.10.0"},{"stylesheets":1,"size":54633,"rules":494,"selectors":748,"simplicity":0.660427807486631,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.9.21"},{"stylesheets":1,"size":54570,"rules":493,"selectors":747,"simplicity":0.6599732262382865,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.9.20"},{"stylesheets":1,"size":54718,"rules":493,"selectors":747,"simplicity":0.6599732262382865,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.9.19"},{"stylesheets":1,"size":51858,"rules":469,"selectors":703,"simplicity":0.6671408250355618,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":18,"mediaQueries":44,"version":"0.9.18"},{"stylesheets":1,"size":51858,"rules":469,"selectors":703,"simplicity":0.6671408250355618,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":18,"mediaQueries":44,"version":"0.9.17"},{"stylesheets":1,"size":51259,"rules":463,"selectors":687,"simplicity":0.6739446870451238,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":43,"version":"0.9.15"},{"stylesheets":1,"size":53483,"rules":464,"selectors":676,"simplicity":0.6863905325443787,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":43,"version":"0.9.13"},{"stylesheets":1,"size":53483,"rules":464,"selectors":676,"simplicity":0.6863905325443787,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":43,"version":"0.9.12"},{"stylesheets":1,"size":47186,"rules":383,"selectors":588,"simplicity":0.6513605442176871,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":41,"version":"0.9.11"},{"stylesheets":1,"size":47184,"rules":383,"selectors":588,"simplicity":0.6513605442176871,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":41,"version":"0.9.10"}]},"template":"styleguide/templates/stats.tpl"}],"navigation":["brand","pattern-library","design"],"project":{"name":"ustyle","version":"1.4.0","description":"A living styleguide and pattern library by uSwitch.","keywords":["css","sass","scss","js","javascript","front-end","styleguide","uswitch","ustyle"],"homepage":"http://ustyle.guide","bugs":{"url":"https://github.com/uswitch/ustyle/issues"},"license":"Apache-2.0","author":"uSwitch Limited","contributors":["Joe Green <joe.green@uswitch.com>","David Annez <david.annez@uswitch.com>","Thomas Britton <thomas.britton@uswitch.com>","Ricardo Cerqueira <ricardo.cerqueira@uswitch.com>","Ivo Reis <ivo.reis@uswitch.com>"],"main":"dist/ustyle-latest.css","files":["dist/"],"repository":"uswitch/ustyle","scripts":{"test":"grunt test"},"devDependencies":{"async":"^0.9.0","autoprefixer-core":"^4.0.1","bluebird":"^2.9.7","browser-sync":"^1.8.2","cssstats":"^1.0.1","dss":"^1.0.4","gray-matter":"^2.0.0","grunt":"^0.4.5","grunt-build-control":"^0.3.0","grunt-contrib-concat":"^0.5.0","grunt-contrib-copy":"^0.8.0","grunt-contrib-sass":"^0.9.2","grunt-contrib-uglify":"^0.9.2","grunt-contrib-watch":"^0.6.1","grunt-env":"^0.4.2","grunt-jscs":"~2.0.0","grunt-newer":"^1.1.0","grunt-postcss":"^0.2.0","grunt-sassdoc":"^2.0.0","grunt-scss-lint":"~0.3.4","grunt-shell":"^1.1.1","grunt-svgmin":"^2.0.0","grunt-version":"^1.0.0","handlebars":"^2.0.0","jscs":"~2.1.0","load-grunt-tasks":"~3.1.0","lodash":"^2.4.1","marked":"^0.3.2","path":"^0.11.14","semver":"^4.3.3","simple-git":"^1.3.0","stylestats":"^4.2.2","svg-to-png":"^2.0.0","svgo":"^0.5.0","underscore.string":"^3.0.2"}}}