Block Description

The BS > Tab Block is a dynamic component used within the BS > Tabs Block to create individual tab sections in your webpage layout. Each Tab Block serves as a container for different content that can be toggled by the user, providing a neat and efficient way to manage and display information in a limited space.

Block Features

Key features of the BS > Tab Block include:

• The ability to name each tab and link it using an HTML anchor, for easy navigation.
• Customizable background and typography styles.
• Adjustable wrapper styles, including margins, padding, border color, and shadow.
• Options to define the block’s display and position.
• Visibility conditions to control when the tab is visible.
• An advanced option to add custom CSS classes for more intricate styling.

Block Options

Content

• Tab Name
  • NAME (Text Input): Define the name of the tab as it will be displayed to users.
  • HTML ANCHOR (Text Input, Required): Enter a unique word or phrase (without spaces) to create a specific web address for this tab. This HTML anchor is crucial for linking directly to the tab.

Style

• Background
  • BACKGROUND COLOR (Dropdown Color Palette): Choose a color for the background of the tab.
• Typography
  • TEXT COLOR (Dropdown Color Palette): Select a color for the tab name text.
  • Text Justify (Checkbox): Enable or disable text justification for the tab name.
  • TEXT ALIGN (Dropdown): Adjust the alignment of the tab name text (left, right, or center).

Advanced

• 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).
• Visibility Conditions
  • BLOCK VISIBILITY (Dropdown): Set the conditions under which the tab block will be visible to users (e.g., based on user role, time, etc).
• Advanced
  • 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.