---
title: Keystrokes
layout: component.html
---
***
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";
```