Components

Tabs

The Tabs component is used to display a group of tab panels, each with their own content.

Usage

The Tabs component is comprised of two components:

  • TabGroup - a wrapper for grouping related tabs.
  • TabPanel - a tab container that contains a header (the trigger element) and content (code, or any other content, including block components).

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

    ::button
    This tab has a button
    ::

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  [And this one has a link!](/components/tabs).

  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::

TabGroup

Props

contentProps

Options to style all content areas in the current tab group.

  • Type: Object

ContentProps include the shared props listed below:

  • border - default is 1px solid #e0e4ea
  • background - default is initial
  • padding - default is 12px

See here for more information on shared props.

headerPadding

The padding of the tabs header container.

  • Type: string | null
  • Default: 12px

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
---
header-padding: "12px"
---
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
TabGroup Component Props

The padding of the tab header. Accepts string | null.

orientation

The value to determine the orientation of the tab headers.

  • Type: 'vertical' | 'horizontal'
  • Default: horizontal

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
---
orientation: "horizontal"
---
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  Elit labore laboris aute dolore consequat minim ullamco. Nulla officia voluptate ea sunt consectetur esse fugiat id minim nulla aliqua. Ipsum irure exercitation deserunt culpa reprehenderit. Elit adipisicing labore qui enim est aliquip sit non adipisicing sunt ullamco non cillum.
  ::
::
TabGroup Component Props

The value to determine the direction of the tab headers. Accepts 'vertical' | 'horizontal'. Default is 'horizontal'.

headerProps

You can configure common properties for all child Tab Panel headers from the parent Tab Group component by passing the desired settings via the group's headerProps.

Each headerProps child property will be bound to all tab headers in the current group.

Should you desire to customize an individual Tab Panel, you can provide these same options directly to the individual Tab Panel component as top-level props.

  • Type: TabHeaderSharedProps
  • Default: 
    {
  color: 'currentColor',
  padding: '8px',
  margin: '0',
  border: 'none',
  borderRadius: '4px',
  background: 'initial',
  fontSize: '14px',
  fontWeight: 'initial',
  lineHeight: '16px',
  activeColor: 'currentColor',
  activeBackground: '#e0e4ea',
  activeFontWeight: '600',
  disabledColor: '#afb7c5',
  disabledBackground: '#f9fafb',
}

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
---
header-props:
  color: "#000"
  padding: "8px"
  margin: 0
  border: "1px solid #5b615d"
  border-radius: "4px"
  background: "#eee"
  font-size: "14px"
  font-weight: 400
  line-height: "16px"
  active-color: "#ffffff"
  active-background: "#007ac1"
  active-font-weight: 600
  disabled-color: "#afb7c5"
  disabled-background: "#f9fafb"
---
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
TabGroup Component Props
Options to bind to all tab headers in the current tab group.

The border of the element. Accepts string | null.

The border radius of the element. Accepts string | null.

The margin of the component. Accepts string | null.

The text color of the element. Accepts string.

The padding of the component. Accepts string | null.

The background of the component. Accepts string.

Tab header font size.

Tab header font weight.

Tab header line height.

Tab header text color when panel is active.

Tab header background when panel is active.

Tab header font weight when panel is active.

Tab header text color when panel is disabled.

Tab header background when panel is disabled.

Shared Props

The TabGroup component also includes the shared props listed below:

  • border - default is 1px solid #e0e4ea
  • borderRadius - default is 4px
  • margin - default is 0
  • gap - default is 16px
  • width - default is 100%
  • maxWidth - default is 100%
  • styles - default is ''.

See here for more information on shared props.

Slots

default

Use the #default slot to add TabPanel components to display content inside TabGroup.

TabPanel

The Tab Panel provides both the tab header (the header) and the tab content.

The TabPanel must be a used as a direct child of the TabGroup component.

Props

active

A boolean to determine if the Tab Panel is active and content is initially displayed.

The activeColor, activeBackground and activeFontWeight prop values will be applied to the header element if active prop is set to true.

  • Type: boolean
  • Default: false

At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

::tab-group
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  ---
  active: true
  ---
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::

disabled

A boolean to determine if the Tab Panel is disabled (meaning the user cannot click to see the tab content).

