Component

Tabs

SCSS Location: /styles/scss/partial/_tabs.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

Description

A list of anchor links styled as a tabbed interface which controls the display of page content.

Guidelines

Below 768px the tabs should span the full width of the viewport, and scroll horizontally if the tab content overflows the horizontal bounds of the viewport.

At 768px and above, the tabs should be centered on the page and adhere to 10-column grid dimensions.

To avoid issues with tab title text display, a maximum of 5 tabs should be allowed.

At 768px and above, Static Tabs are positioned above the bottom of the hero section.

Sticky Tabs should become fixed to the top of the viewport as the user scrolls through the Sticky Tab content area.

As users scroll through Sticky Tab content, the URL should be updated with the ID of the corresponding page section, and the tab corresponding to the current visible section should be given the active display state.

When a user clicks on an item in the Sticky Tabs, they should be smoothly scrolled to the top of the corresponding page section.

If a user navigates to a page containing Sticky Tabs, and the URL contains a hash value corresponding to a section on the page, they should be smoothly scrolled to the top of the corresponding page section.

Usage

Static Tabs are used on the following content types:

  • Tabbed Landing
  • Tabbed Detail
  • Tabbed Detail With Under Content
  • Global Detail
  • Ventures Detail

Sticky Tabs are used on the Partner Detail content type.

Who We Are

Whether you're actively seeking a new position or simply exploring other companies, Vertex invites you to learn more about starting or strengthening your career with us. Vertex employees benefit from our compelling Total Rewards philosophy, our innovative focus on wellness and work-life balance, a challenging yet supportive corporate culture, and a demonstrated commitment to professional development. It's how Vertex attracts-and retains-so many talented, innovative professionals.

Sticky Tabs