Tab Widget with tabpanel wrapping div

Tab Widget Example

Apples

No explicit default was set, so per standard functionality this first tabpanel will be shown by default.

Here's a link just to test keyboard tabbing. (it's odd talking about tabs, and tabs.)

Bananas

This is an example of a heading being used to populate the tab's label, while also not removing heading from the tabpanel. This is done by adding the value "keep" to data-atabs-heading.

There are two headings here

The tab is getting its label from the data-atabs-tab-label. The heading is kept in the tabpanel because it does not have the data-atabs-heading attribute.

It wouldn't make much sense

If the contents of a tabpanel contain additional sub headings, it wouldn't make sense to remove the initial heading from the tabpanel. Doing so would create a gap in the heading structure.