Divider

A tool with a singular purpose – divide content on your pages. It is a great way to organize and clean up your content.

Examples

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.

Solid Divider

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.

Dashed Divider

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.

75% Width

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.

Divider with Badge

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.

Divider with Badge

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.

23_treasure with gold

Because it’s their time. Their time! Up there! Down here, it’s our time. It’s our time down here.

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.

Settings

Edit Mode

Edit Mode Title

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.

Border

Style

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.

Type

Here you can choose the type of line for your Divider. You can choose between solid, dashed or dotted.

Width

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.

Badge

Include Badge

When enabled a Badge will be included on top of the divider line.

Badge Label

This is the text that will be included within the Badge if you've opted to enabled it for this divider.

Alignment

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.

Style

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.

Badge Text

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.

Gradient Overlay

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.

Pill-Shaped

This setting allows you to give a nice rounded pill-like shape to the Badge.

Shadow

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.

HTML Comment

HTML Comment

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.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

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.