Classes
Padding follows Currency’s use of BEM naming. To specify padding on one side of an element, include where it should appear, -top, -bottom, -left or -right, followed by the size modifier.
Top Padding
| Class | Value (px) | | .l-padding-top--none | 0 |
| .l-padding-top--xxxsmall | 2 |
| .l-padding-top--xxsmall | 4 |
| .l-padding-top--xsmall | 8 |
| .l-padding-top--small | 12 |
| .l-padding-top--medium | 16 |
| .l-padding-top--large | 24 |
| .l-padding-top--xlarge | 32 |
| .l-padding-top--xxlarge | 48 |
| .l-padding-top--xxxlarge | 64 |
Bottom Padding
| Class | Value (px) | | .l-padding-bottom--none | 0 |
| .l-padding-bottom--xxxsmall | 2 |
| .l-padding-bottom--xxsmall | 4 |
| .l-padding-bottom--xsmall | 8 |
| .l-padding-bottom--small | 12 |
| .l-padding-bottom--medium | 16 |
| .l-padding-bottom--large | 24 |
| .l-padding-bottom--xlarge | 32 |
| .l-padding-bottom--xxlarge | 48 |
| .l-padding-bottom--xxxlarge | 64 |
Left Padding
| Class | Value (px) | | .l-padding-left--none | 0 |
| .l-padding-left--xxxsmall | 2 |
| .l-padding-left--xxsmall | 4 |
| .l-padding-left--xsmall | 8 |
| .l-padding-left--small | 12 |
| .l-padding-left--medium | 16 |
| .l-padding-left--large | 24 |
| .l-padding-left--xlarge | 32 |
| .l-padding-left--xxlarge | 48 |
| .l-padding-left--xxxlarge | 64 |
Right Padding
| Class | Value (px) | | .l-padding-right--none | 0 |
| .l-padding-right--xxxsmall | 2 |
| .l-padding-right--xxsmall | 4 |
| .l-padding-right--xsmall | 8 |
| .l-padding-right--small | 12 |
| .l-padding-right--medium | 16 |
| .l-padding-right--large | 24 |
| .l-padding-right--xlarge | 32 |
| .l-padding-right--xxlarge | 48 |
| .l-padding-right--xxxlarge | 64 |
Vertical Padding
| Class | Value (px) | | .l-padding-vertical--none | 0 |
| .l-padding-vertical--xxxsmall | 2 |
| .l-padding-vertical--xxsmall | 4 |
| .l-padding-vertical--xsmall | 8 |
| .l-padding-vertical--small | 12 |
| .l-padding-vertical--medium | 16 |
| .l-padding-vertical--large | 24 |
| .l-padding-vertical--xlarge | 32 |
| .l-padding-vertical--xxlarge | 48 |
| .l-padding-vertical--xxxlarge | 64 |
Horizontal Padding
| Class | Value (px) | | .l-padding-horizontal--none | 0 |
| .l-padding-horizontal--xxxsmall | 2 |
| .l-padding-horizontal--xxsmall | 4 |
| .l-padding-horizontal--xsmall | 8 |
| .l-padding-horizontal--small | 12 |
| .l-padding-horizontal--medium | 16 |
| .l-padding-horizontal--large | 24 |
| .l-padding-horizontal--xlarge | 32 |
| .l-padding-horizontal--xxlarge | 48 |
| .l-padding-horizontal--xxxlarge | 64 |
Switch to M&T