---
url: /api/css/tabs.panel.md
---
# CSS: tabs.panel

`.panel` — The content panel for a tab (InstUI `Tabs.Panel`).

## Usage

```css
@import "@pantoken/components/components.css";
@import "@pantoken/components/tabs.panel.css";
```

## States

| State | Description |
| --- | --- |
| `:state(hidden)` | — |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-component-tabs-panel-background` | `<color>` | `#00000000` |
| `--instui-component-tabs-panel-border-color` | `<color>` | `light-dark(#8D959F, #6A7883)` |
| `--instui-component-tabs-panel-border-width` | `<length>` | `0.0625rem` |
| `--instui-component-tabs-panel-font-family` | `[ <font-family-name> \| <generic-font-family> ]#` | `Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif` |
| `--instui-component-tabs-panel-font-size` | `<length>` | `1rem` |
| `--instui-component-tabs-panel-font-weight` | `<integer>` | `400` |
| `--instui-component-tabs-panel-line-height` | `<percentage>` | `150%` |
| `--instui-component-tabs-panel-text-color` | `<color>` | `light-dark(#273540, #ffffff)` |
| `--instui-spacing-space-md` | `<length>` | `0.75rem` |
| `--instui-spacing-space-sm` | `<length>` | `0.5rem` |