Card Design

[kwwii]

Several pieces of our UIs use the card pattern.

• Collect and define the current use cases, requirements and implementation(s).
• Create a specification which defines the UI pattern to be used by all card implementations.

[kwwii]

The result of this work should be a specification from which a developer can write a storybook which describes how to use this new component in various situations and with varying complexity

[kwwii]

The purpose behind this is to avoid long texts and render more scannable content:

Cards are modular, so different content can be placed together.
Cards can break down content into digestible bits that allow users to interact with it.

[edenhernandez-suse]

The first version is in this Adobe Xd prototype

Approach and explanation in this Confluence page: Cards redesign

The visual work remaining consists on:

• Overall padding
• Isolation mechanism (border, shadow, both, etc.)
• Font sizes (card title, card description)
• Corners' icon sizes.
• Main icon/picture size.

[cnotv]

Consider existing implementation. If anything is missing, please add it to the epic: #9853

[cnotv]

@kwwii if any change, can we add an issue with the design update and add to the epic #9853?

[kwwii]

@kwwii if any change, can we add an issue with the design update and add to the epic #9853?

Yes, I have added that information to the epic in jira

[cnotv]

Yes, I have added that information to the epic in jira

Are we tracking the styleguide in Jira now?