Investigate card styling for graphs in the contributor page

Challenge

Some of our dashboard type pages have many graphs stacked next to and on top of each other which causes some usability challenges with the current design.

  • For examples: Graphs on the contributor page are hard to read and differentiate from each other.

Ideation

From Pajamas docs on Cards

Use cards if you are displaying a discrete block of content as part of a broader set. For example, issues displayed on an issue board or pricing options displayed on pricing and marketing pages.

🎨 Specs (we need to move these to Figma)

https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/card-spec-preview/

Proposal

  • 💡 Idea: Might putting graphs on discreet cards better help group the information?
  • 🤔 Risk: How would this impact other graphs in GitLab? How might we make this consistent or document usage guidelines in Pajamas?
Before After- Rough idea
image image
Edited by 🤖 GitLab Bot 🤖