APPROVED TO ADD DESIGN COMPLETE IMPLEMENTATION PENDING
Contributors | |
|---|---|
Slack channel | |
Paragon Jira ticket | |
Other Jira tickets | |
Design resources | https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=3461%3A276 |
Technical docs |
Design
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=3461%3A160https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=3461%3A247
A Card is composed of five subcomponents.
Card Image Cap
An image that sits on the top or left edge of a card. Can contain an optional logo image.
Variants
Orientation | Vertical, Horizontal |
|---|---|
With Logo | True, False |
Card Header
The Card Header contains a title, subtitle and may contain a series of secondary level actions to take on the object. Primary level actions should appear in the Card Footer.
Variants
With Subtitle | True, False |
|---|---|
With Action | True, False |
Size | Default, Small |
Card Section
A section of content, optionally with it’s own set of actions separate from the card footer.
Variants
With Title | True, False |
|---|---|
With Links | True, False |
Muted | True, False |
Card Divider
A card divider is placed between two Card Section components.
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=3461%3A153
Card Footer
The bottom of a card used to outline actions that can be taken on this object.
Variants
Stacked | True, False |
|---|---|
With Footer Text | True, False |
Orientation | Vertical, Horizontal |
Common Configurations
Vertical
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=3461%3A5Vertical with Horizontal Image Cap
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=3461%3A265Horizontal
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=3461%3A268
🌞 Best Practices
Do | |
Don't |
♊ Related Components
📐 Specification
What does an engineer need to know in order to build this component?
Redlined Design Spec
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=4180%3A2794https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=4180%3A3096
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=4180%3A3252
♒ Behaviors
💕 Accessibility
Notes
Notes from collaborator conversations or meetings regarding this component.
XX.XX.20XX
- Consider the design of cards that are interactive (the whole card is clickable). Outline focus state of the whole, focused card and any guidelines about how an interactive card should or should not be assembled.