# Elements: Overlays, further examples

> Plainkit 0.28.0. Generated by scripts/build-skills.mjs from core/dist/elements/api.full.json. Do not edit: change the source and run the generator.

The element sections in `elements-overlays.md` show the first example of each element; these are the rest.

## `pk-card-menu`

Example: A settings button

```html
<pk-card heading="Panel">
  <pk-card-menu slot="actions" label="Panel settings" icon-name="settings">
    <pk-menu-item value="rename">Rename</pk-menu-item>
    <pk-menu-item value="duplicate">Duplicate</pk-menu-item>
  </pk-card-menu>
  <p>Body.</p>
</pk-card>
```

## `pk-menu-item`

Example: With a description

```html
<div class="stack"><pk-menu-item description="Additive; nothing is deleted.">Import sample data</pk-menu-item><pk-menu-item>Rebuild the index<span slot="description">Takes a minute; the list is empty until it finishes.</span></pk-menu-item></div>
```

Example: With an icon and a badge

```html
<div class="stack"><pk-menu-item><span slot="prefix">&#9993;</span>Inbox<span slot="badge">12</span></pk-menu-item><pk-menu-item><span slot="prefix">&#9873;</span>Flagged</pk-menu-item></div>
```

## `pk-popover`

Example: Confirmation popover

```html
<pk-popover variant="confirm" heading="Delete this line?" message="It cannot be undone." confirm-label="Delete" danger><pk-button slot="trigger" variant="warn">Delete line</pk-button></pk-popover>
```

## `pk-tray`

Example: Tray at the end edge

```html
<pk-button data-open="#inspector-tray" variant="secondary">Open the inspector</pk-button>
<pk-tray id="inspector-tray" label="Inspector" launcher-label="Inspector" edge="end" size="small"><p>Properties go here.</p></pk-tray>
```

Example: A single-icon help launcher: launcher-variant="icon", a pk-icon in the launcher slot

```html
<pk-tray label="Help" launcher-label="Help" launcher-variant="icon" edge="end" size="small"><pk-icon slot="launcher" name="search"></pk-icon><p>Help content goes here.</p></pk-tray>
```