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

[karina-sato]

Update:
Content cards can have the same anatomy as the other cards, i.e., CTA cards, Link cards, etc. 

To simplify the design and dev work, I'll create variants to the other card components that enable users to choose the element in the card that will be displayed.
Next Steps
Create variants, update the master template and microsite layout.

[ExperimentsInHonesty]

DRAFT for generic issue

### Overview
We need to create [REPLACE WITH NAME OF COMPONENT] for the TWE design system for the future website development & handoff.

### Action Items
- [ ] Research styling for Google's M3
- [ ] Create Building Blocks (if applicable)
- [ ] Research Googles M3 guidelines to see what style, state and/or configuration variants are needed
- [ ] 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 https://github.com/hackforla/internship/issues/397
- [ ] leave a comment on https://github.com/hackforla/internship/issues/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](https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=2-45&t=UnquUaQhvcuGgsKH-0)
   - 1.04.01 Example Figma page: Design System - WIP, Profile Card
      <details><summary>Details</summary>

      ![image](https://github.com/user-attachments/assets/b18b3781-1306-4a55-af3d-4e8331bc26a0)
      </details> 
   - 1.04.02 ~[Internship Figma File, Design System, Tabs](https://www.figma.com/design/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=2790-13406&node-type=frame&t=50bfH3NclibVgqCf-0)~ -We're going to replace this
- Google Doc: [HfLA Design System Guide for Designers (v2)](https://docs.google.com/document/d/14BZYFEa5s5FESeASNorEDLH6zEW0LTYcpD1NVyE66iM/edit#heading=h.pq5p3t1w1lw2)

[ExperimentsInHonesty]

We don't really know what content cards are. The example is a testimonial card and there is already and issue for that.

[mklmrgn]

Re-opening as the component needs to be modified using standardized generic card component as its base