Skip to content

Tabs

Splits up content into multiple sections, only showing one panel at a time.

Anatomy

  1. Tab Triggers
  2. Active Tab
  3. Tab Panel

Usage Guidelines

Useful for focusing on one section of information at a time.

If you have more than 3 tabs, consider using a different layout for your content.

WordPress

This component can be added to post content with the Tabs or Program Tabs block in the Gutenberg editor.

Program Tabs

Program Tabs allow you to show programs and specializations in either an unordered list or a summary inside of an accordion. You can narrow down which programs/specializations to show via either the Level of Study or Field of Study.

You can also exclude specific programs/specializations from appearing in this Program Tabs component. To do so, navigate to the program/specialization's edit screen, on the right hand side under either Program Details or Specialization Details you will see an option to "Exclude this from the Program Tabs component?". By default this will be "No". Switch it to "Yes" and then save your changes. The program/specialization will now be excluded from this component.

If you'd like to rearrange the order the Program Tabs appear when filtering by Level of Study this can be done by:

  1. navigating to Programs > Level of Study in the wordpress sidebar.
  2. drag and drop your desired order

Training video: https://www.loom.com/share/eca458185038470c9c8bd9f0ba26c092

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
tabsarray Pairs of tab title and panel contentYes-
└ itemobject ---
└ titlestring plain text or HTML content that goes in the tab triggerYes-
└ contentstring Inner HTML content of the tab panelYes-
classstring list of additional classes to apply to main element.No-

Styling

Modifiers

NameClassDescription
Cards.tux-c-tabs--cardsStyles the tabs similar to a card component, while keeping the expand/collapse functionality
Cards Extended.tux-c-tabs--cards.extendedDesigned to be used with card tabs outside of other containers such as a one-column, this 'extended' modifier can be added to allow them to stretch full width while aligning the tab triggers to the standard site width
Wide.tux-c-tabs--wideDesigned to be used with regular tabs outside of other containers such as a one-column, this modifier allows tab panels to fill their container while keeping the tab triggers within the standard site width

Custom Properties

NameDefaultResetsDescription
--tux-c-tabs--tab-bg-colorrgba(136, 136, 136, 0.2)Yes-
--tux-c-tabs--tab-hover-bg-colorrgba(136, 136, 136, 0.3)Yes-
--tux-c-tabs--tab-selected-bg-colorvar(--tux-theme--text-color, #222)Yes-
--tux-c-tabs--tab-selected-text-colorvar(--tux-theme--bg-color, #fff)Yes-
--tux-c-tabs--cards--bg-color#efefefNo-
--tux-c-tabs--cards--tab-active-color#d90123No-

Changelog

6.12.1 (2024-06-12)

  • fix: normalize icon color for card variant in color system v2 (954a6d7)

6.12.1 (2024-06-12)

  • fix: normalize icon color for card variant in color system v2 (954a6d7)

6.10.0 (2024-05-01)

6.6.0 (2024-01-24)

  • feat: add nav arrows to extended card variant (#526) (e5585ef)

6.4.0 (2023-11-27)

  • fix: exit keydown handler early if not in a tab (8c46f50)

6.2.0 (2023-10-04)

  • fix: ensure reusable blocks get unique HTML ids (#479) (7d780fe)

2.1.0 (2022-10-19)

  • fix: add lower z-index to card variation (#332) (f898db3)

1.37.0 (2022-08-18)

  • fix: add zindex support for mobile safari (#301) (eb734ed)

1.32.0 (2022-04-26)

  • fix: exit click handler early if not in a tab (98234c3)

1.28.2 (2022-01-25)

  • fix: only show arrows for card variation (#204) (6c28362)

1.28.0 (2022-01-21)

  • fix: adding right and left carets for mobile scrolling (#197) (cb82950)

1.23.1 (2021-08-20)

  • fix: add correct spacing for sage on mobile (8a7ad3b)
  • fix: apply active color to card bg, add text color option (645e0e7)
  • fix: reference custom property correctly for tablist (214d8a8)
  • fix: support custom colors for artesia (f432a58)

1.22.0 (2021-07-02)

1.21.0 (2021-06-14)

1.20.0 (2021-05-26)

  • fix: adjust flex-basis to prevent scroll when 4 items are used (#99) (82cb423)

1.15.2 (2021-02-03)

  • fix: fixed active indicator bug on Internet Explorer (edcc26d)

1.12.0 (2020-10-21)

1.10.0 (2020-09-11)

  • feat: support prebuilt panels in 'content' attribute (19467e9)

1.7.0 (2020-07-13)

  • fix: adjust styling (c013b18)
  • fix: focus on tab switch with controls only (e8a22fd)

1.1.0

  • tabs added

Contains

Other core components embedded within this template.

Examples

Default

Tab 1 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Tab 2 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Tab 3 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

{{ include( 'components/tabs.twig', {
	tabs: {...}
} ) }}

Card Tabs

Tab 1 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Tab 2 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Tab 3 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

{{ include( 'components/tabs.twig', {
	class: "tux-c-tabs--cards"
	tabs: {...}
} ) }}

Card Tabs Extended

Tab 1 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Tab 2 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Tab 3 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Tab 4 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Tab 5 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Tab 6 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Tab 7 Heading

Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

{{ include( 'components/tabs.twig', {
	class: "tux-c-tabs--cards extended"
	tabs: {...}
} ) }}