Float

Build a magazine-like layout, allowing text to responsively wrap around an image, or other content, using Foundry's Float tool.

Examples

Duis aute irure dolor in reprehenderit in fugiat nulla

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 dolor.

Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Lorem ipsum dolor sit amet labore magna. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod.

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. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Lorem ipsum dolor sit amet labore magna. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod.

Roads? Where we're going, we don't need roads.

In the past we included Float as an addon for Foundry. With this release it has been rolled into the main set of tools as a mainstay.

Don't forget, you can wrap text around more than just images using the Float tool.

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.

Breakpoints

Breakpoint Controls

Each breakpoint has a series of controls for adjusting how the Float tool works to all a great deal of versatility in designing your page.

Each of the responsive breakpoints has its own set of individual controls. Instead of duplicating control information here we've listed just one of the 6 sets of controls, but know that you'll have controls for each breakpoint here in this section.

Breakpoint Name

Here you will choose which side of the parent container the floated content will be aligned. We also offer an option to choose None, which will un-float the content at a breakpoint. The Small through Extra Extra Large breakpoints also offer an Inherit option that inherits the smaller setting before it.

The Extra Small breakpoint defaults to None due to the limited space available at that breakpoint. The Small breakpoint defaults to the Right and all other breakpoints default to inheriting the Small setting.

Width Mode

Allows you to choose how the wrapper element for the Floated content is sized. You can choose to user a percentage based width, a max-width or have it inherit the sizing from the previous, smaller breakpoint(s).

Percentage based widths are measured as a percentage of the parent container. Max-Width is measured in Pixels (px).

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.