v32.1.1
Cards
Cards are containers that group related information together.
Overview
A card is a container that groups related information such as text, illustration, and sometimes interactive elements like buttons or links. Cards can serve as modular units that can be organized, rearranged, and displayed in a flexible layout.
Anatomy
Types of Cards
There are different types of cards used in Carta’s UI with various functionalities and purposes.
We have defined 4 common patterns that can be used across various products. The majority of card use cases can fit into one of the categories below. If your design doesn’t fit within any of the defined categories, consider building off the tile component while designing your card. Feel free to bring your explorations to ink, allowing the team to study emerging patterns and potentially expand our category list.
Promotional
Introducing automated money movement
Approve your expenses on Carta and have your funds automatically transferred. Enjoy faster turnaround time, better visibility into payment status, and no fees!
Educational & informational
FAQ
Find the answers to your questions about Carta. If you can't find what you're looking for, reach out to us.
Task
Exercise to approve
10
to review
Approve option exercise requests to complete transaction
Data
Carta 409A
Jul 1, 2023 - Sept 30, 2023
Overall company valuation
Per unit values
$4.50 - $7.50
Promotional
This pattern is commonly used for promoting and highlighting new features, services or recommending tasks to drive user engagement. The content in this card can be either marketing or product related.
Examples
Cream is the default background color for this category.
Get expert tax advice and equity education for your team
You’ve made your employees owners - now empower them with access to expert tax advisors and resources to understand their equity’s potential.
Learn moreCarta Startup Stack
You’ve made your employees owners - now empower them with access to expert tax advisors and resources to understand their equity’s potential.
Learn moreIntroducing automated money movement
Approve your expenses on Carta and have your funds automatically transferred. Enjoy faster turnaround time, better visibility into payment status, and no fees!
Educational & Informational
Consider using this pattern when providing educational or informative content such as FAQs, help resources, useful tips to further assist users on a specific task or workflow in product.
Examples
Blue-30 is the default background color for this category.
FAQ
Find the answers to your questions about Carta. If you can't find what you're looking for, reach out to us.
Alternatives can be used if you feel the primary option is not appropriate.
Tips
Communicating employee equity can help improve employee engagement and retention.
Task
This type of card is used to display a variety of tasks associated with imperative actions, often seen in dashboard designs.
Examples
The outlined card is the default style for this category.
Certificate to sign
15
to review
Exercise to approve
Approve option exercise requests to complete transaction
2
to review
Expiring Fair Market Value (FMV)
Request a new 409A now to be compliant with the IRS.
$7.13
/ share
gray-20 (borderless) can be used as the alternative background if needed.
Exercise to approve
Approve option exercise requests to complete transaction
2
to review
Total Compensation
You have 10+ employees running out of equity
Download your Equity Refresh report to see who is due for a refresh, how much, and when to grant it.
Data
Data card is used for displaying a snapshot or summary of information, most suitable for presenting snippets of data or details, such as company profile, fund summary, or fair market value.
Examples
Carta 409A
Jul 1, 2023 - Sept 30, 2023
Overall company valuation
$400M
Per unit values
$4.50 - $7.50
Fair Market Value (FMV)
$0.15
/ share as of 06/21/2023
Total committed
$670M
Called
$2M
Per unit values
$0.00
Per unit values
$1.4M
Contributed
$2M
Total distributed
$716.2K
Total net asset value
$1.3M
Total committed
$4.50 - $7.50
Best practices
Card height
Certificate to sign
15
to review
Exercise to approve
Approve option exercise requests to complete transaction
2
to review
Certificate to sign
15
to review
Do
Card widths may vary, but the height of the cards should be consistent, especially when multiple cards are displayed together
Certificate to sign
15
to review
Exercise to approve
Approve option exercise requests to complete transaction
2
to review
Certificate to sign
15
to review
Do
Card widths may vary, but the height of the cards should be consistent, especially when multiple cards are displayed together
Certificate to sign
15
to review
Exercise to approve
Approve option exercise requests to complete transaction
2
to review
Certificate to sign
15
to review
Don't
Don't use uneven card heights
Certificate to sign
15
to review
Exercise to approve
Approve option exercise requests to complete transaction
2
to review
Certificate to sign
15
to review
Don't
Don't use uneven card heights
Avoid nested outlines
Resource Center
Save time by browsing our online resources for help and guidance. Can't find the answers to your questions? Our team of experts are here for you!
Blog
Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Still have questions?
Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Resource Center
Save time by browsing our online resources for help and guidance. Can't find the answers to your questions? Our team of experts are here for you!
Blog
Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Still have questions?
Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Do
Remove unnecessary outlines to achieve a cleaner UI
Don't
Avoid containing a card within a container
Resource Center
Save time by browsing our online resources for help and guidance. Can't find the answers to your questions? Our team of experts are here for you!
Blog
Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Still have questions?
Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Do
Remove unnecessary outlines to achieve a cleaner UI
Resource Center
Save time by browsing our online resources for help and guidance. Can't find the answers to your questions? Our team of experts are here for you!
Blog
Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Still have questions?
Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Don't
Avoid containing a card within a container
Illustrations, not lifestyle images
Tips
Communicating employee equity can help improve employee engagement and retention.
Do
Use illustrations in a card
Don't
Don't use lifestyle images in a card
Tips
Communicating employee equity can help improve employee engagement and retention.
Do
Use illustrations in a card
Don't
Don't use lifestyle images in a card
Color usage
Certificate to sign
15
to review
Approve option exercise requests to complete transaction
Exercise to approve
2
to review
Accounts to verify
Approve option exercise requests to complete transaction
27
to review
Approve option exercise requests to complete transaction
Do
Use the same color for the same card category
Certificate to sign
15
to review
Approve option exercise requests to complete transaction
Exercise to approve
2
to review
Accounts to verify
Approve option exercise requests to complete transaction
27
to review
Approve option exercise requests to complete transaction
Do
Use the same color for the same card category
Certificate to sign
15
to review
Approve option exercise requests to complete transaction
Exercise to approve
2
to review
Accounts to verify
Approve option exercise requests to complete transaction
27
to review
Approve option exercise requests to complete transaction
Don't
Don't use more than two colors for the same card category
Certificate to sign
15
to review
Approve option exercise requests to complete transaction
Exercise to approve
2
to review
Accounts to verify
Approve option exercise requests to complete transaction
27
to review
Approve option exercise requests to complete transaction
Don't
Don't use more than two colors for the same card category
Is this page helpful?