# drawer — Examples

## Authoring

```html
<drawer-ui side="right" size="md">
  <header>
    <span slot="icon">
      <avatar-ui icon="user"></avatar-ui>
    </span>
    <span slot="heading">
      <text-ui strong>Profile</text-ui>
      <badge-ui text="Pro" variant="accent"></badge-ui>
    </span>
    <span slot="description">
      <text-ui color="subtle" size="sm">Update your account</text-ui>
    </span>
  </header>
  <section>...</section>
  <footer>
    <grid-ui>
      <button-ui text="Cancel" variant="ghost"></button-ui>
      <button-ui text="Save" variant="primary"></button-ui>
    </grid-ui>
  </footer>
</drawer-ui>
```

## side

```html
<button-ui text="Left" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
<drawer-ui text="Navigation" side="left" size="sm">
  <section>
    <col-ui gap="1">
      <button-ui text="Dashboard" icon="house" variant="ghost"></button-ui>
      <button-ui text="Projects" icon="folder" variant="ghost"></button-ui>
      <button-ui text="Settings" icon="gear" variant="ghost"></button-ui>
    </col-ui>
  </section>
</drawer-ui>
```

## size

```html
<button-ui text="Small" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
<drawer-ui text="Filters" side="right" size="sm">
  <section>
    <col-ui gap="2">
      <field-ui label="In stock" inline>
        <check-ui checked></check-ui>
      </field-ui>
      <field-ui label="On sale" inline>
        <check-ui></check-ui>
      </field-ui>
      <field-ui label="Free shipping" inline>
        <check-ui></check-ui>
      </field-ui>
    </col-ui>
  </section>
</drawer-ui>
```
