hackforla / hackforla/internship
TWE Design System Components: Generic Card
- Dominant language
- CSS
- Stars
- 20
- Forks
- 6
- PR merge metrics
- No merged PRs in 30d
Description
### 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
- #465
- #467
- #458
- Not Completed Cards
- #459
- #460
- #463
- #466
### Action Items
- [x] Research styling for Google's M3
- [x] Create Building Blocks
- [x] Research H4LA products and communicate with team on whether multiple configurations and states will be necessary for cards.
- [x] 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 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
- 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 ](https://m3.material.io/components/cards/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

- 1.04.02 ~[Internship Figma File, Design System, Need Template Revision,[ADD NAME OF COMPONENT](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)
Contributor guide
Assessment
This issue has not been assessed yet.