Switch to M&T
Overview

Padding

Padding is the spacing within an element’s defined borders.

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

ClassValue (px)
.l-padding-top--none0
.l-padding-top--xxxsmall2
.l-padding-top--xxsmall4
.l-padding-top--xsmall8
.l-padding-top--small12
.l-padding-top--medium16
.l-padding-top--large24
.l-padding-top--xlarge32
.l-padding-top--xxlarge48
.l-padding-top--xxxlarge64

Bottom Padding

ClassValue (px)
.l-padding-bottom--none0
.l-padding-bottom--xxxsmall2
.l-padding-bottom--xxsmall4
.l-padding-bottom--xsmall8
.l-padding-bottom--small12
.l-padding-bottom--medium16
.l-padding-bottom--large24
.l-padding-bottom--xlarge32
.l-padding-bottom--xxlarge48
.l-padding-bottom--xxxlarge64

Left Padding

ClassValue (px)
.l-padding-left--none0
.l-padding-left--xxxsmall2
.l-padding-left--xxsmall4
.l-padding-left--xsmall8
.l-padding-left--small12
.l-padding-left--medium16
.l-padding-left--large24
.l-padding-left--xlarge32
.l-padding-left--xxlarge48
.l-padding-left--xxxlarge64

Right Padding

ClassValue (px)
.l-padding-right--none0
.l-padding-right--xxxsmall2
.l-padding-right--xxsmall4
.l-padding-right--xsmall8
.l-padding-right--small12
.l-padding-right--medium16
.l-padding-right--large24
.l-padding-right--xlarge32
.l-padding-right--xxlarge48
.l-padding-right--xxxlarge64

Vertical Padding

ClassValue (px)
.l-padding-vertical--none0
.l-padding-vertical--xxxsmall2
.l-padding-vertical--xxsmall4
.l-padding-vertical--xsmall8
.l-padding-vertical--small12
.l-padding-vertical--medium16
.l-padding-vertical--large24
.l-padding-vertical--xlarge32
.l-padding-vertical--xxlarge48
.l-padding-vertical--xxxlarge64

Horizontal Padding

ClassValue (px)
.l-padding-horizontal--none0
.l-padding-horizontal--xxxsmall2
.l-padding-horizontal--xxsmall4
.l-padding-horizontal--xsmall8
.l-padding-horizontal--small12
.l-padding-horizontal--medium16
.l-padding-horizontal--large24
.l-padding-horizontal--xlarge32
.l-padding-horizontal--xxlarge48
.l-padding-horizontal--xxxlarge64