APPROVED TO ADD DESIGN COMPLETE IMPLEMENTATION PENDING
Contributors | |
|---|---|
Slack channel | |
Paragon Jira ticket | https://openedx.atlassian.net/browse/PAR-307 |
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
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=9076%3A653
♒ Behaviors
💕 Accessibility
Notes
Notes from collaborator conversations or meetings regarding this component.