Box

Box is an empty container with padding.

Usage

Use Box to create a padded container. The whitespace visually separates elements from each other.

Box is an empty container with padding, so the example with black borders and gray background are for illustrative purposes only.

Guidelines

• Default Box padding is set to Medium (16px, $sprk-space-inset-m).
• Box has 20 built in padding options that follow our Spacing proportions.
  • Flush (0px)
  • Tiny (4px, $sprk-space-inset-xs)
  • Small (8px, $sprk-space-inset-s)
  • Medium (16px, $sprk-space-inset-m)
  • Large (32px, $sprk-space-inset-l)
  • Huge (64px, $sprk-space-inset-xl)
  • Inset Short Tiny (2px 4px 2px 4px, $sprk-space-inset-short-xs)
  • Inset Short Small (4px 8px 4px 8px, $sprk-space-inset-short-s)
  • Inset Short Medium (8px 16px 8px 16px, $sprk-space-inset-short-m)
  • Inset Short Large (16px 32px 16px 32px, $sprk-space-inset-short-l)
  • Inset Short Huge (32px 64px 32px 64px, $sprk-space-inset-short-xl)
  • Inset Tall Tiny (6px 4px 6px 4px, $sprk-space-inset-tall-xs)
  • Inset Tall Small (12px 8px 12px 8px, $sprk-space-inset-tall-s)
  • Inset Tall Medium (24px 16px 24px 16px, $sprk-space-inset-tall-m)
  • Inset Tall Large (48px 32px 48px 32px, $sprk-space-inset-tall-l)
  • Inset Tall Huge (96px 64px 96px 64px, $sprk-space-inset-tall-xl)
  • Misc A (24px, $sprk-space-misc-a)
  • Misc B (40px, $sprk-space-misc-b)
  • Misc C (48px, $sprk-space-misc-c)
  • Misc D (80px, $sprk-space-misc-d)

Anatomy

• Box is an empty container with padding.