TWE Design System Components: Generic Card

[mklmrgn]

Overview

We need to create a generic Card Component for the TWE design system for the future website development & handoff. This will be essentially a blank modular card in order to standardize elements like padding, spacing between objects, elevation, and states (if applicable). This component should be modular, and give designers a base line for making all different types of cards.

Details

Several uncompleted cards issues will need to move to the icebox and several completed cards will also need to be redone using this new standardized card.

• Completed Cards
  • TWE Design System Components: Testimonial Cards #465
  • TWE Design System Components: Content Cards #467
  • TWE Design System Components: Profile Card #458
• Not Completed Cards
  • TWE Design System Components: CTA Card #459
  • TWE Design System Components: Link Cards #460
  • TWE Design System Components: Event Cards #463
  • TWE Design System Components: Input Cards #466

Action Items

• Research styling for Google's M3
• Create Building Blocks
• Research H4LA products and communicate with team on whether multiple configurations and states will be necessary for cards.
• Research Googles M3 guidelines to see what style, state and/or configuration variants are needed
• Create reusuable generic cards with correct spacing and padding
• If needed - Create State Variants (see resource 1.01 and M3 guidelines 1.03)
• If needed - Create Configuration Variants (see resource 1.02 and M3 guidelines 1.03)
• Weekly (or more often if needed) communicate changes in issues comments (below) and with design team
• Get sign-off from Design Lead
• Get sign-off from Product Manager (general and dev)
• Update Figma page: Design System - WIP (resource 1.04)
  • Add all the details that canvas asks for (see resources 1.04.01 for example of what/where you are updating)
• Update Figma page: Microsite Ready for Dev
• Close Issue
• Update epic by checking box TWE Design System: Create Generic Design Components and Mockups #397
• leave a comment on Develop Design System Microsite based on Material for MKDocs #455 with the following text

  Issue #[REPLACE WITH YOUR ISSUE NUMBER] has been released by design
  

Resources/Instructions

• 1.01 State Variants

  • https://mui.com/material-ui/react-breadcrumbs/?srsltid=AfmBOooO8VG4NrVD68dkGIBgfY2CmKvKDwKgmv6kDv4h0nqb8Y-5aVUS
    &
  • https://m3.material.io/foundations/interaction/states/overview)

• 1.02 Configuration Variants (this page gives a number of possibilities. Let's discuss which (1 or 2) will work the best.

• 1.03 Material Design relevant URLs:
  - https://m3.material.io/components/cards/overview

• 1.04 Figma File: Internships Figma, Design System - WIP

  • 1.04.01 Example Figma page: Design System - WIP, Profile Card

    Details

    

  • 1.04.02 [Internship Figma File, Design System, Need Template Revision,ADD NAME OF COMPONENT -We're going to replace this

• Google Doc: HfLA Design System Guide for Designers (v2)