Spacing and sizing
On this page
All page content should be limited to 1200px wide. Use the $cads-max-content-size variable for setting the width or apply the .cads-max-content-width class to restrict the content of your components on large screen sizes.
Spacing
Spacing variables can be used directly in your SCSS files.
| Variables | Example | Size |
|---|---|---|
| Variables $cads-spacing-1 | Example | Size 4px |
| Variables $cads-spacing-2 | Example | Size 8px |
| Variables $cads-spacing-3 | Example | Size 12px |
| Variables $cads-spacing-4 | Example | Size 16px |
| Variables $cads-spacing-5 | Example | Size 24px |
| Variables $cads-spacing-6 | Example | Size 32px |
| Variables $cads-spacing-7 | Example | Size 40px |
Borders widths
| Variables | Example | Size |
|---|---|---|
| Variables $cads-border-width-small | Example | Size 1px |
| Variables $cads-border-width-medium | Example | Size 2px |
| Variables $cads-border-width-large | Example | Size 4px |
Questions and contributions
All design system discussions take place in the #design-system Slack channel. For current issues, roadmap and other info see the Github project board and related issues.