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
+ 5
4
Compare changes
  • Side-by-side
  • Inline
@@ -2,7 +2,6 @@
name: Card
related:
- table
- single-stat
---
Cards are a flexible component used to display content and actions in a variety of contexts. They are generally restricted to a single topic and it should be easy for users to scan relevant and actionable information. Content, such as images and text, should be positioned within them in a manner that demonstrates their intended hierarchy.
@@ -28,11 +27,13 @@ There are two main types of Cards: Static and Dynamic.
#### 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).
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](/components/table).
#### Single Stat
If the purpose of using the component is to show a high level overview of incoming data such as Security vulnerabilities or Threat Monitoring statistics, use a [single stat component](/contents/components/single-stat).
If the purpose of using the component is to show a high level overview of incoming data such as Security vulnerabilities or Threat Monitoring statistics, use a single stat component.
Todo: Add link to single stat component after it's been created
## Demo
@@ -56,7 +57,7 @@ Use multiple sections within the body when you have two or more related but dist
#### Actions
The action section is **optional**. There should be no more than 3 actions. Actions should always be located within an action bar at the bottom of the Card. Button order and positioning should follow our [guidelines for buttons](/components/buttons).
The action section is **optional**. There should be no more than 3 actions. Actions should always be located within an action bar at the bottom of the Card. Button order and positioning should follow our [guidelines for buttons](/components/button).
### Component Combinations
Loading