Tabs Block
Tabbed content container with switchable panels. Choose between underline or pill styles, horizontal or vertical direction. Each tab is a Tab Item Block containing any content.
TWO TAB STYLES
Underline
Overview content is shown here.
Features content.
Pricing content.
Pill
Overview content is shown here.
Features content.
Pricing content.
When to use this block
- Feature comparisons or category-based content
- Pricing plan details with switchable panels
- Settings or documentation with grouped sections
- Any content where only one section should be visible at a time
Style & Direction
Choose the visual style and layout direction. Alignment only applies in horizontal mode.
Layout
Sidebar Panel
Style
Direction
Alignment
VERTICAL DIRECTION
Content panel sits beside the nav in vertical mode.
Second tab panel.
Tab Colors
Separate colors for active and inactive tab labels. Plus background colors for active, inactive, and hover states.
Colors
Sidebar Panel
Inactive Text
#171717
Active Text
#171717
Active Background
#171717
Inactive Background
#F7F7F7
Hover Background
#171717
COLOR APPLICATION
Active tab
Active text + active bg
Inactive tab
Inactive text + inactive bg
Hovered tab
Hover bg applied
Typography
Font size, line height, and weight for all tab labels. Responsive across 3 breakpoints.
Typography
Sidebar Panel
Font Size
px
Line Height
Font Weight
Responsive:
Mobile
Tablet
Desktop
Spacing
Control the gap between tabs, gap between nav and content, tab inner padding, and outer margin.
Spacing
Sidebar Panel
Tab Gap
px
Nav ↔ Content Gap
px
Nav Width
px
Tab Padding
Responsive spacing
tabGap, navContentGap, and navWidth are responsive (3 breakpoints). navWidth and navContentGap only apply in vertical mode.
tabPadding (top/right/bottom/left) is not responsive — same value across all breakpoints.
Borders & Radius
Border controls differ between underline and pill styles. Each has its own set of options.
Underline style
- Active border — color + width of the underline (horizontal) or left line (vertical)
- Nav border — bottom border on the nav row (horizontal only)
Pill style
- Nav border — position, width, color + per-corner radius on the nav container
- Tab border — position, width, color + hover color on each tab
- Active tab border — separate position/width/color for the active tab
- Tab radius — border radius on each tab button
All Available Controls
Tab Style & Direction underline/pill, horizontal/vertical, alignment
tabStyle: "underline" or "pill". tabDirection: "horizontal" or "vertical". tabAlignment: "left", "center", "right" (horizontal only).
Tab Colors active, inactive, hover text + background
fontColor (inactive), activeFontColor (active). activeTabBgColor, inactiveTabBgColor, tabBgHoverColor. navBgColor (pill nav background).
Typography font size, line height, weight — 3 breakpoints
fontSize/lineHeight/fontWeight (+Md/Lg). Font weight uses 9 values (100–900). Applied to .tab-button.
Spacing tab gap, nav gap, nav width, tab padding
tabGap (+Md/Lg): gap between buttons. navContentGap/navWidth (+Md/Lg): vertical mode only. tabPaddingTop/Right/Bottom/Left: not responsive.
Borders & Radius active border, nav border, tab border, radius
Underline: activeBorderColor/Width, navBorderColor/Width. Pill: navBorderPosition/Width/Color, navBorderRadiusTL/TR/BR/BL, tabBorderPosition/Width/Color/tabHoverBorderColor, tabActiveBorderPosition/Width/Color, tabBorderRadius.
Margin outer margin, 3 breakpoints
marginTop/Bottom/Left/Right (+Md/Lg). All in px.