[tor-bugs] #25487 [Webpages/Styleguide]: Add an example for cards that are also links

[Tor Bug Tracker & Wiki]

#25487: Add an example for cards that are also links
-------------------------------------+------------------
     Reporter:  cypherpunks          |      Owner:  hiro
         Type:  enhancement          |     Status:  new
     Priority:  Medium               |  Milestone:
    Component:  Webpages/Styleguide  |    Version:
     Severity:  Normal               |   Keywords:
Actual Points:                       |  Parent ID:
       Points:                       |   Reviewer:
      Sponsor:                       |
-------------------------------------+------------------
 The [[https://metrics.torproject.org/|current 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.

--
Ticket URL: <https://trac.torproject.org/projects/tor/ticket/25487>
Tor Bug Tracker & Wiki <https://trac.torproject.org/>
The Tor Project: anonymity online