Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
S
styleguide
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 11
    • Issues 11
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 0
    • Merge Requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Analytics
    • Analytics
    • CI/CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar

GitLab is used only for code review, issue tracking and project management. Canonical locations for source code are still https://gitweb.torproject.org/ https://git.torproject.org/ and git-rw.torproject.org.

  • The Tor Project
  • Web
  • styleguide
  • Issues
  • #6

Closed
Open
Created Mar 14, 2018 by cypherpunks@cypherpunks

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.

Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
None
Due date
None