<a class="sfgov-news-card" href="https://sf.gov">
<h5 class="title">News card title</h5>
<p class="description">
News card description describes this news card. Use a descriptive description.
</p>
</a>
<a class="sfgov-news-card" href="{{ url }}">
<h5 class="title">{{ title }}</h5>
<p class="description">
{{ description }}
</p>
</a>
{
"url": "https://sf.gov",
"title": "News card title",
"description": "News card description describes this news card. Use a descriptive description."
}
.sfgov-news-card {
@include rubik;
background: $yellow-3;
border: 0;
border-radius: $radius;
color: $slate;
display: block;
padding: $rhythm * 2;
text-decoration: none;
.title {
@include body-link-bold;
color: $slate;
margin: 0 0 $rhythm*6 0;
}
.description {
@include body-short;
color: $slate;
margin: 0;
}
&:hover {
background: $yellow-4;
}
}
There are no notes for this item.