--- title: 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

{{#markdown}} ```html

For example, to close your browser hit Cmd + Q

``` {{/markdown}} *** ### Customize with Sass Keystrokes can easily be customized using our Sass variables

SCSS

{{> examples_keystrokes_variables}} *** ### 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

{{#markdown}} ```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

```html ``` {{/markdown}} *** ##### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

```scss @import "foundation/components/keystrokes"; ```