Add an example for cards that are also links
The [Metrics homepage] has some custom CSS for the links to the different analysis pages. I've attempted to recreate this with cards instead of completely custom CSS.
The HTML for the card looks like:
<a href="userstats-relay-country.html">
<div class="card mb-2" style="min-height: 150px;">
<div class="card-body">
<h4 class="card-title"><i class="fa fa-users fa-fw" aria-hidden="true"></i> Users</h4>
<p class="card-text text-muted">Where Tor users are from and how they connect to Tor.</p>
</div>
</div>
</a>The extra CSS looks like:
<style type="text/css">
/* external links */
a[target="_blank"]:before {
content: " \f08e";
font-family: 'FontAwesome';
font-size:14px;
position:relative;
top:1px;
margin-right:3px;
}
a.btn[target="_blank"]:before {
content: "";
}
a .card:hover { background-color: #ccc; }
a { text-decoration: none!important; }
</style>This CSS would need to be modified as currently it touches components that are unrelated, maybe a new class would need to be introduced.