Permalink
Fetching contributors…
Cannot retrieve contributors at this time
58 lines (48 sloc) 1.63 KB
// @page Pattern Library/Articles
// @name Guide article
//
// @description
// 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.
//
// @markup
// <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>
$guide-item-image-size: 128px !default;
.us-guide-item {
@extend %base-item;
}
.us-guide-item-link {
@extend %base-item-link;
}
.us-guide-item-title {
@extend %base-item-title;
}
.us-guide-item-description {
@extend %base-item-description;
}
.us-guide-item-image-container {
@extend %base-item-image-container;
}
.us-guide-item-image {
@extend %base-item-image;
}
.us-guide-item-readmore {
@extend %readmore;
}
.us-guide-item-readmorelink {
@extend %readmore-link;
}