# Tabs ## Visual Structure ``` ga-tabs [--horizontal|--vertical] [--keyline] ├── ga-tabs__tab [--selected|--disabled|--focused] │ ├── text │ └── ga-tabs__tab-icon (optional) ├── ga-tabs__tab └── ... ``` ## Elements Hierarchy ### Core Block - `ga-tabs` – Main container for the tabs group ### Mandatory Elements - `ga-tabs__tab` – Individual tab item ### Optional Elements - `ga-tabs__tab-icon` – Icon inside a tab (e.g., close or dropdown icon) ### Modifiers - `ga-tabs--horizontal` – Arranges tabs in a horizontal row - `ga-tabs--vertical` – Arranges tabs in a vertical column - `ga-tabs--keyline` – Adds a keyline (underline) to the tabs container - `ga-tabs__tab--selected` – Styles the tab as selected - `ga-tabs__tab--disabled` – Styles the tab as disabled - `ga-tabs__tab--focused` – Styles the tab as focused ## Horizontal Examples ### Default ```html ``` ### With keyline ```html ``` ### With icon ```html ``` ## Vertical Examples ### Default ```html ``` ### With keyline ```html ``` ### With icon ```html ```