Open wenannie8 opened 12 months ago
This descriptions ☝️ is a great start. A couple other thoughts to consider:
It would be good to consider a Card as a generic layout component, consisting of loosely defined content regions (header, body, footer), direction, corner rounding, elevation, hover states. It's dimensions flexible; can be small, large, narrow, wide, , grow/shrink to fit its contents, etc. Padding should not be baked in to the Card (too many use cases where a background color/image will want to fill the entirety of a header/body/footer.
The Card layout component could then be complimented by a collection of "card templates" which are a variety of executions populating the header, body, and footer regions. Lots of variety will be good for inspiration.
From a Design System perspective, we want to standardize on what a card's purpose is and how it should be used:
There are many different use cases for cards so the users should have full freedom to customize the design of cards. Slot component feature was explored as a way to make cards as customizable as possible. Explorations link: https://www.figma.com/file/je5AYzMavRt1cG7rmw8j1W/HPE-Card-Component?type=design&node-id=4353%3A11375&mode=design&t=p1iCvgipsGyRmAsr-1
Exploration 1: Having one empty slot
Exploration 2: Having multiple empty slots
We do not want to limit the user's ability to customize a card. In Grommet currently, card is an empty container. Since the user's have the freedom to change all of card's properties, there's nothing for the Design Systems to standardize. However, we want to provide guidance to ensure that cards generally follow a consistent pattern, such as heading is always bigger than body text. We also want to give users example layouts of cards to better help users understand how to build cards. Therefore, it might be best for cards to be a templet instead of component. Templets allow us to give users guidance without limiting customizability.