search

fomantic / Fomantic-UI-Docs

Official Documentation for Fomantic-UI
https://fomantic-ui.com
28 stars 84 forks source link

[label] Examples for keyboard shortcuts using code element #358

Closed jamessampford closed 1 year ago

jamessampford commented 2 years ago

A common feature within online systems may be to list keyboard shortcuts (available to use by javascript) or may want to show a field name in a block of code to stand out a little

The below has a couple of examples that could be included when using the <code> element with labels:

https://jsfiddle.net/b6nhok7m/2/

[I do wonder if the font should be changed as O looks a similar to how 0 looks albeit 0 has the line going through it, also wonder if maybe the padding should be equal]

lubber-de commented 2 years ago

The correct HTML element for such usage is the kbd element instead of code. However the visual result is the same https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd

jamessampford commented 2 years ago

Interesting, wasn't aware there was an HTML element for it. The MDN example looks nice, though doesn't quite fit the FUI look 😝

lubber-de commented 1 year ago

Added by #465