C Kbd

A visual pattern used to allow users to learn how to access actions via keyboard.

Check the Lexicon Keys Pattern for a more in-depth look at the motivations and proper usage of this component.

Base

The c-kbd component provides base size and spacing styles for the kbd HTML element.

1.5rem (24px) minimum width and 1.5rem (24px) tall kbd element with padding-left, padding-right, and border-width: 1px.

Esc, Ctrl, Shift, Alt, ⌘+Shift+P, ⌘P

Code Sample (expand to see it)

<kbd class="c-kbd">Esc</kbd>
<kbd class="c-kbd">Ctrl</kbd>
<kbd class="c-kbd">Shift</kbd>
<kbd class="c-kbd">Alt</kbd>

<!-- This formatting forces browser to render no white space -->
<kbd class="c-kbd">
	<kbd class="c-kbd">&#8984;</kbd><span class="c-kbd-separator">+</span
	><kbd class="c-kbd">Shift</kbd><span class="c-kbd-separator">+</span
	><kbd class="c-kbd">P</kbd>
</kbd>

<kbd class="c-kbd">
	<kbd class="c-kbd">&#8984;</kbd><kbd class="c-kbd">P</kbd>
</kbd>

Nested C Kbd

Nest multiple .c-kbd elements inside a single .c-kbd element to describe a keyboard command comprising of multiple keys.

⌘+Shift+Y, ⌘P, ⌘+Shift+Y, ⌘P

Code Sample (expand to see it)

<!-- This formatting forces browser to render no white space -->
<kbd class="c-kbd">
	<kbd class="c-kbd">&#8984;</kbd><span class="c-kbd-separator">+</span
	><kbd class="c-kbd">Shift</kbd><span class="c-kbd-separator">+</span
	><kbd class="c-kbd">Y</kbd>
</kbd>

<kbd class="c-kbd">
	<kbd class="c-kbd">&#8984;</kbd><kbd class="c-kbd">P</kbd>
</kbd>

<kbd class="c-kbd c-kbd-inline">
	<kbd class="c-kbd">&#8984;</kbd><span class="c-kbd-separator">+</span
	><kbd class="c-kbd">Shift</kbd><span class="c-kbd-separator">+</span
	><kbd class="c-kbd">Y</kbd>
</kbd>

<kbd class="c-kbd c-kbd-inline">
	<kbd class="c-kbd">&#8984;</kbd><kbd class="c-kbd">P</kbd>
</kbd>

⌘ + Shift + Y, ⌘+Shift+Y, ⌘P

Code Sample (expand to see it)

<kbd class="c-kbd">
	<kbd class="c-kbd c-kbd-light">&#8984;</kbd>
	<span class="c-kbd-separator">+</span>
	<kbd class="c-kbd c-kbd-light">Shift</kbd>
	<span class="c-kbd-separator">+</span>
	<kbd class="c-kbd c-kbd-light">Y</kbd>
</kbd>

<!-- This formatting forces browser to render no white space -->
<kbd class="c-kbd c-kbd-light">
	<kbd class="c-kbd">&#8984;</kbd><span class="c-kbd-separator">+</span
	><kbd class="c-kbd">Shift</kbd><span class="c-kbd-separator">+</span
	><kbd class="c-kbd">Y</kbd>
</kbd>

<kbd class="c-kbd c-kbd-dark">
	<kbd class="c-kbd">&#8984;</kbd><kbd class="c-kbd">P</kbd>
</kbd>

C Kbd Monospaced

1.5rem (24px) minimum width and 1.5rem (24px) tall kbd element with no padding and border-width: 1px. This is generally used to display single characters.

⌘, ←, ↑, →, ↓, ⇧, ⌥, ⮐, ⌘N

Code Sample (expand to see it)

<kbd class="c-kbd c-kbd-monospaced">&#8984;</kbd>

<kbd class="c-kbd c-kbd-monospaced">&#8592;</kbd>

<kbd class="c-kbd c-kbd-monospaced">&#8593;</kbd>

<kbd class="c-kbd c-kbd-monospaced">&#8594;</kbd>

<kbd class="c-kbd c-kbd-monospaced">&#8595;</kbd>

