These two fields allow you to provide an aspect ratio for an element, which will maintain proportional dimensions where the height and width of a box are calculated automatically.

This aspect ratio will be used in the responsive auto sizing.

This style is used to apply filter effects to the background of an element. Here you'll find 8 different buttons to enable these various effects. You can choose any number of these filters to apply to the backdrop.

When each is enabled you'll be provided controls for adjusting to intensity or amount of filter to be applied, allowing you a great deal of control over customizing the effect.

The available backdrop filters are as follows:

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for styling the Background Color of an element. You're also provided an option to choose a custom one-off color as well.

Allows you to select from 3 different gradient modes for styling the Background Gradient of an element. You can choose from the more commong Linear gradient, or opt for a Radial or Conic gradient instead.

When Linear mode is in use you can set the angle for the gradient here. You can choose an anlge anywhere from 0° to 360°. Additionally you can use negative values, in that same range, as well.

Radial Mode offers you the ability to place the center point of the gradient in various locations. By default the gradient begins in the center of the the element and is a circular shape. You can also opt for an elipse instead of a circle. Each shape allows you a variety of positions to choose from.

When using Conic mode you can set the angle for the gradient's start point here. You can choose an anlge anywhere from 0° to 360°.

Gradients need at least two colors. In the Background Gradient style settings the two required colors are our Start & End colors. Here you'll use color pickers to set these color choices. Additionally tou can set the endstops for these colors as well.

The Start and End positions can be set at 0% to 100%, allowing you to move the color to different locations within the gradient.

In addition to the Start and End colors we offer three more optional color stops for your gradients, allowing you to build Background Gradient srtyling that uses up to 5 different color options. You can enable any number of these optional colors.

Much like the Start and End colors each of these additional colors have a color picker for selecting the color as well as a position setting for adjusting the location of that color along the gradient.

This color picker allows you to pick a solid fallback color that will be used if for some reason the visitor's browser does not support gradients. Normally this is set to match the Start or End color, depending on your design and colors.

This drop zone is where you'll provide the main, required image for your background image style. You can use the following file formats in this drop zone, as well as the Retina Image drop zone, below.

Here you can optionally add a Retina Image, in addition to the required normal Image above, for high DPI displays.

This lets us set the origin of the background image. You can force the image to "start" at a specific area of the background using these settings. The most common combination is Center for both settings. This is most often used when the Background Image Sizing setting is set to tile.

The Tile options allow you to choose if you'd like to have the background image repeat, and if so, in what direction(s) you'd like to to repeat.

Here you decide the mehtod that will be used when having the image cover the background of the element. You can choose from the following options.

Here you choose how you wish to apply a border to a page element. You can apply a width value uniformly to all sides, or choose detailed, allowing you to set a different width value for each side independently. We also offer an Inherit mode which keeps this style setting from overriding the width values of the element.

When using Uniform or Detailed modes you'll be provided the appropriate fields for setting the width value(s) for your borders. These values are measured in Pixels (px).

Here you choose how you wish to style the border of your page element. You can apply a border style uniformly to all sides, or choose detailed, allowing you to set a different border style for each side independently. We also offer an Inherit mode which keeps this style setting from overriding the border style of the element.

When using Uniform or Detailed modes you'll be provided the appropriate drop down menus for selecting the border style(s). The available border style modes are listed below:

You can choose how you wish to style the color of the border for your page element. You can apply a color style uniformly to all sides, or choose detailed, allowing you to set a different color style for each side independently. Both of these use color pickers for styling the border color. We also offer a Presets mode, which allows you to use one of Foundry's Preset Colors to style all four sides' color settings. We also offer an Inherit mode which keeps this style setting from overriding the border style of the element.

Allows you to choose whether you'd like to apply rounded corner settings to all four corners uniformly, or whether you wish to customize each of the four corners independently. Depending on which mode you choose you'll be provided the necessary fields to set the values for the corner radii. These values are measured in Pixels (px).

Allows you to add a drop shadow to a page element. You can create a unique shadow style, by setting its vertical and horizontal positioning, its size, spread and color. The positioning, size and spread values are measured in Pixels (px) and a color picker is used for selecting the shadow color.

You can optionally add 2 more drop shadows to your element. Additionaly shadows can often be used to creating more realistic effects or more complex styling. Each can be optionally enabled and are both styled in the same manner as the main drop shadow above by setting their vertical and horizontal positioning, size, spread and color.

The color setting allows you to adjust text color. This drop down allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for styling the Text Color of an element. You're also provided an option to choose a custom one-off color as well.

This property setting breaks an element's content into the specified number of columns. Use this field to set the number of wrapping columns. A good use case for this style is to apply it to a Paragraph for example.

This property replaces an element with a generated value, provided in this field. It can only be used with the pseudo-elements ::after and ::before.

Allows you to apply a specific mouse cursor style to an element. The cursor will be styled to your selection when over the selected element. Here are the available cursor options:

The CSS display property sets whether this element is treated as a block or an inline element and can also define how its child elements are treated. Display can also be used to hide elements as well.

Below is a list of the most common available Display options. Below that we will link to a site where you can research the remaining, less commonly used options for the Display property.

The Fill property is geared toward shapes and text – especially SVGs – to allow you to alter the fill color of elements. This drop down allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for styling the Fill Color of an element. You're also provided an option to choose a custom one-off color as well.

This style is used to apply filter effects to an element drectly. Here you'll find 8 different buttons to enable these various effects. You can choose any number of these filters to apply to your element.

When each is enabled you'll be provided controls for adjusting to intensity or amount of filter to be applied, allowing you a great deal of control over customizing the effect.

The available filters are as follows:

Allows you to apply a font size to an element. This can include the child elements as well if they have not been assigned a specific font size themselves.

