Space is the distance between elements. The space settings here should be used in the construction of components not defined in Spark, or in arranging combinations of existing Spark components. These settings are defined as variables.
Inset space is a consistent indent on all four sides. Incorporate the inset variables on your containers.
The green border shows the extra small inset of 4px.
The green border shows the small inset of 8px.
The green border shows the medium inset of 16px.
The green border shows the large inset of 32px.
The green border shows the extra large inset of 64px.
// SCSS Variables
$space-inset-xs: 4px 4px 4px 4px;
$space-inset-s: 8px 8px 8px 8px;
$space-inset-m: 16px 16px 16px 16px;
$space-inset-l: 32px 32px 32px 32px;
$space-inset-xl: 64px 64px 64px 64px;
Inset short decreases the top and bottom spacing by 50%. Spark Buttons use the $space-inset-short-l value for padding. This reduces the top and bottom padding of the buttons by 50%. This equates to padding of 16px for the top/bottom and 32px for the right/left.
The green border shows the extra small inset short of 2px 4px 2px 4px.
The green border shows the small inset short of 4px 8px 4px 8px.
The green border shows the medium inset short of 8px 16px 8px 16px.
The green border shows the large inset short of 16px 32px 16px 32px.
The green border shows the extra large inset short of 32px 64px 32px 64px.
// SCSS Variables
$space-inset-short-xs: 2px 4px 2px 4px;
$space-inset-short-s: 4px 8px 4px 8px;
$space-inset-short-m: 8px 16px 8px 16px;
$space-inset-short-l: 16px 32px 16px 32px;
$space-inset-short-xl: 32px 64px 32px 64px;
Inset tall increases the top and bottom padding by 50%.
The green border shows the extra small inset tall of 6px 4px 6px 4px.
The green border shows the small inset tall of 12px 8px 12px 8px.
The green border shows the medium inset tall of 24px 16px 24px 16px.
The green border shows the large inset tall of 48px 32px 48px 32px.
The green border shows the extra large inset tall of 96px 64px 96px 64px.
// SCSS Variables
$space-inset-tall-xs: 6px 4px 6px 4px;
$space-inset-tall-s: 12px 8px 12px 8px;
$space-inset-tall-m: 24px 16px 24px 16px;
$space-inset-tall-l: 48px 32px 48px 32px;
$space-inset-tall-xl: 96px 64px 96px 64px;
Incorporate the stack variables to add a consistent margin bottom to items.
The orange shows the extra small stack spacing of 4px.
The orange shows the small stack spacing of 8px.
The orange shows the medium stack spacing of 16px.
The orange shows the large stack spacing of 32px.
The orange shows the extra large stack spacing of 64px.
// SCSS Variables
$space-stack-xs: 0 0 4px 0;
$space-stack-s: 0 0 8px 0;
$space-stack-m: 0 0 16px 0;
$space-stack-l: 0 0 32px 0;
$space-stack-xl: 0 0 64px 0;
Inline items should be spaced out consistently with right margin directional flow. When there is a component that involves a group of inline items there should be additional CSS written in that component on the :last-child CSS pseudo-class to remove the right margin on the last item in the group. Wrapping inline items should make use of the Stack space settings.
Inline items with xs spacing
CatsDogsBirdsInline items with s spacing
CatsDogsBirdsInline items with m spacing
CatsDogsBirdsInline items with l spacing
CatsDogsBirdsInline items with xl spacing
CatsDogsBirdsInline items with no right margin on the last item.
FishFrogsTurtles
// SCSS Variables
$space-xs: 4px;
$space-s: 8px;
$space-m: 16px;
$space-l: 32px;
$space-xl: 64px;