Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Keyboard hints
Essentials

Keyboard hints

Keyboard hints patterns built with StyloftCSS and native HTML.

CSS only1 examplesKeyboard friendly HTML

Kbd

Semantic keyboard hints, separate from actual shortcut handling.

Live preview

Use Ctrl + Enter to run a playground, or Tab to move between controls.

View HTML / PlaygroundHTML source
example.htmlHTML
<p>
  Use <kbd class="sl-kbd">Ctrl</kbd> + <kbd class="sl-kbd">Enter</kbd> to run a
  playground, or <kbd class="sl-kbd">Tab</kbd> to move between controls.
</p>
HTML source · enable JavaScript for the playground4 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.