Skip to main content

Keyboard

The <kbd> HTML element HTML element represents computer keyboard interactions. We use them to display keyboard navigation instructions, such as pressing Tab or Enter.

<kbd> elements should have 8px horizontal margins from adjacent text and other elements. They're styled with display: inline-block, so you can use horizontal margin utility classes to adjust spacing on each side. At our body font-size of 16px the Rubik space character is about 4px wide, so you can use m*-4 utilities around text with spaces, and m-*8 on elements without spaces in between them.

Keyboard shortcut

Loading...
Code editor

Data Stories component

Loading...
Code editor

Wrap behavior‚Äč

kbd elements on adjacent lines should not overlap. When marking up key combinations such as Control + Enter, add spacing utilities to the + (e.g. <span class="mx-4">+</span>) to keep kbd elements that wrap to the beginning of a line aligned to the left edge of their container:

Loading...
Code editor