The padder component (lk-padder) is a utility componet intended to be implemented by other components that wish to provide responsive padding properties.
By default the Padder component has no props set.
Props that have a higher degree of specificity will overwrite props with a lower degree of specificity. For example setting padding to content, padding-vertical to compact and padding-bottom to mini will mean that the component has content padding left and right, compact padding top and mini padding bottom.
padding
The padding prop accepts the following arguments:
padding: spacing-vertical() spacing-horizontal().content applies styling equivalent to the CSS padding: spacing-vertical(content) spacing-horizontal(content).compact applies styling equivalent to the CSS padding: spacing-vertical(compact) spacing-horizontal(compact).mini applies styling equivalent to the CSS padding: spacing-vertical(mini) spacing-horizontal(mini).none applies styling equivalent to the CSS padding: 0.padding-vertical
The padding-vertical prop accepts the following arguments:
padding-top: spacing-vertical(); padding-bottom: spacing-vertical().content applies styling equivalent to the CSS padding-top: spacing-vertical(content); padding-bottom: spacing-vertical(content).compact applies styling equivalent to the CSS padding-top: spacing-vertical(compact); padding-bottom: spacing-vertical(compact).mini applies styling equivalent to the CSS padding-top: spacing-vertical(mini); padding-bottom: spacing-vertical(mini).none applies styling equivalent to the CSS padding-top: 0; padding-bottom: 0.padding-horizontal
The padding-horizontal prop accepts the following arguments:
padding-left: spacing-horizontal(); padding-right: spacing-horizontal().content applies styling equivalent to the CSS padding-left: spacing-horizontal(content); padding-right: spacing-horizontal(content).compact applies styling equivalent to the CSS padding-left: spacing-horizontal(compact); padding-right: spacing-horizontal(compact).mini applies styling equivalent to the CSS padding-left: spacing-horizontal(mini); padding-right: spacing-horizontal(mini).none applies styling equivalent to the CSS padding-left: 0; padding-right: 0.padding-top
The padding-top prop accepts the following arguments:
padding-top: spacing-vertical().content applies styling equivalent to the CSS padding-top: spacing-vertical(content).compact applies styling equivalent to the CSS padding-top: spacing-vertical(compact).mini applies styling equivalent to the CSS padding-top: spacing-vertical(mini).none applies styling equivalent to the CSS padding-top: 0.padding-right
The padding-right prop accepts the following arguments:
padding-right: spacing-horizontal().content applies styling equivalent to the CSS padding-right: spacing-horizontal(content).compact applies styling equivalent to the CSS padding-right: spacing-horizontal(compact).mini applies styling equivalent to the CSS padding-right: spacing-horizontal(mini).none applies styling equivalent to the CSS padding-right: 0.padding-bottom
The padding-bottom prop accepts the following arguments:
padding-bottom: spacing-vertical().content applies styling equivalent to the CSS padding-bottom: spacing-vertical(content).compact applies styling equivalent to the CSS padding-bottom: spacing-vertical(compact).mini applies styling equivalent to the CSS padding-bottom: spacing-vertical(mini).remainder-content applies styling equivalent to the CSS padding-bottom: spacing-vertical-remainder(content).remainder-compact applies styling equivalent to the CSS padding-bottom: spacing-vertical-remainder(compact).remainder-compact-content applies styling equivalent to the CSS padding-bottom: spacing-vertical-remainder(compact-content).remainder-mini applies styling equivalent to the CSS padding-bottom: spacing-vertical-remainder(mini).remainder-mini-content applies styling equivalent to the CSS padding-bottom: spacing-vertical-remainder(mini-content).content-remainder-compact applies styling equivalent to the CSS padding-bottom: spacing-vertical-remainder(content, compact).content-remainder-compact-content applies styling equivalent to the CSS padding-bottom: spacing-vertical-remainder(content, compact-content).content-remainder-mini applies styling equivalent to the CSS padding-bottom: spacing-vertical-remainder(content, mini).content-remainder-mini-content applies styling equivalent to the CSS padding-bottom: spacing-vertical-remainder(content, mini-content).compact-remainder-compact-content applies styling equivalent to the CSS padding-bottom: spacing-vertical-remainder(compact, compact-content).compact-remainder-mini applies styling equivalent to the CSS padding-bottom: spacing-vertical-remainder(compact, mini).compact-remainder-mini-content applies styling equivalent to the CSS padding-bottom: spacing-vertical-remainder(compact, mini-content).mini-remainder-mini-content applies styling equivalent to the CSS padding-bottom: spacing-vertical-remainder(mini, mini-content).none applies styling equivalent to the CSS padding-bottom: 0.padding-left
The padding-left prop accepts the following arguments:
padding-left: spacing-horizontal().content applies styling equivalent to the CSS padding-left: spacing-horizontal(content).compact applies styling equivalent to the CSS padding-left: spacing-horizontal(compact).mini applies styling equivalent to the CSS padding-left: spacing-horizontal(mini).none applies styling equivalent to the CSS padding-left: 0.All props of this component can be prefixed with the following prefixes to provide responsive functionality:
sm: will apply when the browser window is >= 576px wide.md: will apply when the browser window is >= 768px wide.lg: will apply when the browser window is >= 992px wide.xl: will apply when the browser window is >= 1200px wide.