-
Notifications
You must be signed in to change notification settings - Fork 5
/
_guide.scss
57 lines (48 loc) · 1.63 KB
/
_guide.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// @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;
}