Cards are meant to contain specific pieces of data or information considered standardized or a predetermined layout and display. A card is identifiable as a single, contained unit
Cards usage in CS+
Cards may appear in different shapes and sizes, and in different scenarios and contexts. It usually contains images, titles, a description, calls to action, or even dates.
The card itself can be just an image or just text.
The card’s layout and dimensions depend on its contents. It can extend both vertically and horizontally depending on what is inside of it.
|
Card Style |
Description |
|---|---|
|
1. Plain |
Can be white with text or have an image |
|
2. Outlined |
Same as before but here we have a visible outline surrounding the whole card. Outline-border: $border-1px--solid |
|
3. Shadowed |
Same as the first one, but here we have a shadow shadow: $shadows.Resting |
Properties
|
Property |
Value |
Description |
|---|---|---|
|
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. |
|
Content |
true false |
Content is required if the card needs to transmit something that the image can't. |
Behaviours
Plain
|
Property |
Description |
|---|---|
|
1. Default |
Plain with just a white fill. |
|
2. Hover |
Plain with a dark background overlay Digital black - 5% |
|
3. Pressed |
Plain with a darker background overlay Digital black - 10% |
|
4. Disabled |
Plain with a light overlay Disabled light theme |
Outlined
|
Property |
Description |
|---|---|
|
1. Default |
It has a border and a white fill. |
|
2. Hover |
It has a border with a dark background overlay Digital black - 5% |
|
3. Pressed |
It has a border with a darker background overlay Digital black - 10% |
|
4. Disabled |
It has a border with a light overlay Disabled light theme |
Shadowed
|
Property |
Description |
|---|---|
|
1. Default |
White fill with a small shadow $shadow-resting |
|
2. Hover |
White fill with a bigger shadow $shadow-hovered |
|
3. Pressed |
White fill with a shadow with less blur $shadow-pressed |
|
4. Disabled |
No shadow but with a light overlay $disabled light theme |
Guidelines
|
|
|
|