Keystrokes

If you have keyboard affordances, you might need to explain them to users. For example, to quit your browser hitCmd +Q. (Don't actually type that now - there are more docs to read.) Keystroke is Foundation's simple character affordance tool.

Basic

HTML

<p>For example, to close your browser hit<kbd>Cmd</kbd> +<kbd>Q</kbd></p>

Customize with Sass

Keystrokes can easily be customized using our Sass variables

SCSS

$include-html-keystroke-classes: $include-html-classes;// We use these to control text styles.$keystroke-font:"Consolas","Menlo","Courier", monospace;$keystroke-font-size: inherit;$keystroke-font-color: $jet;$keystroke-font-color-alt: $white;$keystroke-function-factor: -7%;// We use this to control keystroke padding.$keystroke-padding: rem-calc(240);// We use these to control background and border styles.$keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor);$keystroke-border-style: solid;$keystroke-border-width:1px;$keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor);$keystroke-radius: $global-radius;

Semantic Markup With Sass

You can create your own keystrokes using our Sass mixins.

Basic

You can use thekeystroke() mixin to create your own keystroke style, like so:

SCSS

@import"foundation/components/keystrokes";.custom-keystroke-class {// You can set the background color of your keystrokes, which also effects text and border@include keystroke($bg:orange);}

HTML

<kbdclass="custom-keystroke-class"></kbd>

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import"foundation/components/keystrokes";