<kbd class="c-kbd c-kbd-monospaced">&#8679;</kbd>

<kbd class="c-kbd c-kbd-monospaced">&#8997;</kbd>

<!-- This formatting forces browser to render no white space -->
<kbd class="c-kbd c-kbd-monospaced">
	<kbd class="c-kbd">&#8984;</kbd><kbd class="c-kbd">N</kbd>
</kbd>

C Kbd Inline

No minimum width or height kbd element with padding: 0 and border-width: 0. This is used to display keyboard shortcuts in small spaces such as dropdown-item.

The most robust markup to use is nested kbd elements:

Code Sample (expand to see it)

<kbd class="c-kbd c-kbd-inline">
	<kbd class="c-kbd">key</kbd>
</kbd>

but the markup:

Code Sample (expand to see it)

<kbd class="c-kbd c-kbd-inline">key</kbd>

works as well.

Esc, Ctrl, Shift, Alt, ⌘+Shift+Y, ⌘P

Code Sample (expand to see it)

<kbd class="c-kbd c-kbd-inline">
	<kbd class="c-kbd">Esc</kbd>
</kbd>

<kbd class="c-kbd c-kbd-inline">Ctrl</kbd>

<!-- This formatting forces browser to render no white space -->
<kbd class="c-kbd c-kbd-inline">
	<kbd class="c-kbd">&#8984;</kbd><span class="c-kbd-separator">+</span
	><kbd class="c-kbd">Shift</kbd><span class="c-kbd-separator">+</span
	><kbd class="c-kbd">Y</kbd>
</kbd>

<kbd class="c-kbd c-kbd-inline">
	<kbd class="c-kbd">&#8984;</kbd><kbd class="c-kbd">P</kbd>
</kbd>

C Kbd Group

A container element for grouping text with several kbd elements together. This is also useful inside autofit-col if you don't want several kbd elements to break to a new line.

Press Esc + N to see an amazing effect.

Code Sample (expand to see it)

<span class="c-kbd-group">
	Press
	<kbd class="c-kbd">
		<kbd class="c-kbd">Esc</kbd>
		<span class="c-kbd-separator">+</span>
		<kbd class="c-kbd">N</kbd>
	</kbd>
	to see an amazing effect.
</span>

Color Variants

The color variants are modifier classes added to any of the base components listed above.

C Kbd Light

A color modifier on c-kbd to style the kbd element with dark text, light background and border.

Esc + N, Esc + N

Code Sample (expand to see it)

<kbd class="c-kbd">
	<kbd class="c-kbd c-kbd-light">Esc</kbd>
	<span class="c-kbd-separator">+</span>
	<kbd class="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
</kbd>

<kbd class="c-kbd c-kbd-light">
	<kbd class="c-kbd">Esc</kbd>
	<span class="c-kbd-separator">+</span>
	<kbd class="c-kbd">N</kbd>
</kbd>

C Kbd Dark

A color modifier on c-kbd to style the kbd element with light text, dark background and border.

Esc + N, Esc + N

Code Sample (expand to see it)

<kbd class="c-kbd">
	<kbd class="c-kbd c-kbd-dark">Esc</kbd>
	<span class="c-kbd-separator">+</span>
	<kbd class="c-kbd c-kbd-monospaced c-kbd-dark">N</kbd>
</kbd>

<kbd class="c-kbd c-kbd-dark">
	<kbd class="c-kbd">Esc</kbd>
	<span class="c-kbd-separator">+</span>
	<kbd class="c-kbd">N</kbd>
</kbd>

C Kbd Group Light

A color modifier on c-kbd-group, for use with light backgrounds, that sets the text color to \$secondary. This can be used with c-kbd-light and c-kbd-dark.

Press Esc + N to see an amazing effect.

Code Sample (expand to see it)

<span class="c-kbd-group c-kbd-group-light">
	Press
	<kbd class="c-kbd">
		<kbd class="c-kbd c-kbd-light">Esc</kbd>
		<span class="c-kbd-separator">+</span>
		<kbd class="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
	</kbd>
	to see an amazing effect.
</span>

