We believe in simplicity. And that’s why we’ve made these guidelines really simple. They inform the way we look, feel, behave and sound as a company, to ensure we remain consistent, impactful and recognisable across all of our communications.
\n
Our values
\n
\n
Fairness
\n
Knowledge
\n
Clarity
\n
Confidence
\n
Possibilities
\n
\n
Our mission
\n
Using our expansive market knowledge and customer insight, we want to provide a simple, relevant service allowing customers to switch with minimal hassle.
\n
Our ambition
\n
To be the UK’s leading comparison site for all consumers who wish to make their money go further.
\n
Our vision
\n
We are the comparison service of choice – because we make it relevant, personal and simple to use for consumers and partners.
\n
Our benefit
\n
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.
\n
Our personality
\n
\n
Expert
\n
Frank
\n
Connected
\n
Human
\n
Advisory
\n
\n
Brand positioning
\n
Intuitive and focused
\n
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.
\n
Authoritative and directional
\n
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.
\n
Personal and engaging
\n
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.
\n
Experimental and bold
\n
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
\n The sum of our efforts towards style guidelines, a pattern library and automated front-end. Made with ❤\n
\n
\n
\n
\n
\n
\n
\n
Design guidelines
\n
uStyle includes documentation and guidelines relating to our core design principles. This is our attempt at having one place to document everything that happens within our brand, UX and front-end development.
\n
\n
\n
Automated development
\n
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.
\n
\n
\n
\n
\n
\n
\n
\n
\n
Pattern library
\n
At the core, uStyle is a pattern library of components and elements that make up the design and feel of uSwitch. All these components are documented in the code section.
\n
\n
\n
Designer + developer happiness
\n
Solving the problem for a company that has lots of small teams working independently was very important to us. uStyle allows our designers and developers to focus on the things that matter, whilst making their lives easier when prototyping.
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.
We use Autoprefixer + Browserlist to decide what vendor prefixes to apply to our Sass files. We have a slightly wider browser support than the default (here). Currently we support all the way to IE8.
\n
Below is what we support. Each line is the minimum version or % use based on CanIUse metrics
\n
\n
last 5 versions (this is for Chrome, Safari and any others)
Our brand imagery is made up of lifestyle photography, product and object images, illustrations, and infographics. All of our imagery types should reassert our brand values of fairness, clarity and confidence.
\n
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.
\n
\n
Lifestyle photography
\n \n
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.
\n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n
\n
\n
Product and object images
\n
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.
\n
This will also extend into 3D renderings of objects, which are used within the banner areas of our website.
\n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n
\n
\n
Illustrations
\n
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é.
\n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n
\n
\n
Infographics
\n
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.
\n
Sizing
\n
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.
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.
","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":"
If the article listing has more in a category, we use this to let a user navigate to that category
The news item article standard. It mirrors the guide article. The news item image is a background image as the problem of not displaying <img> tags on mobile hasn't been resolved.
","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","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":"
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.
"}},{"name":".us-float--left","escaped":"us-float--left","description":"Float element to the left","markup":{"example":"
\n
content
\n
"}},{"name":".us-float--right","escaped":"us-float--right","description":"Float element to the right","markup":{"example":"
\n
content
\n
"}},{"name":".us-align--left","escaped":"us-align--left","description":"Align content of the element to the left","markup":{"example":"
\n
content
\n
"}},{"name":".us-align--center","escaped":"us-align--center","description":"Align content of the element to the center","markup":{"example":"
\n
content
\n
"}},{"name":".us-align--right","escaped":"us-align--right","description":"Align content of the element to the right","markup":{"example":"
\n
content
\n
"}},{"name":".us-block","escaped":"us-block","description":"Display element as a block","markup":{"example":"
\n
content
\n
"}},{"name":".us-color--cyan","escaped":"us-color--cyan","description":"Change content color to blue, navy, typecyan, cyan, red, green","markup":{"example":"
\n
content
\n
"}},{"name":".us-list--reset","escaped":"us-list--reset","description":"Reset list style","markup":{"example":"
\n \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
\n \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
\n \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
"}}],"markup":{"example":"
\n \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
","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":"
Responsive classes to allow display of elements across devices. You have the option of displaying them as block, inline-block or inline elements.
\n
You can also hide elements by .us-{DEVICE}--hidden and will hide those elements above that breakpoint.
\n","markup":{"example":"
.us-lg-desktop--block Shows on large desktop and up
\n
.us-desktop--block Shows on desktop and up
\n
.us-tablet--block Shows on tablet and up
\n
.us-sm-tablet--block Shows on small tablet and up
\n
.us-mobile--block Shows on mobile only
\n
.us-tablet--hidden Hidden on tablet and up
","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":"
Allow control of spacing around element. You can set margin or padding for an element without creating an extra class.
\n
An example of this .us-margin-top, .us-margin-top--small, .us-margin-top--large where margin can be replaced by padding and top can be replaced by bottom, left or right.
\n
Default space for margin and padding is 1em, small modifier uses .5em and large modifier uses 1.5em.
\n","state":[{"name":".us-margin-top","escaped":"us-margin-top","description":"Use default top margin (1em)","markup":{"example":"
Sample content
"}},{"name":".us-margin-top--small","escaped":"us-margin-top--small","description":"Use small top margin (.5em)","markup":{"example":"
Sample content
"}},{"name":".us-margin-top--large","escaped":"us-margin-top--large","description":"Use large top margin (1.5em)","markup":{"example":"
Icons are created by chaining classes together with us-icon. There are 3 sizes, 16px, 32px, 64px, these are named us-icon--small, us-icon--medium and us-icon--large respectively.
\n
There are 5 colours for each icon, white, typegrey, inputgrey, typecyan and custom. Where custom 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 :pseudo element (:before, :after) then suffix your icon name with --before and --after respectively. To have an icon standalone with text as fallback, add us-icon--notext to the element.
This is the basic form field, .us-field 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 .us-faux-label
\n
Best practices
\n
\n
For text inputs that are optional, add "(optional)" to the placeholder attribute for the input. Not highlighting required fields makes the form look less intimidating.
","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":"
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
\n","state":[{"name":".us-input-group--disabled","escaped":"us-input-group--disabled","description":"Disabled state for input groups","markup":{"example":"
Our standard input styling across the website. This is specifically for text, email, password, search etc. type inputs.
\n
Best practices
\n
\n
Specifying an appropriate type attribute (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.
\n
\n
Where appropriate use the autocomplete attribute to make it easier for the browser to fill in fields on the users behalf, saving them time on lengthy forms.
\n
\n
\n","state":[{"name":".us-form-input--large","escaped":"us-form-input--large","description":"Larger input style","markup":{"example":""}},{"name":".us-form-input--blocked","escaped":"us-form-input--blocked","description":"Fluid input style","markup":{"example":""}},{"name":".us-form-input--error","escaped":"us-form-input--error","description":"Visual feedback for when the input has an error","markup":{"example":""}},{"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":""}},{"name":".us-form-input--disabled","escaped":"us-form-input--disabled","description":"Inactive state for form inputs that can't be interacted with","markup":{"example":""}}],"markup":{"example":"","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":"
Browsers that support screen density media features display our font icon tick or a box shadow circle. Other browsers fallback to default styling.
\n
Best practices
\n
\n
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.
\n
\n
Use radio buttons when each of the choices matters to the user. Each needs to be considered before they make their choice.
\n
\n
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.
\n
\n
A stand-alone checkbox is good for toggling something on/off or opting in/out.
\n
\n
Provide a default selection to radio and checkbox groups if it's necessary and wont be changed by 90% of your users.
\n
\n
Try to keep the number of radio buttons and checkboxes in the same group to a maximum of 6.
\n
\n
\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":"
\n \n
\n \n \n
\n
\n
\n \n
\n \n \n
\n
"}}],"markup":{"example":"
\n \n
\n \n \n
\n
\n
\n \n
\n \n \n
\n
","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":"
Select boxes allow users to choose and option or options from a list of options.
\n
Best practices
\n
\n
Use select boxes when choosing one or more options from a list of related, but mutually exclusive options e.g. profession, title, month.
\n
\n
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.
\n
\n
\n","state":[{"name":".us-form-select--multiple","escaped":"us-form-select--multiple","description":"Removes the drop down arrow and adjusts the padding of
![\"Ruby](\"/images/ruby-logo.png\")
\n ![\"Bower](\"/images/bower-logo.png\")
\n ![\"Cloudfront](\"/images/cloudfront-logo.png\"){kind=logo}
\n ![\"NPM](\"/images/npm-logo.png\"){kind=logo}
\n ![](\"/images/lifestyle-photography-01.png\")
\n ![](\"/images/lifestyle-photography-02.png\")
\n ![](\"/images/lifestyle-photography-05.png\")
\n ![](\"/images/lifestyle-photography-06.png\")
\n ![](\"/images/lifestyle-photography-03.png\")
\n ![](\"/images/lifestyle-photography-04.png\")
\n ![](\"/images/lifestyle-photography-07.png\")
\n ![](\"/images/lifestyle-photography-08.png\")
\n ![](\"/images/object-photography-01.png\")
\n ![](\"/images/object-photography-02.png\")
\n ![](\"/images/object-photography-05.png\")
\n ![](\"/images/object-photography-06.png\")
\n ![](\"/images/object-photography-03.png\")
\n ![](\"/images/object-photography-04.png\")
\n ![](\"/images/object-photography-07.png\")
\n ![](\"/images/object-photography-08.png\")
\n ![](\"/images/illustration-01.png\")
\n ![](\"/images/illustration-02.png\")
\n ![](\"/images/illustration-05.png\")
\n ![](\"/images/illustration-06.png\")
\n ![](\"/images/illustration-03.png\")
\n ![](\"/images/illustration-04.png\")
\n ![](\"/images/illustration-07.png\")
\n ![](\"/images/illustration-08.png\")
\n ![](\"/images/infographic-01.png\")
\n ![](\"/images/infographic-02.png\")
\n ![](\"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\")
\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