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