Box

Box is a layout component that separates a group of content from its surroundings.

Usage

Use Box when you have a group of content that needs to be visually separated from other content on the page through padding.

Since the effects of Box are only seen through whitespace, the example has a background color to illustrate how Box works.

Guidelines

• By default, Box padding is set to Medium.
• Box has 20 built in padding sizes that are paired with our Spacing values.
  • 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.