<span class="c-kbd-group c-kbd-group-light">
	Press
	<kbd class="c-kbd">
		<kbd class="c-kbd c-kbd-dark">Esc</kbd>
		<span class="c-kbd-separator">+</span>
		<kbd class="c-kbd c-kbd-monospaced c-kbd-dark">N</kbd>
	</kbd>
	to see an amazing effect.
</span>

C Kbd Group Dark

A color modifier on c-kbd-group, for use with dark backgrounds, that sets the text color to \$white. This can be used with c-kbd-light and c-kbd-dark.

Press Esc + N to see an amazing effect.

Code Sample (expand to see it)

<span class="c-kbd-group c-kbd-group-dark">
	Press
	<kbd class="c-kbd">
		<kbd class="c-kbd c-kbd-light">Esc</kbd>
		<span class="c-kbd-separator">+</span>
		<kbd class="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
	</kbd>
	to see an amazing effect.
</span>

<span class="c-kbd-group c-kbd-group-dark">
	Press
	<kbd class="c-kbd">
		<kbd class="c-kbd c-kbd-dark">Esc</kbd>
		<span class="c-kbd-separator">+</span>
		<kbd class="c-kbd c-kbd-monospaced c-kbd-dark">N</kbd>
	</kbd>
	to see an amazing effect.
</span>

Size Variants

Size variants are modifier classes added to the base component to change the font size.

C Kbd Sm

c-kbd-sm and c-kbd-group-sm are size modifiers that sets font-size: 0.75rem (12px).

Esc + N

Esc + N

Press Esc + N to see an amazing effect.

Code Sample (expand to see it)

<kbd class="c-kbd c-kbd-sm c-kbd-light">Esc</kbd>
<span class="c-kbd-separator c-kbd-sm">+</span>
<kbd class="c-kbd c-kbd-sm c-kbd-monospaced c-kbd-light">N</kbd>

<kbd class="c-kbd c-kbd-sm">
	<kbd class="c-kbd c-kbd-light">Esc</kbd>
	<span class="c-kbd-separator">+</span>
	<kbd class="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
</kbd>

<span class="c-kbd-group c-kbd-group-sm c-kbd-group-light">
	Press
	<kbd class="c-kbd">
		<kbd class="c-kbd c-kbd-light">Esc</kbd>
		<span class="c-kbd-separator">+</span>
		<kbd class="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
	</kbd>
	to see an amazing effect.
</span>

<span class="c-kbd-group c-kbd-group-sm c-kbd-group-light">
	Press
	<kbd class="c-kbd c-kbd-lg">
		<kbd class="c-kbd c-kbd-light">Esc</kbd>
		<span class="c-kbd-separator">+</span>
		<kbd class="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
	</kbd>
	to see an amazing effect.
</span>

C Kbd Lg

c-kbd-lg and c-kbd-group-lg are size modifiers that sets font-size: 1rem (16px).

Esc + N

Esc + N

Press Esc + N to see an amazing effect.

Code Sample (expand to see it)

<kbd class="c-kbd c-kbd-lg c-kbd-light">Esc</kbd>
<span class="c-kbd-separator c-kbd-lg">+</span>
<kbd class="c-kbd c-kbd-lg c-kbd-monospaced c-kbd-light">N</kbd>

<kbd class="c-kbd c-kbd-lg">
	<kbd class="c-kbd c-kbd-light">Esc</kbd>
	<span class="c-kbd-separator">+</span>
	<kbd class="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
</kbd>

<span class="c-kbd-group c-kbd-group-lg c-kbd-group-light">
	Press
	<kbd class="c-kbd">
		<kbd class="c-kbd c-kbd-light">Esc</kbd>
		<span class="c-kbd-separator">+</span>
		<kbd class="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
	</kbd>
	to see an amazing effect.
</span>

<span class="c-kbd-group c-kbd-group-lg c-kbd-group-light">
	Press
	<kbd class="c-kbd c-kbd-sm">
		<kbd class="c-kbd c-kbd-dark">Esc</kbd>
		<span class="c-kbd-separator">+</span>
		<kbd class="c-kbd c-kbd-monospaced c-kbd-dark">N</kbd>
	</kbd>
	to see an amazing effect.
</span>

Unicode Character List

Standard 0-255 (UTF-8) Character Set

! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ � � � � � � � � � � � � � � � � � � � � � � � � � � � ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ

General Punctuation (U+2000 to U+206F)

‐ ‑ ‒ – — ― ‖ ‗ ‘ ’ ‚ ‛ “ ” „ ‟ † ‡ • ‣ ․ ‥ … ‧ ‰ ‱ ′ ″ ‴ ‵ ‶ ‷ ‸ ‹ › ※ ‼ ‽ ‾ ‿ ⁀ ⁁ ⁂ ⁃ ⁄ ⁅ ⁆ ⁇ ⁈ ⁉ ⁊ ⁋ ⁌ ⁍ ⁎ ⁏ ⁐ ⁑ ⁒ ⁓ ⁔ ⁕ ⁖ ⁗ ⁘ ⁙ ⁚ ⁛ ⁜ ⁝ ⁞

Superscripts and Subscripts (U+2070 to U+209F)

⁰ ⁱ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁺ ⁻ ⁼ ⁽ ⁾ ⁿ ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ₊ ₋ ₌ ₍ ₎ ₐ ₑ ₒ ₓ ₔ

Currency Symbols (U+20A0 to U+20CF)

₠ ₡ ₢ ₣ ₤ ₥ ₦ ₧ ₨ ₩ ₪ ₫ € ₭ ₮ ₯ ₰ ₱ ₲ ₳ ₴ ₵ ₶ ₷ ₸ ₹ ₺ ₻ ₼ ₽ ₾ ₿

Letterlike Symbols (U+2100 to U+214F)

℀ ℁ ℂ ℃ ℄ ℅ ℆ ℇ ℈ ℉ ℊ ℋ ℌ ℍ ℎ ℏ ℐ ℑ ℒ ℓ ℔ ℕ № ℗ ℘ ℙ ℚ ℛ ℜ ℝ ℞ ℟ ℠ ℡ ™ ℣ ℤ ℥ Ω ℧ ℨ ℩ K Å ℬ ℭ ℮ ℯ ℰ ℱ Ⅎ ℳ ℴ ℵ ℶ ℷ ℸ ℹ ℺ ℻ ℼ ℽ ℾ ℿ ⅀ ⅁ ⅂ ⅃ ⅄ ⅅ ⅆ ⅇ ⅈ ⅉ ⅊ ⅋ ⅌ ⅍ ⅎ

Greek Characters (U+0391 to U+03C9)

Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ ΢ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω

Number Forms (U+2150 to U+218F)

⅐ ⅑ ⅒ ⅓ ⅔ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅛ ⅜ ⅝ ⅞ ⅟ Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ Ⅼ Ⅽ Ⅾ Ⅿ ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ ⅺ ⅻ ⅼ ⅽ ⅾ ⅿ ↀ ↁ ↂ Ↄ ↄ ↅ ↆ

Arrows (U+2190 to U+21FF)

← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟ ↠ ↡ ↢ ↣ ↤ ↥ ↦ ↧ ↨ ↩ ↪ ↫ ↬ ↭ ↮ ↯ ↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ↸ ↹ ↺ ↻ ↼ ↽ ↾ ↿ ⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌ ⇍ ⇎ ⇏ ⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟ ⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇧ ⇨ ⇩ ⇪ ⇫ ⇬ ⇭ ⇮ ⇯ ⇰ ⇱ ⇲ ⇳ ⇴ ⇵ ⇶ ⇷ ⇸ ⇹ ⇺ ⇻ ⇼ ⇽ ⇾ ⇿

Supplemental Arrows - A (U+27F0 to U+27FF)

⟰ ⟱ ⟲ ⟳ ⟴ ⟵ ⟶ ⟷ ⟸ ⟹ ⟺ ⟻ ⟼ ⟽ ⟾

Supplemental Arrows - B (U+2900 to U+297F)

