Content Switcher

Content Switcher is a great way to switch between two or more different content on your page. It can be used in many ways, such as switching between product images, price tables, a list of features, categorized content etc.

Content

Layout: Set the layout from the preset layout Options: Layout 1, Layout 2, and Layout 3.

* Note: Layout 2 and Layout 3 require only two items. and you can add multiple items in Layout 1.

Primary

• Title: Set the title of the primary tab.
• Content: Choose between text editor or template.
  • If the text editor is selected, then a description box appears.
    Text editor: Set the description of the primary tab.
  • If the template option is selected, you can choose from the available templates.
    Template: Choose appropriate template.
• Icon: Place the icon along with the primary tab title.
• Icon position: Set the icon position either left or right.
• Active: Toggle the switch to set the content active on load.

Secondary

• Title: Set the title of the Secondary tab.
• Content: Choose between text editor or template.
  • If the text editor is selected, then a description box appears.
• Text editor: Set the description of the primary tab.
  • If the template option is selected, you can choose from the available templates.
• Template: Choose appropriate template.
• Icon: Place the icon along with the primary tab title.
• Icon position: Set the icon position either left or right.
• Active: Toggle the switch to set the content active on load.

Display

• Switch alignment: Set the alignment of both tabs from left, centre or right.
• Space: Set the space between the Content Switcher title and description.
• Animation speed: Set the animation speed for switching between the primary and secondary tab.

Switch style

Title typography: Set the title typography like font style, size, family, etc.

Normal

• Color: Choose the color of the primary switch tab.
• Icon Color: Choose the icon color of the primary tab.
• Background Color: Choose the background color for the primary and secondary tab.
• Border Color: Choose the border color of the switch.
• Box shadow: Apply the shadow effect to the primary and secondary tab.

Active

Styling controls for the Active state are available under this section.

• Icon Space: Set the space between the title and icon.
• Label Space: Add space to labels.
• Equal Width: Enable to apply equal width (This is available in only Layout 1)
  • Min Width: Set the minimum width.

Box

• Box Color: Choose the color of the box.
• Padding: Set the padding for the box.
• Border: Set the border and border radius of the box.

Switch bar

• Padding: Set the padding for the box.
• Background: Set the background color or background image on the switch bar.
• Border: Set the border and border radius of the box.
• Box shadow: Apply the shadow effect to the switch bar.

Switcher control

* Note: Switcher Control works only for Layout 2 and Layout 3.

• Handler border size: Set the Handler’s border size.
• Slider border size: Set the slider’s border size.

Normal

• Handle Color: Choose the color of the Switcher handle.
• Handle Border Color: Choose the color of the Switcher border.
• Slider Color: Choose the slider color.
• Slider Border Color: Choose the border color of the slider.

Active

Styling controls for the Active state of the Switcher handle are available under this section.

Content style

• Typography: Set the title typography like font style, size, family, etc.
• Background: Set background color or background image of the content.
• Text align: Align your content to the left, right, or centre.
• Border: Set the border and border radius of the content.
• Box shadow: Apply the shadow effect to the content.

Click here to check out a demo page of Content Switcher element.