# header — Examples

## Basic usage

```html
<card-ui>
  <header-ui>
    <text-ui variant="title">Card title</text-ui>
    <button-ui slot="action" icon="dots-three" variant="ghost" size="sm"></button-ui>
  </header-ui>
  <section-ui>
    <text-ui>Card body content.</text-ui>
  </section-ui>
</card-ui>
```

## Inside different container parents

```html
<!-- Card: padded, bordered bottom -->
<card-ui>
  <header-ui>…</header-ui>
</card-ui>
<!-- Drawer: padded, sticky -->
<drawer-ui open>
  <header-ui>…</header-ui>
</drawer-ui>
<!-- Page: prose-aligned, optional sticky-header sentinel -->
<page-ui sticky-header>
  <header-ui>…</header-ui>
</page-ui>
```
