The Tabs and TabPanels components can be positioned wherever you like, e.g. the tab panels can be nested within a Card while the tabs sit above the card.
In cases where you only have a couple of tabs, you may find that the tab strip lacks visual affordance. To address this, you can set the divider prop to “full” on the Tabs component.
If you’ve placed the tab strip and tab content on different backgrounds, the divider line is likely to be redundant visual noise. To hide it, you can set the divider prop to “none” on the Tabs component.
Tabs are horizontally scrollable when they’re too wide to fit on screen. If you’d like to align the tabs with content below them (e.g. when the tab panels are inside a card but the tabs are outside), you can provide a gutter prop to Tabs that accepts a value from Braid’s space scale.
Tabs manage their own state by default. If you’d like to manage the state yourself, you must pass an item prop to each Tab and TabPanel element, as well as selectedItem and onChange props to TabsProvider.