Skip to content
Snippets Groups Projects

Card documentation

Merged Tim Noah requested to merge timnoah-add-card-documentation into master
1 unresolved thread
Compare and Show latest version
1 file
+ 3
3
Compare changes
  • Side-by-side
  • Inline
@@ -10,7 +10,7 @@ Cards are used to connect similar concepts and/or activities to help make it eas
| Do | Don't |
| --- | --- |
| Use cards for snapshots or an overview of information. | Don't use a card for an entire workflow. Consider a dedicated content area (a drawer, modal, or even a dedicated page) for deep dives.|
| Use cards for snapshots or an overview of information. | Don't use a card for an entire workflow. Consider a dedicated content area (a drawer, modal, or even a dedicated page) for deep dives. |
### Types
@@ -25,7 +25,7 @@ There are two main types of Cards: Static and Dynamic.
#### Table
If the purpose of using the component is to compare and contrast 5 or more static (non-draggable) pieces of content, or if you're utilizing column headers to organize your content horizontally, a better option would be to structure the data within a [table component](https://design.gitlab.com/components/table).
If the purpose of using the component is to compare and contrast 5 or more static (non-draggable) pieces of content, or if you're utilizing column headers to organize your content horizontally, a better option would be to structure the data within a [table component](/components/table).
#### Single Stat
@@ -73,7 +73,7 @@ On mobile, there should be a longer hold on the card in order to grab it and mov
#### Loading
While the page is loading, cards should use skeleton loader. See example and more info [here](https://design.gitlab.com/components/skeleton-loader).
While the page is loading, cards should use the [skeleton loader component](/components/skeleton-loader).
## Design Specifications
Loading