Rainbow Bar

Base Foundry stack

Include a unique touch of style to your site using the Rainbow Bar to create visually stunning, responsive dividers.

  • Set the divider height
  • Choose standrad or gradient mode
  • Use color pickers to choose 5 colors

Example

Dark Mode
This last Rainbow Bar stack has Dark Mode enabled and will display different colors when viewed on an OS or browser with Dark Mode turned on.

Using Rainbow Bar

Dark Mode v2

Dark Mode
When enabled you'll be given additional options throughout the Rainbow Bar's settings that allow you to customize the stack's styling for visitors who have Dark Mode enabled in their computer's OS or browser.

  • Please Note: Features marked with the purple moon icon will include color picker(s) for Dark Mode when Dark Mode is enabled.

General

Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Rainbow Bar stack.

Size

Height
Choose how tall you would like your bar to be. You set the Rainbow Bar’s height anywhere between 1 and 100 px high.

Colors

Color 1 - 5
Set each of the 5 colors of the bar individually using the RapidWeaver color picker. You can use the opacity slider in the color picker to make the colors translucent as well.

Styling

Gradient Mode
Instead of having 5 distinct color sections you can opt to blend all five into a solid gradient without the dilleniatieon.