Skip to content
STYLESCAPE

Shortcut List

Examples for the ss-c-shortcut-list module: keyboard cheat sheets as a <dl>, keys in <dt> and their action in <dd>. Bare <kbd> keys reuse the ss-c-kbd look; an outer <kbd> around a combination stays unstyled.

Default

Ctrl + K
Open the command palette
F
Toggle fullscreen
← / →
Previous / next slide
G then H
Go to the home view
HTML 
<dl class="ss-c-shortcut-list">
            <div class="ss-c-shortcut-list__row">
                <dt class="ss-c-shortcut-list__keys"><kbd><kbd>Ctrl</kbd> + <kbd>K</kbd></kbd></dt>
                <dd class="ss-c-shortcut-list__description">Open the command palette</dd>
            </div>
            <div class="ss-c-shortcut-list__row">
                <dt class="ss-c-shortcut-list__keys"><kbd>F</kbd></dt>
                <dd class="ss-c-shortcut-list__description">Toggle fullscreen</dd>
            </div>
            <div class="ss-c-shortcut-list__row">
                <dt class="ss-c-shortcut-list__keys"><kbd>←</kbd> / <kbd>→</kbd></dt>
                <dd class="ss-c-shortcut-list__description">Previous / next slide</dd>
            </div>
            <div class="ss-c-shortcut-list__row">
                <dt class="ss-c-shortcut-list__keys"><kbd>G</kbd> then <kbd>H</kbd></dt>
                <dd class="ss-c-shortcut-list__description">Go to the home view</dd>
            </div>
        </dl>

Grouped

Navigation

Home
First slide
End
Last slide

View

S
Speaker notes
?
Show this help
HTML 
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem">
            <section aria-labelledby="sc-nav">
                <h3 class="ss-c-shortcut-list__heading" id="sc-nav">Navigation</h3>
                <dl class="ss-c-shortcut-list">
                    <div class="ss-c-shortcut-list__row"><dt class="ss-c-shortcut-list__keys"><kbd>Home</kbd></dt><dd class="ss-c-shortcut-list__description">First slide</dd></div>
                    <div class="ss-c-shortcut-list__row"><dt class="ss-c-shortcut-list__keys"><kbd>End</kbd></dt><dd class="ss-c-shortcut-list__description">Last slide</dd></div>
                </dl>
            </section>
            <section aria-labelledby="sc-view">
                <h3 class="ss-c-shortcut-list__heading" id="sc-view">View</h3>
                <dl class="ss-c-shortcut-list">
                    <div class="ss-c-shortcut-list__row"><dt class="ss-c-shortcut-list__keys"><kbd>S</kbd></dt><dd class="ss-c-shortcut-list__description">Speaker notes</dd></div>
                    <div class="ss-c-shortcut-list__row"><dt class="ss-c-shortcut-list__keys"><kbd>?</kbd></dt><dd class="ss-c-shortcut-list__description">Show this help</dd></div>
                </dl>
            </section>
        </div>