We have a number of components that have inset padding, but this ranges from 24px to 32px:
| Component |
Border |
Padding |
Total distance from left edge |
| (Care) card |
1px |
32px |
33px |
| Contents list (item) |
- |
32px |
32px |
| Error summary |
4px |
24px |
28px |
| Expander |
1px |
32px |
33px |
| File upload (upcoming, see #1556) |
2px |
26px |
28px |
| Inset text |
8px |
24px |
32px |
| Notification banner |
4px |
24px |
28px |
| Pagination |
- |
32px |
32px |
| Tabs (panel) |
1px |
24px |
25px |
| Warning callout |
1px |
32px |
33px |
Here is an image that shows these components together:
There may be further differences at narrower breakpoints.
It would be good to standardise the padding we use across components for visual consistency, if nothing else.
We have a number of components that have inset padding, but this ranges from 24px to 32px:
Here is an image that shows these components together:
There may be further differences at narrower breakpoints.
It would be good to standardise the padding we use across components for visual consistency, if nothing else.