KBD

Style the native <kbd> element so a key reads as a key. Scoped to .casca: any <kbd> inside a Casca container opts in, no extra classes at the call site. Use it in instructional prose, tables, and inline help text.

Single keys

Press Esc to dismiss. Hold Shift while resizing.

<div class="casca casca-figure">
  <p>Press <kbd>Esc</kbd> to dismiss.</p>
</div>

Combinations

Focus search: Ctrl + K.
Reverse-tab through controls: Shift + Tab.
System palette: Cmd + Shift + P.

<p>Focus search: <kbd>Ctrl</kbd> + <kbd>K</kbd>.</p>

Inside a data table

Action	Shortcut
Open command palette	`Ctrl` + `K`
Save	`Ctrl` + `S`
Close tab	`Ctrl` + `W`
Cancel	`Esc`

<td><kbd>Ctrl</kbd> + <kbd>K</kbd></td>