Docs

Kbd

Use the kbd shortcode to show a keyboard input element.
Overview   Regular Input   Colored Input   Styling   Arguments  

Overview  

Added in v0.19.0     

Use the kbd shortcode to show a keyboard input element.

Regular Input  

Use a positional argument to quickly add a keyboard input element. The following example uses CTRL-C as input.

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

Colored Input  

Use the named arguments text and color to modify the styling of the keyboard input element. The following colors are available.

primary secondary success danger warning info light dark
markdown 
{{< kbd text="primary" color="primary" >}}
{{< kbd text="secondary" color="secondary" >}}
{{< kbd text="success" color="success" >}}
{{< kbd text="danger" color="danger" >}}
{{< kbd text="warning" color="warning" >}}
{{< kbd text="info" color="info" >}}
{{< kbd text="light" color="light" >}}
{{< kbd text="dark" color="dark" >}}

Styling  

The file assets/scss/components/_kbd.scss defines the Hinode-specific styling of the kbd shortcode.

// scss-docs-start kbd
kbd {
    border-radius: #{$theme-border-radius};
}

// scss-docs-end kbd

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
text string, template.HTML, hstring.RenderedString, hstring.HTML v1.0.0      Text to render by the element.
title select v1.0.0      Use text instead. Title of the keyboard input. In shorthand notation, this is the first (and only) matched argument.
Name Type Required Default
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
text string, template.HTML, hstring.RenderedString, hstring.HTML
v1.0.0      Text to render by the element.
title select
v1.0.0      Use text instead. Title of the keyboard input. In shorthand notation, this is the first (and only) matched argument.
On this page