Skip to content
Snippets Groups Projects

Card documentation

Merged Card documentation
timnoah-add-card-documentation into master
1 unresolved thread
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
contents/components/card.md
+ 3
− 3
@@ -13,7 +13,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](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-drawer--default), [modal](/contents/components/modals), or even a dedicated page) for deep dives. |
### Types
@@ -28,7 +28,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](/contents/components/table).
If the purpose of using the component is to compare and contrast several 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](/contents/components/table).
#### Single Stat
@@ -52,7 +52,7 @@ The header is **optional** and acts as the title of the proceeding body content.
The card body is **always required**. The content in the body should never be ambiguous or unclear. Provide the user with content regarding a single topic and strive to be as concise as possible. For example, if a card's purpose is to communicate a pricing plan, the body would contain the plan's price point and key feature information.
Use multiple sections within the body when you have two or more related but distinct pieces of information to communicate to users. Multiple sections can help break up complicated concepts like pricing data. Content in this area can include media, photos
Use multiple sections within the body when you have two or more related but distinct pieces of information to communicate to users. Multiple sections can help break up complicated concepts like pricing data. Content in this area could include media, and photos.
#### Actions