Keyboard
Styling for keyboard shortcuts
Keyboard
Go to top
Use .bf-kbd (or a <kbd> element nested inside .bf-elements) to style a
keyboard key.
Single key
Press Esc to close modal.
Conventions
Modifier keys
For Windows, use named modifier keys in order:
- Ctrl
- Shift
- Alt
- Win
For Mac, use glyphs for modifier keys in order:
- ⌃ (Control)
- ⌥ (Option)
- ⇧ (Shift)
- ⌘ (Command)
Arrow keys
Use glyphs: ↑ ↓ ← →
Key combinations
Use one <kbd> element per key, separated by a +.
Windows: Ctrl +
→
Mac: ⌘ + →
In contexts where space is not an issue, like an article guide text, you can include both glyph and key name for increased readability.
You can open the search box by pressing Ctrl + K (Mac: ⌘ Command + K)
.bf-elements
Wrapped in .bf-elements (or .bf-content) the <kbd> element is styled
without the class.
Press Ctrl + B for bold text