Home/Explore/

Keyboard shortcut

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
We use the native kbd tag to display the keyboard shortcut.
⌘ + C
<kbd style="
    /* Background and color */
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.7);

    /* Bottom shadow */
    box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;

    /* Spacing */
    padding: 8px;
">
    ...
</kbd>

Use cases

We can use this pattern with the property list pattern to create shortkey preferences as following:
Cut
⌘ + X
Copy
⌘ + C
Paste
⌘ + V
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!