Include a unique touch of style to your site using the Rainbow Bar to create visually stunning, responsive dividers composed of up to 10 different colors, and more.
Here we've built a few different Rainbow Bar dividers. The first is a simple example using the segmented mode and several colors from Foundry's extended colors palette.
In this example we've used the same colors as our segmented example, but instead switched to Gradient mode for a very different look and feel.
Dividers don't have to be boring. We think the Rainbow Bar provides a great way to create colorful separation lines within your content. Use segmented designs or gradients, along with your custom color choices to build beautiful dividers.
Rainbow Bar is now more configurable than ever with a greater selection of customization options.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
Here you can choose between either the normal segmented bar style or a gradient bar that combines all enabled colors.
When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.
Here you'll configure the colors for each of the color child items within this parent tool. The colors are configured here, rather than in each individual child item to allow us to form gradients if that mode is enabled.
We provide a quick way to add a subtle light gradient over the Rainbow Bar when using Preset or Custom Styling modes. This simply includes a translucent white gradient over the button to give it a bit more depth.
You're able to fine tune the height of the entire Rainbow Bar divider here. Set a uniform value that will be used at all responsive breakpoints, or click the small + button above this field to set a different height at each individual breakpoint for greater diversity and versatility.
Allows you to choose the unit of measure for the height of your Rainbow Bar divider.
Used to add a decorative shadow on this tool. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.