Rich Tabs Module

All you need to know about the Rich Tabs module and how to use it.

With the introduction of the new module "Rich Tabs," users can now create dynamic and interactive tabs that display multiple types of content in an organized and visually appealing manner. This article will provide an overview of the features available in the Rich Tabs module.


Tab's Title Features

  • Users can create titles for their tabs with the Rich Tabs module.
  • The module provides the option to add an icon to the title.
  • The icon's position can be aligned on the left, top, or right side of the title text.
  • Users can align the title text to the left, center, or right of the tab.

Tab's Content Features

  • The Rich Tabs module provides the option to choose from different content types.
  • Content types available include an image, video, text, or text and image.
  • Users can upload a new image or choose an existing one if an image is selected.
  • If a video is selected, users can add a video and access advanced settings.
  • For text, users can add text and format it.
  • For text and images, users can add heading text, list items, multiline content, buttons, and images.

Styles Features

  • Title Styling options include selecting the title layout with horizontal or vertical orientation.
  • Users can customize the icon's inactive color, active color, and width and the title's inactive color, active color, and font size.
  • Users can add a border to the title with style as left, top, below, box, width, inactive color, and active color.
  • Spacing options are also available, including margin and padding, and set the background color for inactive and active states.
  • Users can also add a shadow effect to the title.

Content Styling

  • Users can customize the text's heading color, list item color, description color, and list item spacing.
  • Users can customize the icon's color to match their brand's look and feel.
  • Button styling options include customizing the button's background, border, text color, spacing, and text transformation as uppercase, capitalize, and lowercase.
  • Users can also add background hover color and text hover color for buttons, allowing them to create interactive tabs that respond to user input.