Permalink
Fetching contributors…
Cannot retrieve contributors at this time
89 lines (75 sloc) 2.12 KB
// @page Pattern Library/Articles
// @name Base article
//
// @description
// Article listings for news are important on the landing pages.
//
// @markup
// <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>
$article-border-color: $c-keylinegrey !default;
$article-padding: 2em !default;
$article-description-color: $c-typegrey-2 !default;
.us-article {
padding-top: $article-padding/2;
padding-bottom: $article-padding/2;
border-bottom: 1px solid $article-border-color;
@include respond-to(tablet, true) {
padding-top: $article-padding;
padding-bottom: $article-padding;
}
}
.us-article__link {
display: block;
-webkit-tap-highlight-color: rgba(0,0,0,0);
&:hover {
.us-article__title {
text-decoration: underline;
}
}
}
.us-article__link,
.us-article__link:hover,
.us-article__link:visited, {
color: inherit;
}
.us-article__title {
@include heading(4);
@include respond-to(tablet, true) {
@include heading(3, $extend: false);
}
}
.us-article__meta,
.us-article__description {
color: $article-description-color;
}
.us-article__meta {
font-size: .875em;
}
.us-article__description {
margin-bottom: 1em;
@include respond-to(tablet, true) {
font-size: 1.125em;
}
}
.us-article__image {
border: 1px solid $article-border-color;
}