Mask

Base Foundry stack | New in Foundry v2

Build beautiful, unique sections of content for your pages that are sure to grab your visitor's attention. This highly customizable stack allows you to bring your own style through background images and multiple layer-able masks.

  • Choose from a variety of masks for top and bottom of stack
  • Combine masks for unique styles
  • Configurable height at each breakpoint
  • Custom backgrounds at each breakpoint
  • Use drag-and-drop or remote images for background
  • Set custom background image origin point
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example


Using Mask v2

General

Inner Container
You can choose between a fixed-width for the inner portion of the Mask stack or make it fluid. Fluid allows the contents of the Mask stack to stretch out to the full-width, while fixed-width option allows you to set your own maximum width for the inner content.

Inner Max-Width
Set the maximum width you desire for your content in the Mask stack when using Fixed-Width as your inner container type.

Remove Left & Right Padding
When using the Fluid option of the Inner Container setting you are given the option of whether to remove the outer padding on the left- and right-hand sides of the Mask stack's content container.

Mobile, Table & Desktop Height
The Mask stack allows you to not only set a height for the stack at each of the responsive breakpoints, but it also allows you to choose how the height is measured. You can choose from the following height types at each breakpoint:

  • Pixel (px): A fixed, pixel based height.
  • View Height (vh): A flexible height based on the current height of your visitor's browser or mobile device. Similafr to a percentage based height.
  • Flexible: A flexible height based on the height of the contents you've placed inside of the Mask stack. The more content you place in the stack, the taller it will become.

Hide Top Mask on Mobile
Enabling this feature will hide the masking element(s) at the top of the Mask stack when the page is viewed at the mobile breakpoint.

Hide Bottom Mask on Mobile
Enabling this feature will hide the masking element(s) at the bottom of the Mask stack when the page is viewed at the mobile breakpoint.

Mask Content

Vertically Center Content
When turned on this feature will cause the contents within the Mask stack to center itself vertically between the top and bottom edge of the stack.

Background Overlay
Allows you to add a translucent overlay color that is applied to the Mask stack's background.

Mask Background

Mobile, Tablet & Desktop Style
These three settings allow you to choose the background style for your mask. You can have a different background style at each breakpoint, or allow the tablet and desktop breakpoints to inherit their style from the previous breakpoint's style.

The available options for your per-breakpoint styles are as follows:

  • Presets: You can choose from the Primary, Success, Info, Warning and Danger presets, which are defined in the Foudnry Control Center stack. These options will support Dark Mode if you have it enabled in the Control Center as well.
  • Custom: Use a color picker to choose a solid color for the background.
  • Custom Gradient: Use a set of color pickers to create a custom gradient for the background.
  • Image (drag-and-drop): Drag-and-drop and image into the stack's settings to use an image of your own for the background.
  • Image (remote): Provide a URL to the location of an image on your server use an image of your own for the background from a remote location.

Horizontal Origin v2
Choose to have the center, or origin point, for your image be the left, center or right of your image. This allows you to define the focal point of the image.

Vertical Origin
v2
Choose to have the center, or origin point, for your image be the top, center or bottom of your image. This allows you to define the focal point of the image.


Mask Types

The Mask stack allows you to insert a mask at the top and bottom of the stack. Each mask type can be used in both the top and bottom locations. You may also mix and match mask types, layering multiple masks together. Below we look at each mask type and their individual settings:

Child Stack

Wavy

Wave Type
We provide 15 different preset wave patterns to choose from.

Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.

  • Control Center Site Background (Includes Dark Mode): This option will set the mask element to match the site background color you've configured in your Foundry Control Center stack. If you're using Dark Mode in the Control Center the mask color will change to match the site background.
  • Custom: This option will set the mask element to a custom solid color of your choosing. This color will not change in a Dark Mode environmennt.
  • Custom (Dark Mode): This option will set the mask element to a custom solid color of your choosing. This mode also gives you the option of choosing a second color for Dark Mode.

Child Stack

Point Down

Height
Allows you too set a height for the mask.

Point Location
Adjusting this slider will allow you to change the horizontal center point of the Point Down mask is located.

Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.

  • Control Center Site Background (Includes Dark Mode): This option will set the mask element to match the site background color you've configured in your Foundry Control Center stack. If you're using Dark Mode in the Control Center the mask color will change to match the site background.
  • Custom: This option will set the mask element to a custom solid color of your choosing. This color will not change in a Dark Mode environmennt.
  • Custom (Dark Mode): This option will set the mask element to a custom solid color of your choosing. This mode also gives you the option of choosing a second color for Dark Mode.

