A tool with a singular purpose – divide content on your pages. It is a great way to organize and clean up your content.
Below we've used the Divider tool to separate several blocks of text and their headers. We've used a variety of divider settings to customize each just slightly.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat.
Spacing out content and dividing it into related sections is the primary goal of Divider. But we've taken it a bit further by adding the ability to include our stylish Bagdes to your dividers to help draw attention to them.
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.
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 border of the Divider. You're also provided an option to choose a custom one-off color as well.
Here you can choose the type of line for your Divider. You can choose between solid, dashed or dotted.
We provide 4 preset widths for your Divider line, ranging from 25% - 100% of the parent container. If one of these presets don't fit your needs you can also set a custom value of your own.
When enabled a Badge will be included on top of the divider line.
This is the text that will be included within the Badge if you've opted to enabled it for this divider.
Here you can choose to align the badge, placed on the divider, to the left, center or right. This alignment is applied uniformly at all 6 responsive breakpoints.
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 inline Badge background text. You're also provided an option to choose a custom one-off color as well.
Use this color picker to set the color of the text within the Badge tool. Allows you to set a complimentary color that works well with your Badge background color.
We provide a quick way to add a subtle light gradient over the Badge. This simply includes a simple translucent white gradient over the button to give it a bit more depth.
This setting allows you to give a nice rounded pill-like shape to the Badge.
Used to add a decorative shadow to the Divider. 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.