Visibilty

Visibility

Hide or show different elements of your page design based on Foundry's responsive breakpoints. You can choose one, or multiple breakpoints to trigger this tool.

Examples

Now you see me...

Below we've added 6 Cards to a set of columns. Each Card is set to display only at a specific responsive breakpoint. You can resize your browser to see this in action. Additionally we've used Visibility to show an icon at each breakpoint when the Card would not be shown.

Extra Small Breakpoint

Extra Small

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. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Small Breakpoint

Small

Medium Breakpoint

Medium

Large Breakpoint

Large

Extra Large Breakpoint

Extra Large

Extra Extra Large Breakpoint

Extra Extra Large

You have to understand, most people are not ready to be unplugged...

Visibility is more powerful than it might seem at first glance. It can allow you to show or hide content based on the visitor's device or browser width, allowing you to serve up content differently for different sized breakpoints. But, be responsible and thoughtful with how you use it and don't overdo it.

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.

Collapse in Edit Mode

Allows you to collapse the content within the Visibility tool in Edit Mode. This makes for a more tidy, easy to navigate work area when you're not actively working with the content inside of this tool.

General

Breakpoints

Here you have the ability to choose when a page element will be shown or hidden. You can adjust this on a per-breakpoint basis, setting a different visibility at each of the 6 responsive breakpoints.

Additionally you can have breakpoints inherit the setting for the next smallest breakpoint above it as well.

Hold

Within Visibility's Extra Small breakpoint setting you'll find a HOLD option. Enabling this feature will place a hold on the content within the Visibility tool. This prevents the contents of the tool from being previewed or published.

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.