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