Hinode logo
  • About 
  • Docs 
  • Components 
  • Guides 
  • Releases 
  •  
  •    Toggle theme
    •   Light
    •   Dark
    •   Auto
  •  
    •   Light
    •   Dark
    •   Auto
Docs
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Args
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Persona
    • Release
    • Spinner
    • Sub
    • Sup
    • Table
    • Timeline
    • Toast
    • Tooltip
    • YouTube
    • Overview
    • Styles
    • Scripts
    • Icons
    • Partial development
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Args
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Persona
    • Release
    • Spinner
    • Sub
    • Sup
    • Table
    • Timeline
    • Toast
    • Tooltip
    • YouTube
    • Overview
    • Styles
    • Scripts
    • Icons
    • Partial development
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License

Kbd

Share via
Hinode
Link copied to clipboard

Use the kbd shortcode to show a keyboard input element.

On this page
 

  • Overview
  • Arguments
  • Examples

Overview  

Added in v0.19.0   

Use the kbd shortcode to show a keyboard input element. As an example, the following shortcodes shows a simple CTRL-C command.

CTRL-C
markdown
{{< kbd "CTRL-C" >}}

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
class string Class attribute of the keyboard input element.
color select secondary Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black].
title string yes Title of the keyboard input. In shorthand notation, this is the first (and only) matched argument.

Examples  

Set a background color with contrasting foreground color with the color argument.

primary secondary success danger warning info light dark
markdown
{{< kbd title="primary" color="primary" >}}
{{< kbd title="secondary" color="secondary" >}}
{{< kbd title="success" color="success" >}}
{{< kbd title="danger" color="danger" >}}
{{< kbd title="warning" color="warning" >}}
{{< kbd title="info" color="info" >}}
{{< kbd title="light" color="light" >}}
{{< kbd title="dark" color="dark" >}}
Last updated: December 29, 2023 • Move arguments to data structure (e7116fa)
On this page
  • Overview
  • Arguments
  • Examples
Kbd
Kbd
Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
Code licensed MIT, docs CC BY-NC 4.0
Currently v0.23.0-beta4
 
Links
Home 
About 
Docs 
Components 
Releases 
Guides
Getting started 
Developing modules 
Optimization 
Versioning 
Community
Issues   
Discussions   
Contribute 
Hinode
Code copied to clipboard