This drop down lets you pick the unit of measure for your font size value, above.

Provides you the ability adjust the distance between lines of text within an element. This can include the child elements as well if they have not been assigned a specific line height themselves.

Provides you the ability adjust the distance between letters within the text of an element. This can include the child elements as well if they have not been assigned a specific letter spacing themselves.

Provides you the ability adjust the distance between word within the text of an element. This can include the child elements as well if they have not been assigned a specific word spacing themselves.

Provides you the ability adjust the weight, or boldness, of text within an element. This can include the child elements as well if they have not been assigned a specific line height themselves. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.

Let's you apply a specific height to an element.

Here you can specify the unit of measure you'd like to use in defining the height of your element, above.

Here you can provide a value for adding margin to an element. As the label of this setting suggests, this is a uniform value that will be applie to all sides of the element. You can click the small + icon above this field to open the Detailed settings, allowing you to adjust the margin independently on each of the four sides of your element.

Here you will specify the unit of measure you'd like to use in defining the margin that is applied to your element, above, whether it is Uniform or Detailed.

Use this slider to adjust an element's opacity. The value can be set from 0% to 100%. This is applied to the element and all child elements contained within it.

This setting is used to set the desired behavior for an element's overflow. This affects how content within that element is treated when it would exceed the containing elements bounds. Below are the available options:

Here you can provide a value for adding padding to inside of the element. As the label of this setting suggests, this is a uniform value that will be applied to all sides of the element. You can click the small + icon above this field to open the Detailed settings, allowing you to adjust the padding independently on each of the four sides of your element.

Here you will specify the unit of measure you'd like to use in defining the padding that is applied to your element, above, whether it is Uniform or Detailed.

Here you are able to set how an element is positioned in a page. Some positioning modes interact with others as well. As an example, an Absolute positioned item can be contained by another element that has a Relative position applied to it. Below are the available positioning modes:

Here you can choose which of the positioning properties to use. You can adjust the top, bottom, left and right position values. These are applied to all but the Static mode. When one is enabled you'll be given a field to set the value for this positioning distance.

Allows you to choose the unit of measure for the top, bottom, left and right positioning values.

This setting allows you to align the text of an element to the left, center or right. We've also provided the option of justified text as well. We find this does not normally look good for websites, but have added it to allow more versatility. This can include text within the child elements as well if they have not been assigned a specific alignment themselves.

Determines where the decorative element will be applied. You can choose from Underline, Overline, Underline & Overline together, Line Through and none.

Allows you to adjust the styling of the text decoration. You can choose from one of the following: Solid line, Double line, Dotted line, Dashed line or Wavy line.

Provides the ability to adjust the thickness of the text deocration. The thickness is measured in pixels (px).

The color setting allows you to adjust text deocration color. This drop down allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for styling the Text Decoration of an element. You're also provided an option to choose a custom one-off color as well, which can be set using a color picker.

When enabled you're given the ability to adjust the offset distance of the Underline deocration from the text. You're also able to choose a unit of measure for this adjustment. Note that this offset is onkly applied to Underlines. Overlines and Line Throughs are not affected by this offset value as CSS does not have an adjustment for offsetting their placement.

Allows you to add a drop shadow to a page element's text. You can create a unique shadow style, by setting its vertical and horizontal positioning, its size and color. The positioning and size values are measured in Pixels (px) and a color picker is used for selecting the shadow color.

You can optionally add 2 more drop shadows to your element's text. Additionaly shadows can often be used to creating more realistic effects or more complex styling. Each can be optionally enabled and are both styled in the same manner as the main drop shadow above by setting their vertical and horizontal positioning, size and color.

This property setting specifies how to capitalize an element's text. Below are the available text transform options:

Here you'll find three possible scale settings. These allow you to scale an element relative to its natural state on the page. You can apply your scale in a uniform way, along both the x- and y-axis, or use one of the specific settings targeting one, or the other.

The scale value defaults to 1.0 which is 100% of the element's nartural size. Any thing above 1.0 will make the element larger, and anything below 1.0 will make it smaller. The lowest you can go is 0 (zero). A value of 1.20 would scale your element to be 120%, or 20% larger than its natural size. A scale value of 0.9 for example would make the element 90% of its original size, or 10% smaller.

You can use any number of these three settings in combination.

This setting allows you to reposition an element along the x-axis and / or y-axis.

Allows you to choose the unit of measure that will be applied to the distance values above.

This setting defines a transformation that rotates an element around a fixed point, without deforming it. You're able to rotate the element normally, or to single out specific axiis to rotate around. The values for these roatations can be either negative or positive and may exceed 360° or -360°.

This setting allows you to define a distance between the visitor and the plane, the perspective from which the viewer would be if the 2-dimensional interface were actually 3-dimensional. The interacts with the other transform property settings.

Controls the length of your transition. You can also think of the Duration setting as a sort of Speed setting. The larger the value here the longer the transition takes to complete, which also translates to a slower transition. A shorter value will result in a quicker transition.

Used to delay the transition. The delay period begins when the transition would normally be triggered. This setting is often used to stagger the transitions of several items.

In real life most objects don’t just start and stop instantly, and rarely move at a constant speed. The Easing setting allows us to apply some of this real world feel to transitions. We've provided several styles to help you get the feeling you are after.

Here we can specify which properties of our element that this transition will be applied to. By default the transition will be applied to all properties on our element than can have a transition applied to them. Below is a list of the available properties that we can apply tranistions to:

The Whitespace property helps control how whitespace and line breaks within an element’s text are handled.

Let's you apply a specific, width to an element.

Here you can specify the unit of measure you'd like to use in defining the height of your element, above.

Allows you to adjust the layering of elements using a custom z-index value. An element with z-index value is placed in front, or on top) of an element with a lower value.