Child Stack

Point Up

Height
Allows you too set a height for the mask.

Point Location
Adjusting this slider will allow you to change the horizontal center point of the Point Down mask is located.

Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.

  • Control Center Site Background (Includes Dark Mode): This option will set the mask element to match the site background color you've configured in your Foundry Control Center stack. If you're using Dark Mode in the Control Center the mask color will change to match the site background.
  • Custom: This option will set the mask element to a custom solid color of your choosing. This color will not change in a Dark Mode environmennt.
  • Custom (Dark Mode): This option will set the mask element to a custom solid color of your choosing. This mode also gives you the option of choosing a second color for Dark Mode.

Child Stack

Slant

Overall Height
Allows you too set the overall height for the entirety of the mask.

Left & Right Height
Allows you to set a height for each side independently in order to get a slanted mask effect.

Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.

  • Control Center Site Background (Includes Dark Mode): This option will set the mask element to match the site background color you've configured in your Foundry Control Center stack. If you're using Dark Mode in the Control Center the mask color will change to match the site background.
  • Custom: This option will set the mask element to a custom solid color of your choosing. This color will not change in a Dark Mode environmennt.
  • Custom (Dark Mode): This option will set the mask element to a custom solid color of your choosing. This mode also gives you the option of choosing a second color for Dark Mode.

Child Stack

Rounded

Height
Allows you too set a height for the mask. This also is a determinant as to how round the mask will be.

Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.

  • Control Center Site Background (Includes Dark Mode): This option will set the mask element to match the site background color you've configured in your Foundry Control Center stack. If you're using Dark Mode in the Control Center the mask color will change to match the site background.
  • Custom: This option will set the mask element to a custom solid color of your choosing. This color will not change in a Dark Mode environmennt.
  • Custom (Dark Mode): This option will set the mask element to a custom solid color of your choosing. This mode also gives you the option of choosing a second color for Dark Mode.

Child Stack

Zig Zag

Zig-zag Type
We provide 10 different preset zig-zag patterns to choose from.

Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.

  • Control Center Site Background (Includes Dark Mode): This option will set the mask element to match the site background color you've configured in your Foundry Control Center stack. If you're using Dark Mode in the Control Center the mask color will change to match the site background.
  • Custom: This option will set the mask element to a custom solid color of your choosing. This color will not change in a Dark Mode environmennt.
  • Custom (Dark Mode): This option will set the mask element to a custom solid color of your choosing. This mode also gives you the option of choosing a second color for Dark Mode.

Child Stack

Blocky

Block Type
We provide 10 different preset block patterns to choose from.

Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.

  • Control Center Site Background (Includes Dark Mode): This option will set the mask element to match the site background color you've configured in your Foundry Control Center stack. If you're using Dark Mode in the Control Center the mask color will change to match the site background.
  • Custom: This option will set the mask element to a custom solid color of your choosing. This color will not change in a Dark Mode environmennt.
  • Custom (Dark Mode): This option will set the mask element to a custom solid color of your choosing. This mode also gives you the option of choosing a second color for Dark Mode.

Child Stack

Curve

This child stack mask is a bit more advanced as you'll be adjusting each value manually to get different curved masks.

Height
Allows you too set a height for the mask. This also is a determinant as to how round the mask will be.

Left Start Height
Sets the starting position for your curve on the left-hand side.

Curve 1 X and Y Position
These two values allow you to define the position of the the curve handle that is between the left position and the mid-point.

Mid-point X and Y position
These two values allow you to set the position of the mid-point in your curve.

Curve 2 X and Y Position
These two values allow you to define the position of the the curve handle that is between the right position and the mid-point.

Right Start Height
Sets the starting position for your curve on the right-hand side.

Mask Color
The Mask color allows you to choose how the mask will act, by either matching it to surrounding areas on the page to provide a masked appearance, or using different custom options to create layered looks.

  • Control Center Site Background (Includes Dark Mode): This option will set the mask element to match the site background color you've configured in your Foundry Control Center stack. If you're using Dark Mode in the Control Center the mask color will change to match the site background.
  • Custom: This option will set the mask element to a custom solid color of your choosing. This color will not change in a Dark Mode environmennt.
  • Custom (Dark Mode): This option will set the mask element to a custom solid color of your choosing. This mode also gives you the option of choosing a second color for Dark Mode.
Insight
Endless Combinations

You can combine multiple masks, of varying types, colors and opacities, to create truly unique designs for your site. Layering these different masks can add a lot of personality to your page.