Card
- Adam Butterworth (Deactivated)
- Eugene Kang
APPROVED TO ADD DESIGN COMPLETE IMPLEMENTATION PENDING
Contributors | @Adam Butterworth (Deactivated) @Adam Stankiewicz |
|---|---|
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
Β
Β
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.
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
Β
Vertical with Horizontal Image Cap
Β
Horizontal
Best Practices
Do | Β |
Don't | Β |
Related Components
Β
Specification
What does an engineer need to know in order to build this component?
Redlined Design Spec
Β
Β
Behaviors
Accessibility
Β |
Notes
Notes from collaborator conversations or meetings regarding this component.
XX.XX.20XX
Β