Container
DESIGN COMPLETE IMPLEMENTATION PENDING
The basic container to contain, pad, and center content in the viewport
Contributors | @Adam Butterworth (Deactivated) |
---|---|
Slack channel | |
Paragon Jira ticket | |
Other Jira tickets | |
Design resources | |
Technical docs |
Design
To use the layouts documented here the easiest thing to do is use the 12 Column layout grid from the Figma library:
Sizes
Size | max width |
---|---|
xs | 464 |
sm | 708 |
md | 952 |
lg | 1196 |
xl | 1440 |
Best Practices
Do | Use small and medium size containers for single column readable content. |
Don't | Avoid large or extra large containers for regular sizes of paragraph text. Aim instead to limit the avg. characters per line to a readable amount using columns. |
Specification
Redlined Design Spec
Behaviors
Containers should span 100% the width of their parent until they reach their maximum width. After the max-width is reached, they should remain centered. |
---|