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.
<ul class="us-crumbs">
<li class="us-crumbs__item"><a href="/" class="us-crumbs__link">uSwitch.com</a></li>
<li class="us-crumbs__item"><a class="us-crumbs__link" href="http://www.uswitch.com/credit-reports/">Credit report</a></li>
<li class="us-crumbs__item"><a class="us-crumbs__link" href="http://www.uswitch.com/credit-reports/guides/">Credit reports guides</a></li>
<li class="us-crumbs__item">Statutory credit reports</li>
</ul>
Our buttons used across the site. The states give different use cases. Both <a> and <button> tags are supported. Please use role='button' when using an <a> tag.
<a href="#" class="us-btn" role="button">Link Button</a>
<button class="us-btn">Button Element</button>
The .us-content-group is a separator element for content groupings. Ideal to split up landing pages with reasonable padding.
Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.
Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.
<div class='us-content-group'>
<p>
Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.
</p>
</div>
Used within guide and news articles, these CTAs (Calls to Action) are intended to not interupt the content but to integrate in more subtle means.
<section class="us-cta cta cta-column">
<form>
<h3 class="us-cta__title">It's your report</h3>
<p>Join the campaign to fight for free annual credit reports for everyone</p>
<a href="/money/itsmyreport/" class="us-btn us-btn--primary" rel="nofollow">Sign the petition</a>
</form>
</section>
The .us-hero is used for the upper part of most pages, where the calls to action are usually kept.
It is intended to draw attention with $c-cyan as it's background color, and should be used across all landing pages.
Swat at dog intrigued by the shower missing until dinner time.
<div class='us-hero'>
<div class='us-hero-container'>
<h1 class='us-hero-title'>Hero title</h1>
<p class='us-hero-description us-standfirst'>Swat at dog intrigued by the shower missing until dinner time.</p>
</div>
</div>
Anchor tag styling, with and without a border.
The default list styling for lists that have anchors to take you to other pages.
<ul class='us-list'>
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
</ul>
Loader component to be added to any AJAX/filter loads across uSwitch. We use them specifically in tables when loading new rows.
.us-loader--loading will initiate the animation and .us-loader--centered will vertically center the loading SVG.
<div class='us-loader__container'>
<div class='us-loader us-loader--loading us-loader--centered'>
<div class='us-loader__inner'>
<div class='us-loader__spinner'></div>
<div class='us-loader__text'>
Loading deals
</div>
</div>
<div class='us-loader__overlay'></div>
</div>
<!-- EXAMPLE CONTENT -->
<ul class='us-list'>
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
<li><a href="#">List item 4</a></li>
</ul>
<!-- END EXAMPLE -->
</div>
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.
The mobile view of the navigation just has the dotted numbers.
<div class="us-progress">
<nav>
<ul class="us-progress__nav us-clearfix">
<li class="us-progress__item">
<a href="#" class="us-progress__link us-progress__link--complete">
<span class="us-tablet--inline">Current supplier</span>
</a>
</li>
<li class="us-progress__item">
<a href="#" class="us-progress__link us-progress__link--complete">
<span class="us-tablet--inline">Usage</span>
</a>
</li>
<li class="us-progress__item">
<span class="us-progress__link us-progress__link--current">
<span class="us-tablet--inline">Results</span>
</span>
</li>
<li class="us-progress__item">
<span class="us-progress__link us-progress__link--next">
<span class="us-tablet--inline">New tariff</span>
</span>
</li>
<li class="us-progress__item">
<span class="us-progress__link us-progress__link--next">
<span class="us-tablet--inline">Apply</span>
</span>
</li>
</ul>
</nav>
</div>
USPs (Unique Selling Points) are used within tables and on splash pages to highlight offers within a deal, and also to differentiate deals.
General guidelines; There should only be one USP per deal. Text within USPs should be written in sentence case (not uppercase).
<div class='us-usp'>Shortened USP</div>
<div class='us-usp us-usp--annotated'>
<div class='us-usp'>Annotated USP</div>
More information about USP goes here
</div>
Copyright uSwitch Limited 2016 - 2017. Github