Keyboard key
A key drawn as a key, for shortcuts in a hint or a menu — Ctrl + K, Esc, Enter.
-
.aparte-kbd
On this page
html
Press <kbd class="aparte-kbd">Ctrl</kbd> + <kbd class="aparte-kbd">K</kbd> to search,
or <kbd class="aparte-kbd">Esc</kbd> to close..aparte-kbd draws a key: a small raised label in the code typeface, for a shortcut written in a
hint, a menu or a placeholder. The search field of this site shows one.
Customize
Section titled “Customize”| Variable | Default |
|---|---|
--aparte-kbd-bg | var(--aparte-surface-2) |
--aparte-kbd-radius | var(--aparte-radius-sm) |
--aparte-kbd-padding | var(--aparte-space-1) var(--aparte-space-2) |
--aparte-kbd-font-size | var(--aparte-font-size-2xs) |
--aparte-kbd-min-width | var(--aparte-space-8) |
--aparte-kbd-border-bottom-width | var(--aparte-space-1) |
Classes
Section titled “Classes”.aparte-kbd
Accessibility
Section titled “Accessibility”- Put the class on a
<kbd>element, which says to a screen reader that this is keyboard input. Write the key’s name as text (“Ctrl”, “Esc”), not as a symbol alone.