The disabledColor and disabledBackground prop values will be applied to the header if disabled prop is set to true.

  • Type: boolean
  • Default: false

At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

::tab-group
  ::tab-panel
  ---
  disabled: true
  ---
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  ---
  active: true
  ---
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::

code

A boolean to indicate the tab content is only displaying a code block to auto-apply some default styles (tab group border and content background).

  • Type: boolean
  • Default: false
interface Example {
  key: string
}

::tab-group
  ::tab-panel
  ---
  code: true
  ---
  #default
  ​```typescript
  interface Example {
  key: string
  }
  ​```

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::

Text to display in the header of the Tab Panel. If the header slot is provided, the slot content takes precedence.

  • Type: string
  • Default: ''

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  ---
  header: "Tab 1"
  ---
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.
  ::

  ::tab-panel
  ---
  header: "Tab 2"
  ---
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.
  ::
::

contentProps

Options to style content area in the current Tab Panel.

ContentProps passed to the Tab Panel will overwrite contentProps passed to the Tab Group component.

  • Type: Object

ContentProps include the shared props listed below:

  • border - default is 1px solid #e0e4ea
  • background - default is initial
  • padding - default is 12px

See here for more information on shared props.

HeaderProps

Shared Props

HeaderProps include the shared props listed below:

  • color - default is currentColor
  • padding - default is 8px
  • margin - default is 0
  • border - default is none
  • borderRadius - default is 4px
  • background - default is initial

See here for more information on shared props.

fontSize

The font size of the header.

  • Type: string
  • Default: 14px

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  ---
  header-props:
    font-size: "16px"
  ---
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
fontWeight

The font weight of the header.

  • Type: string
  • Default: initial

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  ---
  header-props:
    font-weight: "400"
  ---
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
lineHeight

The line height of the header.

  • Type: string
  • Default: 16px

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  ---
  header-props:
    line-height: "16px"
  ---
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
activeColor

The text color of the header when Tab Panel element is active.

  • Type: string
  • Default: currentColor

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  ---
  header-props:
    active-color: "green"
  ---
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
activeBackground

The background of the header when Tab Panel element is active.

  • Type: string
  • Default: #e0e4ea

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  ---
  header-props:
    active-background: "linear-gradient(lightgray, lightblue)"
  ---
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
activeFontWeight

The font weight of the header when Tab Panel element is active.

  • Type: string | null
  • Default: 600

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  ---
  header-props:
    active-font-weight: "700"
  ---
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
disabledColor

The text color of the header when Tab Panel element is disabled.

  • Type: string
  • Default: #afb7c5

At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

::tab-group
  ::tab-panel
  ---
  disabled: true
  header-props:
    disabled-color: "#acbfb1"
  ---
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  ---
  active: true
  ---
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::
disabledBackground

The background color of the header when Tab Panel element is disabled.

  • Type: string
  • Default: #f9fafb

At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

::tab-group
  ::tab-panel
  ---
  disabled: true
  header-props:
    disabled-background: "linear-gradient(lightgray, lightblue)"
  ---
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::

  ::tab-panel
  ---
  active: true
  ---
  #default
  At rutrum cursus suscipit est elit magna pretium accumsan. Non mauris mus massa id habitasse. Phasellus eros eu efficitur vel morbi quisque habitasse. Cursus eu magnis inceptos; lectus fusce mattis sodales auctor. Himenaeos elit sociosqu adipiscing urna nec.

  #header
  Tab 2
  ::
::

Shared Props

The Tab Panel component also includes the shared props listed below:

  • styles - default is ''.

See here for more information on shared props.

Slots

default

Use the #default slot to add content to display when the Tab Panel is active.

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  ---
  header: "Tab 1"
  ---
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.
  ::
::

header

Use the #header slot to provide custom content for the tab header (the trigger element) of the Tab Panel.

Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

::tab-group
  ::tab-panel
  #default
  Lorem ipsum odor amet, consectetuer adipiscing elit. Sit consequat ridiculus porta orci morbi nec integer suspendisse. Blandit tristique lacus varius odio porta sapien. Iaculis tempus dictum ex massa aenean dis phasellus. Mus id sapien laoreet parturient convallis curae neque inceptos. Ante vulputate morbi adipiscing amet hendrerit hac venenatis.

  #header
  Tab 1
  ::
::