Keystrokes

If you have keyboard affordances, you might need to explain them to users. For example, to quit your browser hit Cmd + 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(2 4 0);

// 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 the keystroke() 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

<kbd class="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";