TWE Design System Components: Content Cards

[karina-sato]

Dependencies

• TWE Design System: Create Generic Design Components and Mockups #397

Overview

We need to create Content Cards for the TWE design system for the future website development & handoff.

Content Cards

These cards will be used for posts, articles, and other types of content. They might have a link for users to "read more" about it. See resource 1.05 for example

Action Items

• Research styling for Google's M3
• Create Building Blocks (if applicable)
• Create Style variations
• Create State Variants (see resource 1.01 and M3 guidelines 1.03)
• 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
• 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

• 1.02 Configuration Variants
• 1.03 Material Design relevant URLs:
  • https://m3.material.io/components/tabs/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, Tabs -We're going to replace this

• Google Doc: HfLA Design System Guide for Designers (v2)
  1.05 Example of content cards: Hack for LA Wins