Card > Use cases and requirements

Purpose

Establish requirements for cards and understand how they're used in the product today.

Outcome

  • Design and dev requirements.
  • List of known/potential use cases.
  • Ready to move to #1427 (closed) to begin the design process.

Current use

Definition: A card displays a single group of content within a set of similar groups. (Source)

Current design:

The card design is based on Bootstrap cards, that use a single container and dividers to organize content within. In the product you'll find both GitLab UI cards (GlCard .gl-card) and Bootstrap cards (.card) that haven't been migrated.

CleanShot_2023-01-23_at_07.14.17_2x

View screenshots of current card use
Purpose Screenshot
Help quick links (not GlCard) CleanShot_2023-01-23_at_10.30.32_2x
Infrastructure > Kubernetes clusters CleanShot_2023-01-23_at_10.39.09_2x
Monitor > Escalation policies CleanShot_2023-01-23_at_10.40.44_2x
Deployments > Releases (not GlCard) CleanShot_2023-01-23_at_10.44.46_2x
Security & Compliance > Vulnerability report CleanShot_2023-01-23_at_10.46.06_2x
Security & Compliance > Configuration CleanShot_2023-01-23_at_10.50.19_2x
Repository > Branches CleanShot_2023-01-23_at_11.08.11_2x
Repository > Compare CleanShot_2023-01-23_at_11.11.59_2x
Settings > Webhooks CleanShot_2023-01-23_at_11.20.05_2x
Settings > Repository CleanShot_2023-01-23_at_11.21.18_2x
Groups > New Group > Import Group Screenshot_2023-01-23_at_17.42.57
Security & Compliance > Policies > New Policy Screenshot_2023-01-23_at_12.51.32_PM
Discussion wrapper CleanShot_2023-01-24_at_11.22.45_2x
Related merge request closing information card with description
View screenshots of similar components and layout
Purpose Screenshot
MR widgets CleanShot_2023-01-23_at_10.57.59_2x
Tree content holder CleanShot_2023-01-23_at_11.06.24_2x
File holder CleanShot_2023-01-23_at_11.07.17_2x
CleanShot_2023-01-23_at_11.11.00_2x
Info well CleanShot_2023-01-23_at_10.59.16_2x
Related items… CleanShot_2023-01-23_at_10.57.38_2x
Misc container CleanShot_2023-01-23_at_10.58.56_2x
CleanShot_2023-01-23_at_11.18.47_2x
Tables CleanShot_2023-01-23_at_11.21.48_2x
Links CleanShot_2023-01-23_at_13.17.04_2x
Misc container Screenshot_2023-01-23_at_1.19.09_PM
Dashboard panel (WIP concept) image

Considerations

View considerations
  • Semantics:
    • List items or group of <div>s?
  • States:
    • Rest
    • Disabled: Based on the intent of using a card this should likely not be an option
    • Hover (when entire card is linked): See additional considerations in https://inclusive-components.design/cards/
    • Loading: Content within could use skeleton loader(s) instead of needing something unique to a card
    • Status: Error and success
    • Emphasis: Highlighted or featured
  • Sections:
    • Header: Optional
      • Heading level?
    • Body: Required
      • Any content possible including headings, so long as they follow the heading structure of the rest of the page
    • Footer: Optional
  • Layout:
    • Group of cards: Grid, stacked, masonry, etc.
    • Within a card: Vertical or horizontal
    • Responsive
  • Nesting:
    • Likely no based on the purpose of a card
  • Interaction:
    • Collapsible: Should this be an option?
    • Drag and drop or reordering: Should this be an option?
  • Figma composing and configuration:
    • What should be configurable?
    • What should be composable?
    • What defaults or examples should be included in the UI kit instances?
  • Appearance:
    • Borders
    • Border radius
    • Background color
    • Color on different surfaces
    • Optional header and footer with optional tinted background
    • Edge-to-edge internal borders separate vertical sections within

Concept and requirements

View concept direction (TBD)

Semantics

  • The card design can be used for a single item (<div>).
  • A set of cards should be an unordered list (<ul>) where each card is a list item (<li>). Using a list means that a count is associated with the group so the number of items within the collection is readily available for assistive technology (AT).

Visual design and affordance

TBD

Layout

TBD

Interaction and states

TBD

Resources

Edited by Sascha Eggenberger