Box

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

Developer Documentation

Information on how to implement this component is available for the following technologies.

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.