Copy environment

Vertical Spacing

Helper classes that give top/bottom margin to your element to add vertical spacing.

All classes are defined in format h-margin-[top|bottom]-[$size].

Top Xxxxs 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-top-xxxxs sg-box">h-margin-top-xxxxs</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-top-xxxxs"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--top-xxxxs
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Top Xxxs 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-top-xxxs sg-box">h-margin-top-xxxs</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-top-xxxs"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--top-xxxs
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Top Xxs 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-top-xxs sg-box">h-margin-top-xxs</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-top-xxs"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--top-xxs
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Top Xs 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-top-xs sg-box">h-margin-top-xs</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-top-xs"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--top-xs
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Top Sm 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-top-sm sg-box">h-margin-top-sm</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-top-sm"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--top-sm
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Top Md 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-top-md sg-box">h-margin-top-md</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-top-md"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--top-md
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Top Lg 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-top-lg sg-box">h-margin-top-lg</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-top-lg"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--top-lg
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Top Xl 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-top-xl sg-box">h-margin-top-xl</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-top-xl"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--top-xl
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Top Xxl 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-top-xxl sg-box">h-margin-top-xxl</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-top-xxl"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--top-xxl
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Top Xxxl 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-top-xxxl sg-box">h-margin-top-xxxl</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-top-xxxl"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--top-xxxl
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Bottom Xxxxs 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-bottom-xxxxs sg-box">h-margin-bottom-xxxxs</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-bottom-xxxxs"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--bottom-xxxxs
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Bottom Xxxs 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-bottom-xxxs sg-box">h-margin-bottom-xxxs</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-bottom-xxxs"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--bottom-xxxs
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Bottom Xxs 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-bottom-xxs sg-box">h-margin-bottom-xxs</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-bottom-xxs"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--bottom-xxs
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Bottom Xs 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-bottom-xs sg-box">h-margin-bottom-xs</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-bottom-xs"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--bottom-xs
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Bottom Sm 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-bottom-sm sg-box">h-margin-bottom-sm</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-bottom-sm"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--bottom-sm
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Bottom Md 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-bottom-md sg-box">h-margin-bottom-md</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-bottom-md"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--bottom-md
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Bottom Lg 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-bottom-lg sg-box">h-margin-bottom-lg</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-bottom-lg"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--bottom-lg
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Bottom Xl 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-bottom-xl sg-box">h-margin-bottom-xl</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-bottom-xl"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--bottom-xl
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Bottom Xxl 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-bottom-xxl sg-box">h-margin-bottom-xxl</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-bottom-xxl"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--bottom-xxl
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig

Bottom Xxxl 

<div class="sg-box sg-box--dark"></div>
<div class="h-margin-bottom-xxxl sg-box">h-margin-bottom-xxxl</div>
<div class="sg-box sg-box--dark"></div>
 
<div class="sg-box sg-box--dark"></div>
<div class="{{ class }} sg-box">{{ class }}</div>
<div class="sg-box sg-box--dark"></div>

{
  "language": "en-US",
  "class": "h-margin-bottom-xxxl"
}
  • Content: 
    $definitions: (
    'xxxxs': (
        'xs': 4px,
    ),
    'xxxs': (
        'xs': 8px,
    ),
    'xxs': (
        'xs': 16px,
    ),
    'xs': (
        'xs': 16px,
        'lg': 24px
    ),
    'sm': (
        'xs': 24px,
        'lg': 32px
    ),
    'md': (
        'xs': 32px,
        'lg': 48px
    ),
    'lg': (
        'xs': 32px,
        'lg': 56px
    ),
    'xl': (
        'xs': 48px,
        'lg': 72px
    ),
    'xxl': (
        'xs': 72px,
        'lg': 120px
    ),
    'xxxl': (
        'xs': 120px,
        'lg': 192px
    ),
);

@each $size, $spacings in $definitions {
    .h-margin-top-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-top: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-top: $spacing;
                }
            }
        }
    }

    .h-margin-bottom-#{$size} {
        @each $break, $spacing in $spacings {
            @if $break == 'xs' {
                margin-bottom: $spacing;
            }
            @else {
                @include bp(#{$break}-min) {
                    margin-bottom: $spacing;
                }
            }
        }
    }
}
  • URL: /components/raw/vertical-spacing/vertical-spacing.scss
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.scss
  • Size: 1.2 KB
  • Handle: @vertical-spacing--bottom-xxxl
  • Filesystem Path: src/patterns/utilities/vertical-spacing/vertical-spacing.twig