v2.0.14 logo-icon logo-small logo-vertical-small logo-vertical
Sidebar
uSwitch is hiring.

Articles

Base article Github: _base.scss

Article listings for news are important on the landing pages.

Example


               <article class='us-article'>
                 <a class='us-article__link' href="#">
                   <div class='us-grid-row'>
                     <div class='us-col-md-8'>
                       <h3 class='us-article__title'>Car insurance guides</h3>
                       <p class='us-article__description'>
                         A quarter of 18-34 year olds believe that tech companies could offer better financial services than banks
                       </p>
                       <div class="us-article__meta">
                         <span class="date">2 months ago</span>
                         in
                         <span class="category">Banking</span>
                       </div>
                     </div>
                     <div class='us-col-md-4 us-tablet--block'>
                       <img class='us-img--full us-article__image' src='https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg' />
                     </div>
                   </a>
                 </div>
               </article>

Guide article Github: _guide.scss

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.

Example

Car insurance guides

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.

Read more 

               <div class='us-article-group'>
                 <div class='us-guide-item us-col-md-4'>
                   <a class='us-guide-item-link' href='#'>
                     <div class='us-guide-item-image-container'>
                       <div class='us-guide-item-image background' style='background-image: url(https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg)'></div>
                     </div>
                     <div class='us-guide-item-content'>
                       <h4 class='us-guide-item-title'>Car insurance guides</h4>
                       <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>
                     </div>
                     <div class='us-guide-item-readmore'>
                       <span class='us-news-item-readmorelink'>Read more</span>
                     </div>
                   </a>
                 </div>
               </div>

More article Github: _more.scss

If the article listing has more in a category, we use this to let a user navigate to that category.

Example

See more banking news 

               <div class='us-more-item us-col-md-4'>
                 <a class='us-more-item-link' href='#'>
                   <span class='us-more-item-title'>See more banking news</span>
                 </a>
               </div>

News article Github: _news.scss

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.

Example

Consumer rights 14 Nov 2014

Customer uses promoted tweet to complain about BA

Sign of things to come? Social media helps to empower disgruntled consumer amid lost luggage row

More consumer rights 

               <div class='us-article-group'>
                 <div class='us-news-item us-col-md-4'>
                   <a class='us-news-item-link' href='#'>
                     <div class='us-news-item-image-container'>
                       <div class='us-news-item-image background' style='background-image: url(https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg)'></div>
                     </div>
                     <div class='us-news-meta'>
                       <span class='category'>Consumer rights</span>
                       <span class='date'>14 Nov 2014</span>
                     </div>
                     <h3 class='us-news-item-title'>Customer uses promoted tweet to complain about BA</h3>
                     <p class='us-news-item-snippet'>Sign of things to come? Social media helps to empower disgruntled consumer amid lost luggage row</p>
                     <div class='us-news-item-readmore'>
                       <span class='us-news-item-readmorelink'>More consumer rights</span>
                     </div>
                   </a>
                 </div>
               </div>

Related items Github: _related.scss

Related lists used for content sidebars.

Example

Title here


              <h2 class="us-related__title">Title here</h2>
               <ul class="us-related us-list--reset">
                 <li class="us-related__item">
                   <a class="us-related__item-link" href="#">Car accident claims — How to make a car insurance claim</a>
                 </li>
                 <li class="us-related__item">
                   <a class="us-related__item-link" href="#">How to get the best car insurance deals</a>
                 </li>
                 <li class="us-related__item">
                   <a class="us-related__item-link" href="#">No claims bonus explained: how to protect a no claims discount</a>
                 </li>
               </ul>

Copyright uSwitch Limited 2016 - 2017. Github