> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/tabs/tabs-4.md).

# Tabs #4

### Component Structure

* **TB4 COMPONENT (Section)**: Serves as the main wrapper for the tabs component, facilitating alignment and spacing. It is styled with the CSS class `tb4__component`, which may define height, alignment, or other properties to ensure the component occupies the full viewport height and is centered.
* **TB4 CONTAINER (Container)**: Nested within the TB4 COMPONENT, this container holds the tabs and content sections. It is associated with the `tb4__container` CSS class for additional styling flexibility.
* **TB4 ACCORDEON (Tabs-nested)**: This element acts as the accordion for holding tabs content, ensuring a responsive layout. Styled with `tb4__tabs`, it defines the border, layout direction, and spacing between tabs.
* **TB4 CONTENT (Block)**: These blocks contain the individual content for each tab, hidden or shown based on active tab selection. Each content block is styled with `tb4__content` for consistent borders and padding.
* **TB4 CONTENT INNER (Block)**: Inside each TB4 CONTENT, this layer serves to structure the content further, providing a foundation for images and text. It uses the `tb4__content-inner` class for width, height, and positioning.
* **TB4 IMAGE (Image)**: These elements display images within each content section. The `tb4__image` class applies styles for width, height, and object-fit properties.
* **TB4 TEXT WRAPPER (Div)**: Wraps text elements, such as headings and paragraphs, within the content sections. Styled with `tb4__content-text`, it positions and styles the text content.
* **TB4 MENU (Block)**: Contains the navigation for the tab component, including menu headings and navigation items. Styled with `tb4__menu` for layout adjustments.
* **TB4 MENU TITLE (Div)**: Individual titles within the menu, allowing for interaction with the tabs. These are styled with `tb4__menu-title` for width and positioning.

### Animation Structure

* **TB4 - CONTENT IMAGE**: Targets images within the tabs, animating from a clipped state to fully visible. The animation emphasizes the content's appearance with a subtle scale effect, enhancing visual interest.
* **TB4 - CONTENT TEXT**: Animates the text content's appearance within each tab. It scales and fades text in for a smooth transition, making the content appear dynamically as the tab is selected.

### Events

* **TB4 - IMG**: Utilizes a mutation observer to trigger animations when the tab's content changes. It restarts the "TB4 - CONTENT IMAGE" and "TB4 - CONTENT TEXT" animations, ensuring that content transitions are initiated by user interaction with the tabs.