Layout

Spacing

Learn how we create spaces in between elements

Download Sketch File

We use custom helper-classes to add vertical spacing in between elements

contents

vertical spacing 1: class='my-1', 10px, 1rem

contents

vertical spacing 2: class='my-2', 20px, 2rem

contents

vertical spacing 3: class='my-3', 30px, 3rem

contents

vertical spacing 4: class='my-4', 40px, 4rem

contents

spacer variables

$spacer:   1rem;
$spacer-x: $spacer;
$spacer-y: $spacer;
$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: $spacer-x,
    y: $spacer-y
  ),
  2: (
    x: ($spacer-x * 2),
    y: ($spacer-y * 2)
  ),
  3: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  ),
  4: (
    x: ($spacer-x * 4),
    y: ($spacer-y * 4)
  ),
…
)

top margin: mt-x

top padding: pt-x

content

bottom padding: pb-x

bottom margin: mb-x

Eventhough you can add space by using helper classes for both top and bottom margin and padding of any elements, we recommend that you only use top margin to space out different elements.

Examples

Top Element

Example Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Top Element

Columns

Datadog's Corpsite uses Bootstrap 4's 12-column grid system

col-1

col-2

col-3

col-4

col-6

col-12

Some Title Here

Subtitle

Section One

Hello

Section One

Hello

Section One

Hello

Section One

Hello

Cards

Since 2019 Q1, Corpsite uses Bootstrap 4's card system

Card with .shadow-card helper class and h4 and p elements

Card Title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat

Card Title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat

Card Title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat

Card Title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat

Another example:

Network

starting at

$5

Per host, per month

Visualize and troubleshoot network traffic

\*Billed annually or $7.20 on-demand

See Details