Cards are meant to contain specific pieces of data or information considered standardized or a predetermined layout and display.
Cards may appear in different shapes and sizes and in different scenarios and contexts. It usually contains images, titles, and a description.
Anatomy
Structure
|
1. Image area2. Sub-title3. Title4. Description5. Date6. button (CTA) |
|
1.Image area |
Mandatory The image can be an entire image, an icon, or a product (png) |
|
2. Sub-title |
Optional In case you need some type of category or extra title |
|
3.Title |
Mandatory It can be up to 2 lines of text. If the title is too large the end should be an ellipse. |
|
4. Description |
Optional The description can be up to 3 lines of text. If the description is bigger the end should end in an ellipse but only show 3 lines maximum. |
|
5. Date |
Optional A date for when the article was released. |
|
6. Button (CTA) |
Optional If an article requires a clear CTA it can use one, but it's optional. |
Sizes and Spaces
|
The Vertical version can usually show an Image, title, and description. A padding of 24px around all text areas, and an 8px margin between the title and description. Also, an 8px padding below the button, and the button stays at 8px to the right of the component. 4px is used between the sub-title and the title. |
|
The horizontal version has the same specs as the vertical one. |
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Device |
desktop mobile |
The change is merely in the padding and in the font size. |
|
Style |
plain shadowed outlined |
Depends on the nature of the message that's being displayed.
Plain can be used mostly on cards that already have an action inside
Shadow can be used when the whole card is clickable and you need a bit more contrast
Outlined is to have a bit more separation when cards are side by side.
*See variation bellow |
|
Orientation |
Portrait Landscape |
With different displays to show the card, Designers can choose which to use to create a more dynamic approach. |
|
State |
default hover pressed disabled |
Default - The main form of the cart
Hover - State when the mouse is hovering the cart
Pressed - State when the card is being clicked/pressed
Disabled - State when the cart can't have an interaction
*See below different states |
|
Selected |
true false |
If the selected is true then a border around the card component will show up |
|
Image |
true false |
Images are one of the main things in cards, but we can have them or remove them. |
|
Actions |
true false |
Actions are an add-on to reinforce an action from the user. |
|
Subtitle |
true false |
Content to give extra info |
|
Content |
true false |
Content is required if the card needs to transmit something that the image can't. |
*Style variation
*State variation
Behavior
Interaction
Mouse hover + pressed action
Responsiveness
Cards responsiveness
Although cards can have a responsive size, having them side by side on the platform will most likely fill the whole row having 4 cards in a line. The width will always be a percentage.
Guidelines
|
|
|
|