Layout & Embellishment Documentation

Layout
A layout is the top level object. It contains 3 properties:

Key Type Required Description

id number Yes Currently there only exists one

layout. Therefore, this value should
always be set to 0.

embellishments EmbellishmentConfig Yes A container object that further

defines all the properties for the
embellishment layer that sits above
the block background and below any
content.

Embellishment Config
An embellishment config has two top level properties:

Key Type Required Description

elements EmbellishmentElementsConfig Yes This is where all your

embellishments are defined
including corners and edges.

container EmbellishmentContainer Yes This is where you specify any

padding that will be applied to the
content that exists within the Tower
block. This padding is not applied to
the elements.

Embellishment Elements Config

Key Type Required Description

topEdges Edge[] Yes Defines a list of edge elements that

are docked to the top edge of the
block, spanning the entire width by
default but may be optionally
overridden.

bottomEdges Edge[] Yes Defines a list of edge elements that

are docked to the bottom edge of
the block, spanning the entire width
by default but may be optionally
overridden.

leftEdges Edge[] Yes Defines a list of edge elements that

are docked to the left edge of the
block, spanning the entire height by
default but may be optionally
overridden.

rightEdges Edge[] Yes Defines a list of edge elements that

are docked to the right edge of the
block, spanning the entire height by
default but may be optionally
overridden.

topLeftCorners Corner[] Yes Defines a list of corners docked to

the top left of the block.

topRightCorners Corner[] Yes Defines a list of corners docked to

the top right of the block.

bottomLeftCorners Corner[] Yes Defines a list of corners docked to

the bottom left of the block.

bottomRightCorners Corner[] Yes Defines a list of corners docked to

the bottom right of the block.
Edge

Key Type Required Description Default value

component Component No Specifies a background

image url.

backgroundColor string No Specify a background color

as a valid CSS color value:
hex, rgba, rgba, etc.

opacity number No Specify opacity as any real 1

number between 0 and 1 (e.
g. 0.5 is 50% opaque)

backgroundRepeat BackgroundRepeat No Sets the repeating behavior Top and bottom: "repeat-
of the background image. x", Left and right: "repeat-
Specify as a string value "no y"
-repeat", "repeat", "re
peat-x", "repeat-y", or
"repeat".

backgroundPositionX CSSLengthUnit (%) No Used to left, center, or right 0 (left)

align the background.
Specifying a numeric value
will use percentages.

backgroundPositionY CSSLengthUnit (%) No Used to top, center, or 0 (top)

bottom align the
background. Specifying a
numeric value will use
percentages.

backgroundSize string No Used to adjust the size of contain

the background. Specify a
string value "cover", "con
tain","(width)%
(height)%", "(width)
px (height)px"(or any
possible unit). Specifiying a
single number will default to
use percentages.

zIndex number No Used to specify the stacking "auto": This is the default
order as an integer. Larger CSS value. Note "auto"is
numbers are higher on the not a valid value to specify
stacking order. Values
should be specified as >= 1,
otherwise the element will
be invisible.

offsetX CSSLengthUnit (px) No Sets a horizontal offset
using margin-left or mar
gin-rightdepending on
where the element is
naturally anchored.
"auto": This has the effect of
centering elements. Note "a
uto"is not a valid value to
specify

offsetY CSSLengthUnit (px) No Sets a vertical offset using m
argin-top or margin-
bottom depending on
where the element is
naturally anchored.
"auto": This has the effect of
centering elements. Note "a
uto"is not a valid value to
specify

transform Transform No Sets transform properties on

element

overrides EdgeOverrides No Specify tablet and desktop

responsive style overrides.

Top Bottom Edge

In addition to the existing Edge properties, top and bottom edges specify a few custom properties with unique requirements.

Key Type Required Description Default value

width CSSLengthUnit (px) No Specifies a pixel width. Spans the entire width of the
block

height CSSLengthUnit (px) Yes Specifies a pixel height. 0

Example:
{
"component": {
"url": "http://assets.digital.vistaprint.com/2671176/icons/icon1.svg"
},
"height": 30,
"offsetY": 5,
"opacity": 0.75
}

Left Right Edge

In addition to the existing Edge properties, left and right edges specify a few custom properties with unique requirements.

Key Type Required Description Default value

width CSSLengthUnit (px) Yes Specifies a pixel width. 0

height CSSLengthUnit (px) No Specifies a pixel height. Spans the entire height of
the block

Example:
{
"component": {
"url": "http://assets.digital.vistaprint.com/2671176/icons/icon1.svg"
},
"width": 50,
"offsetX": -25
}

Corner

Key Type Required Description Default value

component Component No Specifies a background

image url.

backgroundColor string No Specify a background color

