Content Toggle

Content Toggle switches between two content areas using a labelled control. Use it to compare two related presentations such as monthly and annual plan details.

Add and configure Content Toggle

1. Click Add, choose Content Toggle, and place it in the container.
2. Set Content > Label > Label Left and Label Right.
3. Use Add Content and populate the Content Toggle – Content children.
4. Configure Design > Layout, Switch, Label, and Spacing.
5. Save your changes.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Label

Setting	Purpose and options	Behavior
Label Left	Enter the label left.	Shared
Label Right	Enter the label right.	Shared
Add Content	Add the child elements offered for this container.	Shared

Design > Layout

Setting	Purpose and options	Behavior
Width	Width.	Responsive
Fade Content	On/off.	Shared

Design > Switch

Setting	Purpose and options	Behavior
Width	Width.	Responsive
Height	Height.	Responsive
Padding	Padding.	Responsive
Radius	Radius and unit.	Responsive
Toggle > Size	Size and unit.	Responsive
Toggle > Radius	Radius and unit.	Responsive
Toggle > Inactive	Color or supported fill.	Shared
Toggle > Active	Color or supported fill.	Shared
Background > Inactive	Color or supported fill.	Shared
Background > Active	Color or supported fill.	Shared
Vertical at	Breakpoint.	Shared

Design > Label

Setting	Purpose and options	Behavior
Typography	typography controls.	See linked controls
Active Color	Color or supported fill.	Shared

Design > Spacing

Setting	Purpose and options	Behavior
Below Toggle	Below toggle and unit.	Responsive
After Labels	After labels and unit.	Responsive
Wrapper	spacing controls.	See linked controls

Troubleshooting