Fuel UX Marketing Cloud Theme

Font

Default

The quick brown foxs jumps over the lazy dog. (Arial, sans-serif)

Serif (.serif)

The quick brown foxs jumps over the lazy dog. (Georgia, "Times New Roman", Times, serif)

Monospace (.monospace)

The quick brown foxs jumps over the lazy dog. (Menlo, Monaco, Consolas, "Courier New", monospace)

Font Color

on white background

default font color (#222222)

.text-dimmed (#4b4b4b)

.text-muted (#757575)

.text-primary (#2075c0)

.text-success (#3c763d)

.text-info (#31708f)

.text-warning (#986000)

.text-danger (#a94442)

on gray background (within .well)

default font color (#222222)

.text-dimmed (#4b4b4b)

.text-muted (#757575)

.text-primary (#2075c0)

.text-success (#3c763d)

.text-info (#31708f)

.text-warning (#986000)

.text-danger (#a94442)

Form Helpers

Section Heading (.section-heading)

Label (.data-label)

Value (.data-value)

Label (.data-label)

Value (.data-value)

Padding

.padding-xs (5px)

.padding-sm (10px)

padding-md (15px)

.padding-lg (20px)

Padding On All Sides

.padding-xs-horizontal (5px)

.padding-sm-horizontal (10px)

.padding-md-horizontal (15px)

.padding-lg-horizontal (20px)

Horizontal Padding Only

.padding-xs-vertical (5px)

.padding-sm-vertical (10px)

.padding-md-vertical (15px)

.padding-lg-vertical (20px)

Vertical Padding Only

Select Padding

You can use any combination of .padding-*-* to target a specific side (top | right | bottom | left).
For example: .padding-lg-top or .padding-xs-bottom

Margin

.margin-xs (5px)

.margin-sm (10px)

.margin-md (15px)

.margin-lg (20px)

Margin On All Sides

.margin-xs-horizontal (5px)

.margin-sm-horizontal (10px)

.margin-md-horizontal (15px)

.margin-lg-horizontal (20px)

Horizontal Margin Only

.margin-xs-vertical (5px)

.margin-sm-vertical (10px)

.margin-md-vertical (15px)

.margin-lg-vertical (20px)

Vertical Margin Only

Select Margin