as a valid CSS color value:
hex, rgba, rgba, etc.

backgroundRepeat BackgroundRepeat No Sets the repeating behavior Top and bottom: "repeat-
of the background image. x", Left and right: "repeat-
Specify as a string value "no y"
-repeat", "repeat", "re
peat-x", "repeat-y", or
"repeat".

backgroundPositionX CSSLengthUnit (%) No Used to left, center, or right 0 (left)

align the background.
Specifying a numeric value
will use percentages.

backgroundPositionY CSSLengthUnit (%) No Used to top, center, or 0 (top)

bottom align the
background. Specifying a
numeric value will use
percentages.

backgroundSize string No Used to adjust the size of contain

the background. Specify a
string value "cover", "con
tain","(width)%
(height)%", "(width)
px (height)px"(or any
possible unit). Specifiying a
single number will default to
use percentages.

opacity number No Specify opacity as any real 1

number between 0 and 1 (e.
g. 0.5 is 50% opaque).
 zIndex number No Used to specify the stacking "auto": This is the default
order as an integer. Larger CSS value. Note "auto"is
numbers are higher on the not a valid value to specify
stacking order. Values
should be specified as >= 1,
otherwise the element will
be invisible.

offsetX CSSLengthUnit (px) No Sets a horizontal offset
using margin-left or mar
gin-rightdepending on
where the element is
naturally anchored.
"auto": This has the effect of
centering elements. Note "a
uto"is not a valid value to
specify

offsetY CSSLengthUnit (px) No Sets a vertical offset using m
argin-top or margin-
bottom depending on
where the element is
naturally anchored.
"auto": This has the effect of
centering elements. Note "a
uto"is not a valid value to
specify

width CSSLengthUnit (px) Yes Specifies a pixel width. 0

height CSSLengthUnit (px) No Specifies a pixel height. Spans the entire height of
the block

transform Transform No Sets transform properties on

element

overrides CornerOverrides No Specify tablet and desktop

responsive style overrides.

Component
Components are a common element found within edges and corners. They are used to specify background images.

Key Type Required Description

url string Yes Specifies a url to load the

background image.

altId string No Currently unsupported but will allow

for future intergration with
component service.

Transform
Allows modifiction of limited CSS transform values.

Key Type Required Description

mirrorX boolean No Mirrors the element along the X axis

mirrorY boolean No Mirrors the element along the Y axis

rotate number string No

Embellishment Container
Key Type Required Description Default value

paddingLeft CSSLengthUnit (px) No Specifies the amount of left 0

padding applied to the block
content.

paddingRight CSSLengthUnit (px) No Specifies the amount of right 0

padding applied to the block
content.

paddingTop CSSLengthUnit (px) No Specifies the amount of top 0

padding applied to the block
content.

paddingBottom CSSLengthUnit (px) No Specifies the amount of 0

bottom padding applied to
the block content.
 overrides EmbellishmentContaine No Specify tablet and desktop
rOverrides responsive style overrides.

CSSLengthUnit
These are values that can be specified as a unitless number (e.g. 22) or a string with a unit (e.g. "22%", "22em", etc.). Each CSSLengthUnit
property will have its own default behavior whenever values are specified as a number. Some will translate 22 to 22px while others will translate
22 to 22%. The default/numeric behavior is specified in parenthesis.

Overrides (Responsive values)

Embellishments are applied mobile first. This means, all styles specified in the base configuration are applied to the smallest and all the way up to
the largest screen size. You may optionally override these behaviors for tablet and desktop.

Key Type Required Description Default value

tablet Edge, Corner, or Embelli No Specifies properties to

shmentContainer override when the screen
reaches tablet dimensions.
All valid properties here are
the same as the parent
configuration but are treated
as optional.

desktop Edge, Corner, or Embelli No Specifies properties to

shmentContainer override when the screen
reaches desktop
dimensions. All valid
properties here are the
same as the parent
configuration but are treated
as optional.

Example Corner with Overrides

{
"component": {
"url": "http://assets.digital.vistaprint.com/2671176/icons/icon1.svg"
},
"width": 50,
"offsetX": 20,
"offsetY": 20,
"overrides": {
"tablet": {
"width": 75,
"offsetX": 25,
"opacity": 0.5
},
"desktop": {
"offsetY": 40
}
}
}

For mobile devices, this corner will have a background image set to icon1.svg, a width of 50, and X and Y offsets of 20. However, once the
screen reaches a tablet screen size, the existing base (mobile) styles are applied, but the width is overridden to be 75, the X offset to 25, and we
add an opacity value of 0.5 (overriding the inherited default of 1). Finally, once the screen reaches desktop size, all the aforementioned styles
(base + tablet) are applied and the additional Y offset of 40 overrides the original base Y offset of 20.