Tab PanelReady

The panel which contains content that can be revealed using a tab in the tab group component.

Edit in CodePen
Open in new window
View RTL
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa
    explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.


Slot nameDescription
Default slot

The tab panel content.

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

  • Use the tab panel component within the tab group component.
  • Use both non-interactive and interactive elements within the contents of the tab panel.

Don’t #

  • Don't use the tab panel component outside of the tab group component.
  • Don't obscure important information within a tab panel that isn't revealed by default.

Content guidelines #

When writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

My tasks
My Tasks

Avoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:

The dashboard

Avoid ending tab labels in punctuation:


Use as few words as possible to describe each tab label:

Payments in your clinic

Avoid all caps for tab labels:


Additional considerations #

  • If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.
  • If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the selected option on the related tab component to select the tab but prevent the order of the tabs being affected.


For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines


If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.

Was this page helpful?

Send feedback

We use this feedback to improve our documentation.