Text Mask

Base Foundry stack | New in Foundry v2

Make creative, unique headers with your own custom background images. Text Mask forms those beautiful background images into gorgeous masked text headers.

  • Custom image backgrounds for headers
  • Use drag-and-drop or remote images
  • Adjust text dsiplay on a per-breakpoint basis
  • Include alternate images for Dark Mode
  • Add elegant drop shadows

Example

Masked

Using Text Mask v2

Text

Text
This is the location where you'll enter your text for your display typography.

Font
Allows you to choose whether to use the Control Center's Base Font for your header or select one of the Typeface stack's font assignments.

Font Weight
Use this control to set the boldness of your header.

Italic
Causes your header text to be italicized.

Uppercase
When enabled all of your header will be uppercased.

Font Size
Allows you to set a different font size for your header at each of the three responsive breakpoints.

Letter Spacing
Adjust the spacing between your header's letters at each of the three responsive breakpoints.

Alignment
You're able to align your header to the left, center or right. By clicking the small (+) button you will be given the ability to adjust the alignment differently at each breakpoint.

Shadow
Choose from several different shadow presets to apply a drop shadow to your header text.

Image

The image you assign to the Text Mask stack in this section will become the internal background for your header text.

Image Type
You're able to choose from 4 different image types for your internal text background image. You can opt to use the drag-and-drop method, which allows RapidWeaver to handle your images, or you can use the remote image setting where you supply a URL to an image on your own server.

Each mode has a Dark Mode variant which allows you to set separate images for your internal text background that will be seen by users who visit your site with Dark Mode enabled in the browser and / or OS.

Alloy Droplet support has been added (as of v2.3.0) to allow you to use an Alloy Droplet tag to set the background image for your Text Mask.

Advanced

Overflow Mode
When this feature is enabled the overflow attribute for the Text Mask stack, and all of its parent stacks, is set to visible. This means that content within the Text Mask stack can overflow out onto other elements of the page. This feature is present to allow the shadow features to overflow the bounds of the stacks without being cropped off. This feature can have negative affects on some stacks, so be aware of this when using it.

Insight
Blank Slate

The Text Mask stack starts out completely blank. To see any options you're applying to the stack you'll want to first and foremost add an image to the stack's settings. Then you'll be able to tweak and tune the stack's settings.