Block Description

The BS > Tabs Block is a powerful container block used to create interactive tabbed sections on your webpage. The BS > Tabs Block hosts individual Tab Blocks, each containing different content that can be neatly toggled by your site visitors. This is an excellent solution for organizing and displaying a large amount of information in a limited space.

Block Features

The BS > Tabs Block offers a range of customization options:

• The ability to style your tabs or set them as pills.
• An adjustable tab button size and content justification.
• An option to use greedy tabs, which adds overflowing tabs to a dropdown instead of creating a new line.
• Customizable typography and background styles.
• Extensive wrapper styles settings for margins, padding, border color, shadow, position, and display.
• The ability to set an HTML anchor for the block.
• An advanced option to apply additional custom CSS classes.

Block Options

Style

• Tabs Head
  • STYLE (Dropdown): Select the preferred style for the tabs – either as tabs or as pills.
  • TAB BUTTON SIZE (Dropdown): Choose the size of the tab buttons.
  • Greedy Tabs (Checkbox): Enable this to add overflowing tabs to a dropdown menu instead of creating a new line.
  • JUSTIFY CONTENT (Dropdown): Adjust the alignment of the tab buttons.
  • Padding Bottom (Input Field): Adjust the padding at the bottom of the tabs.
• Tab Body Typography
  • TEXT COLOR (Dropdown Color Palette): Select a color for the text within the tab body.
  • Text Justify (Checkbox): Enable or disable text justification for the text within the tab body.
  • TEXT ALIGN (Dropdown): Adjust the alignment of the text within the tab body (left, right, or center).

Advanced

• Background
  • BACKGROUND COLOR (Dropdown Color Palette): Choose a color for the background of the tab body.
  • Fixed Background (Checkbox): Enable this to fix the background image in place while scrolling.
  • Use Featured Image (Checkbox): Enable this to use the post’s featured image as the background.
  • Upload Image (Upload Field): Upload a custom image to use as the background.
• Wrapper Styles
  • Margins (Input Fields): Set the margin values for the top, right, bottom, and left sides of the block.
  • Padding (Input Fields): Adjust the padding values for the top, right, bottom, and left sides of the block.
  • BORDER COLOR (Dropdown Color Palette): Choose a color for the border of the block.
  • SHADOW (Dropdown): Select an intensity level to apply a box shadow to the block.
  • POSITION (Dropdown): Define the block’s position relative to other elements.
  • DISPLAY (Dropdown): Select a display option for the block (e.g., block, inline-block, flex).
• Advanced
  • HTML ANCHOR (Text Input): Enter a unique word or phrase (without spaces) to create a specific web address for this tabs block. This allows you to link directly to the section of your page.
  • ADDITIONAL CSS CLASS(ES) (Text Input): Add one or more custom CSS classes to the block, separated by spaces. These classes can be used to target the block with additional CSS rules in your theme or custom CSS file for further customization.