# pane — Examples

## basic

```html
<pane-ui>
  <header>Details</header>
  <section>
    <div data-col>
      <p>This is basic pane content. Click the header to collapse.</p>
    </div>
  </section>
</pane-ui>
```

## collapsed

```html
<pane-ui collapsed>
  <header>Collapsed Pane</header>
  <section>
    <div data-col>
      <p>This content is hidden until the pane is expanded.</p>
    </div>
  </section>
</pane-ui>
```

## resizable

```html
<pane-ui resizable min-width="200" max-width="500" style="width:300px;">
  <header>Resizable</header>
  <section>
    <div data-col>
      <p>Drag the right edge to resize this pane between 200px and 500px.</p>
    </div>
  </section>
</pane-ui>
```