⤀ ⤁ ⤂ ⤃ ⤄ ⤅ ⤆ ⤇ ⤈ ⤉ ⤊ ⤋ ⤌ ⤍ ⤎ ⤏ ⤐ ⤑ ⤒ ⤓ ⤔ ⤕ ⤖ ⤗ ⤘ ⤙ ⤚ ⤛ ⤜ ⤝ ⤞ ⤟ ⤠ ⤡ ⤢ ⤣ ⤤ ⤥ ⤦ ⤧ ⤨ ⤩ ⤪ ⤫ ⤬ ⤭ ⤮ ⤯ ⤰ ⤱ ⤲ ⤳ ⤴ ⤵ ⤶ ⤷ ⤸ ⤹ ⤺ ⤻ ⤼ ⤽ ⤾ ⤿ ⥀ ⥁ ⥂ ⥃ ⥄ ⥅ ⥆ ⥇ ⥈ ⥉ ⥊ ⥋ ⥌ ⥍ ⥎ ⥏ ⥐ ⥑ ⥒ ⥓ ⥔ ⥕ ⥖ ⥗ ⥘ ⥙ ⥚ ⥛ ⥜ ⥝ ⥞ ⥟ ⥠ ⥡ ⥢ ⥣ ⥤ ⥥ ⥦ ⥧ ⥨ ⥩ ⥪ ⥫ ⥬ ⥭ ⥮ ⥯ ⥰ ⥱ ⥲ ⥳ ⥴ ⥵ ⥶ ⥷ ⥸ ⥹ ⥺ ⥻ ⥼ ⥽ ⥾ ⥿ ⦀ ⦁ ⦂ ⦃

Mathematical Operators (U+2200 to U+22FF)

∀ ∁ ∂ ∃ ∄ ∅ ∆ ∇ ∈ ∉ ∊ ∋ ∌ ∍ ∎ ∏ ∐ ∑ − ∓ ∔ ∕ ∖ ∗ ∘ ∙ √ ∛ ∜ ∝ ∞ ∟ ∠ ∡ ∢ ∣ ∤ ∥ ∦ ∧ ∨ ∩ ∪ ∫ ∬ ∭ ∮ ∯ ∰ ∱ ∲ ∳ ∴ ∵ ∶ ∷ ∸ ∹ ∺ ∻ ∼ ∽ ∾ ∿ ≀ ≁ ≂ ≃ ≄ ≅ ≆ ≇ ≈ ≉ ≊ ≋ ≌ ≍ ≎ ≏ ≐ ≑ ≒ ≓ ≔ ≕ ≖ ≗ ≘ ≙ ≚ ≛ ≜ ≝ ≞ ≟ ≠ ≡ ≢ ≣ ≤ ≥ ≦ ≧ ≨ ≩ ≪ ≫ ≬ ≭ ≮ ≯ ≰ ≱ ≲ ≳ ≴ ≵ ≶ ≷ ≸ ≹ ≺ ≻ ≼ ≽ ≾ ≿ ⊀ ⊁ ⊂ ⊃ ⊄ ⊅ ⊆ ⊇ ⊈ ⊉ ⊊ ⊋ ⊌ ⊍ ⊎ ⊏ ⊐ ⊑ ⊒ ⊓ ⊔ ⊕ ⊖ ⊗ ⊘ ⊙ ⊚ ⊛ ⊜ ⊝ ⊞ ⊟ ⊠ ⊡ ⊢ ⊣ ⊤ ⊥ ⊦ ⊧ ⊨ ⊩ ⊪ ⊫ ⊬ ⊭ ⊮ ⊯ ⊰ ⊱ ⊲ ⊳ ⊴ ⊵ ⊶ ⊷ ⊸ ⊹ ⊺ ⊻ ⊼ ⊽ ⊾ ⊿ ⋀ ⋁ ⋂ ⋃ ⋄ ⋅ ⋆ ⋇ ⋈ ⋉ ⋊ ⋋ ⋌ ⋍ ⋎ ⋏ ⋐ ⋑ ⋒ ⋓ ⋔ ⋕ ⋖ ⋗ ⋘ ⋙ ⋚ ⋛ ⋜ ⋝ ⋞ ⋟ ⋠ ⋡ ⋢ ⋣ ⋤ ⋥ ⋦ ⋧ ⋨ ⋩ ⋪ ⋫ ⋬ ⋭ ⋮ ⋯ ⋰ ⋱ ⋲ ⋳ ⋴ ⋵ ⋶ ⋷ ⋸ ⋹ ⋺ ⋻ ⋼ ⋽ ⋾ ⋿