< Context / Components

Styles

Introduction

Our styles naming and options roughly follow CSS spec.

There are a number of limitations with styling in email, so not every option is available on every element.

Some elements have hover or selected states that can be styled differently to the default. This is only used to override the default, there is no need to duplicate styles.

Leaving values blank mean they will inherit from the parent element in the same way as you'd expect in normal HTML/CSS structure.

Example

"style":{
  "background":{
    "color":"#ff0000"
  },
  "margin":{
    "top":"10",
    "right":"10",
    "bottom":"10",
    "left":"10"
  },
  "padding":{
    "top":"5",
    "right":"5",
    "bottom":"5",
    "left":"5"
  },
  "border":{
    "color": "#00ff00",
    "width": "2",
    "style":"solid",
    "radius": "10"
  },

Styles

height

-number

This is set in px unless editable in heightUnit.

heightUnit

-select

Select the unit to append to the height value, options will vary between elements

width

-number

This is set in px unless editable in widthUnit. May be converted to max-width for responsive layout.

widthUnit

-select

Select the unit to append to the width value, options will vary between elements

minWidth

-number

Minimum width as %

maxWidth

-number

Maximum width as %

breakWidth

-number

Breakpoint in px, used for auto stacking responsive columns

margin

margin.top

-number

This is set in px

margin.right

-number

This is set in px

margin.bottom

-number

This is set in px

margin.left

-number

This is set in px

padding

padding.top

-number

This is set in px

padding.right

-number

This is set in px

padding.bottom

-number

This is set in px

padding.left

-number

This is set in px

background

background.color

-hex

Hex color value

background.image

-url

Images will be uploaded to our image server and optimized for file size, pixel size and format.

background.position

-plain text

Same options as CSS background-position

background.size

-plain text

Same options as CSS background-size

background.repeat

-plain text

Same options as CSS background-repeat

border

border.color

-hex

Hex color value

border.width

-number

This is set in px

border.style

-plain text

Same options as CSS border-style

border.radius

-number

This is set in px

font

font.color

-hex

Hex color value

font.decoration

-plain text

Same options as CSS text-decoration

font.family

-select

Select a font
<!-- we need to fix these, look at webfont options and font stack options -->

font.style

-number

This is set in px

font.weight

-plain text

Same options as CSS font-weight

font.height

-number

This is set in px. Equivalent to CSS line-height

font.size

-number

This is set in px

font.align

-plain text

Same options as CSS text-align

boxShadow

boxShadow.color

-hex

Hex color value

boxShadow.horizontalOffset

-number

This is set in px

boxShadow.verticalOffset

-number
This is set in px

boxShadow.blur

-number
This is set in px

boxShadow.spread

-number
This is set in px

boxShadow.color

-hex
Hex color value

breakpoints

Sets an array of breakpoints to change column widths and hide or show content

breakMin

-number

This is set in px. Sets the min width that this style is applied. Can be combined with breakMax.

breakMax

-number

This is set in px. Sets the max width that this style is applied. Can be combined with breakMin.

width

-number

Sets the width, in the unit provided

widthUnit

-select

Sets the unit to be applied to the width

hide

-boolean

Set to true this hides the content when this breakpoint is applied.

columnGap

-number

This defines the gap between columns set in px

valign

-plain text

Same options as CSS vertical-align

listStyleType

-text

Style for the list bullets.

For ol options are armenian, cjk-ideographic, decimal, decimal-leading-zero, georgian, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-greek, upper-latin, upper-roman

For ul options are disc, circle, square