Components on Hinode

Abbr

Thu, 16 Jan 2025 00:00:00 +0000

Overview

Use the abbr shortcode to show the long form of an abbreviation on hover. The abbreviation data is retrieved from a central data file. By default, the shortcode uses data/abbr.yaml with translation support.

HTML html

markdown

{{< abbr HTML >}}
{{< abbr key="html" class="initialism" >}}

Data

Define a file in the data folder that contains the abbreviation data. The format expects the following attributes:

Accordion

Fri, 29 Dec 2023 00:00:00 +0000

Overview

Use the accordion shortcode to show a group of vertically collapsing and expanding items. Add accordion-item inner elements for each accordion item.

Flush

Add .accordion-flush to the class attributes to remove some borders and rounded corners to render accordions edge-to-edge within their parent container.

Accordion Item #1

This is the first item’s accordion body. It supports Markdown content. The item is shown by adding the value show to the class argument.

Accordion Item #2

This is the second item’s accordion body. It too supports Markdown content.

Accordion Item #3

This is the third item’s accordion body.

markdown

{{< accordion id="accordion-flush" class="accordion-flush" >}}
 {{< accordion-item title="Accordion Item #1" >}}
 This is the first item's accordion body. It supports Markdown content. The item is shown by
 adding the value `show` to the `class` argument.
 {{< /accordion-item >}}
 {{< accordion-item title="Accordion Item #2" >}}
 This is the second item's accordion body. It too supports Markdown content.
 {{< /accordion-item >}}
 {{< accordion-item title="Accordion Item #3" >}}
 This is the third item's accordion body.
 {{< /accordion-item >}}
{{< /accordion >}}

Always Open

Set always-open to true to make accordion items stay open when another item is opened.

Alert

Fri, 29 Dec 2023 00:00:00 +0000

Overview

Use the alert shortcode to display a contextual feedback message. The inner content is used as alert text.

Colored Alert

Set color to one of the available theme colors to adjust the appearance of the alert.

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

markdown

{{< alert color="primary" >}}
 A simple primary alert—check it out!
{{< /alert >}}

{{< alert color="secondary" >}}
 A simple secondary alert—check it out!
{{< /alert >}}

{{< alert color="success" >}}
 A simple success alert—check it out!
{{< /alert >}}

{{< alert color="danger" >}}
 A simple danger alert—check it out!
{{< /alert >}}

{{< alert color="warning" >}}
 A simple warning alert—check it out!
{{< /alert >}}

{{< alert color="info" >}}
 A simple info alert—check it out!
{{< /alert >}}

{{< alert color="light" >}}
 A simple light alert—check it out!
{{< /alert >}}

{{< alert color="dark" >}}
 A simple dark alert—check it out!
{{< /alert >}}

Dismissible Alert

Set dismissible to true to allow the user to dismiss the alert.

Animation

Tue, 02 Jan 2024 00:00:00 +0000

Overview

Added in v0.20.4

Use the animation shortcode to show an After Effects animation, powered by Lottie . The Lottie library supports animations that have been exported as JSON with Bodymovin. The animation uses vector graphics and is responsive. The shortcode is a simplified wrapper of the Lottie library that provides basic functionality.

Args

Mon, 23 Jun 2025 00:00:00 +0000

Overview

Added in v0.22.0

Use the args shortcode to generate a table of structured arguments. The argument definitions are expected to be defined in a data file identified by a provided structure name.

Name	Type	Required	Default	Comment
group	string			Name of the group filter. This is typically used when a shortcode and partial have common arguments. The group filter binds a specific argument to a particular group. By default, an argument belongs to all groups.
header-level	int		`3`	v1.0.0 The header level to use for the user-defined type headers.
page	hugolib.pageState, hugolib.pageForRenderHooks, *hugolib.pageForShortcode	yes		Context of the current page.
parent	bool			Flag to filter only arguments that have a parent attribute (either `cascade` or `merge`).
render-type	select		`both`	v1.0.0 Option whether to render arguments, user-defined types, or both. Please note that the arguments will render a link to a user-defined type in any case. Supported values: [`arguments`, `types`, `both`].
structure	string	yes		Name of the data file that contains argument definitions. Supported data formats include JSON, TOML, YAML, and XML. You can omit the file extension. The file should reside in the `data/structures` folder. For bookshop components, add the `bookshop-` prefix to the structure name.

Name	Type	Required	Default	Comment
group	string			Name of the group filter. This is typically used when a shortcode and partial have common arguments. The group filter binds a specific argument to a particular group. By default, an argument belongs to all groups.
header-level	int		`3`	v1.0.0 The header level to use for the user-defined type headers.
page	hugolib.pageState, hugolib.pageForRenderHooks, *hugolib.pageForShortcode	yes		Context of the current page.
parent	bool			Flag to filter only arguments that have a parent attribute (either `cascade` or `merge`).
render-type	select		`both`	v1.0.0 Option whether to render arguments, user-defined types, or both. Please note that the arguments will render a link to a user-defined type in any case. Supported values: [`arguments`, `types`, `both`].
structure	string	yes		Name of the data file that contains argument definitions. Supported data formats include JSON, TOML, YAML, and XML. You can omit the file extension. The file should reside in the `data/structures` folder. For bookshop components, add the `bookshop-` prefix to the structure name.

markdown

{{< args "args" >}}

Data Format

Arguments support the following elements:

Badge

Fri, 29 Dec 2023 00:00:00 +0000

Overview

Added in v0.19.0

Badges can be added to headings. Check the Button component on how to add a badge to a button.

Heading Badges

Badges scale to match the size of the immediate parent element by using relative font sizing and em units. Use Hugo’s curly brackets syntax to apply a heading class.

Breadcrumb

Fri, 29 Dec 2023 00:00:00 +0000

Overview

Use the breadcrumb shortcode to display the current page’s location within the site’s navigational hierarchy.

The following shortcode displays a breadcrumb for the current page.

markdown

{{< breadcrumb >}}

Set path to a specific path to adjust the breadcrumb.

Button Group

Fri, 29 Dec 2023 00:00:00 +0000

Overview

Use the button-group shortcode to display a group of buttons. Add inner <button> elements for each Button Component . As an example, the following shortcode displays a group of three buttons. See the Button Component for additional styling options.

Left Middle Right

markdown

{{< button-group aria-label="Basic example" >}}
 {{< button color="primary" href="#!" >}}Left{{< /button >}}
 {{< button color="primary" href="#!" >}}Middle{{< /button >}}
 {{< button color="primary" href="#!" >}}Right{{< /button >}}
{{< /button-group >}}

Styling

Check the Bootstrap documentation for additional styling options.

Button

Fri, 29 Dec 2023 00:00:00 +0000

Overview

Use the button shortcode to display a button with a hyperlink. The inner content is used as button title. The button supports an optional badge and tooltip.

Stateful Buttons

Set the button-state argument to change the appearance and behavior of the button.

Enabled Disabled Active Inactive

markdown

{{< button color="primary" href="#!" button-state="enabled" >}}Enabled{{< /button >}}
{{< button color="primary" href="#!" button-state="disabled" >}}Disabled{{< /button >}}
{{< button color="primary" href="#!" button-state="active" >}}Active{{< /button >}}
{{< button color="primary" href="#!" button-state="inactive" >}}Inactive{{< /button >}}

Sized Buttons

Set the button-size argument to resize the button.

Card Group

Fri, 29 Dec 2023 00:00:00 +0000

Overview

Added in v0.18.6

Use the card-group shortcode to display a group of cards. Add inner <card> elements for each Card . As an example, the following shortcode displays a group of three cards. See the Card Component for additional styling options.

Bootstrap Framework

Card

Wed, 14 Aug 2024 00:00:00 +0000

Overview

Important

Cards support inner content since release v0.18.6 . As a result, references to the card shortcode must be closed or self-closed.

Use the card shortcode to display a card that links to a content page. When using a rich layout, the card includes a thumbnail (or icon) and a header. As an example, the following shortcode displays a horizontal card that links to the components overview. It includes a custom header and footer. You can use the Card-Group Shortcode to align multiple cards and to position them in a grid.

Carousel

Wed, 14 Aug 2024 00:00:00 +0000

Overview

Added in v0.7.1

Use the carousel shortcode to display a carousel of several images, with similar behavior as the Image . As an example, the following shortcode displays a centered carousel with three slides, 16x9 aspect ratio, and a relative width of 67% on large screens.

Collapse

Wed, 14 Aug 2024 00:00:00 +0000

Overview

Use the collapse shortcode to reveal or hide a panel. The panel can contain both HTML code and plain text. Link a button to the panel by assigning its ID to the collapse attribute. As an example, the following shortcode displays a button that, when clicked, triggers a panel to appear or disappear.

Trigger panel

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

markdown

{{< button collapse-id="collapse-1" >}}
 Trigger panel
{{< /button >}}

{{< collapse id="collapse-1" class="p-3 border rounded" >}}
 Some placeholder content for the collapse component. This panel is *hidden by default* but
 revealed when the user activates the relevant trigger.
{{< /collapse >}}

Styling

Check the Bootstrap documentation for additional styling options.

Command

Fri, 29 Dec 2023 00:00:00 +0000

Overview

Added in v0.5.0

The command shortcode generates terminal output for either bash, powershell, or sql shell languages. The following example generates a block with a default bash command prompt.

export MY_VAR=123

markdown

{{< command >}}
export MY_VAR=123
{{< /command >}}

Examples

Change the style and language of your command prompt with shortcode arguments.

Docs

Wed, 14 Aug 2024 00:00:00 +0000

Overview

Added in v0.8.0

The docs shortcode captures a code snippet from a toml or scss input file. It scans for named markers in a local file. The snippet between the two markers is then rendered using syntax highlighting.

Default Code Snippet

Use the name and file arguments to refer to a code snippet of a file. By default, the shortcode uses the site’s basePath. Provide a path that starts with ./ to use the path of the repository as base path instead.

Example

Fri, 29 Dec 2023 00:00:00 +0000

Overview

Added in v0.8.0

The example shortcode displays a code example and renders a preview of the same input. The shortcode accepts the languages supported by Hugo’s highlight function .

Hugo Code Example

Set the lang argument to hugo to render a Hugo code example. Be sure to escape the input with /* and */ delimiters to avoid rendering issues.

File

Wed, 14 Aug 2024 00:00:00 +0000

Overview

Added in v0.16.0

The file shortcode prints and highlights the full content of a given input file. It recognizes the languages supported by Hugo’s highlight function .

Default File Preview

Use the file argument to print the content of a specific file. By default, the shortcode uses the site’s basePath. Provide a path that starts with ./ to use the path of the repository as base path instead.

Icon

Wed, 14 Aug 2024 00:00:00 +0000

Overview

Added in v0.8.0

Hinode includes support for Font Awesome by default. This library provides both a free icon set, as well as utility functions to modify the appearance. You can also provide custom icons in the svg format. Use the icon shortcode to quickly add a Font Awesome or custom icon to your content. You can also use fa for regular icons, fab for brand icons, and fas for solid icons.

Image

Sat, 17 Aug 2024 00:00:00 +0000

Overview

Use the image shortcode to display a responsive image with an optional aspect ratio. The source link can refer to either an image available in the /assets/img folder of your site or a public web location. The shortcode renders the image as a so-called image set to optimize the image for different screen sizes and resolutions.

Ins

Fri, 13 Dec 2024 00:00:00 +0000

Overview

Added in 0.27.13

As an example, the following shortcode displays underlined text.

This is an underlined text.

markdown

This is an {{< ins >}}underlined text{{< /ins >}}.

Arguments

The shortcode does not support any arguments.

Kbd

Fri, 29 Dec 2023 00:00:00 +0000

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.

Link

Sat, 17 Aug 2024 00:00:00 +0000

Overview

Added in v0.16.8

Important

The --minify flag of hugo purges HTML whitespace by default. Unfortunately, this also removes the spacing behind the visual cue of external links. Add the following configuration to your main configuration to prevent this:

Map

Tue, 02 Jan 2024 00:00:00 +0000

Overview

Added in v0.16.0

Use the map shortcode to show an interactive map, powered by Leaflet . The shortcode is a wrapper of the Leaflet library that provides basic functionality. As an example, the following shortcode displays an interactive map of the city of Amsterdam.

Mark

Fri, 29 Dec 2023 00:00:00 +0000

Overview

Added in v0.19.0

Use the mark shortcode to highlight text. The inner content is used as input.

Default Highlight

Provide the text to highlight as input to the mark shortcode.

Use the mark shortcode to highlight specific text.

markdown

Use the mark shortcode to {{< mark >}}highlight{{< /mark >}} specific text.

Colored Highlight

Specify a theme color to define the background color of the highlighted text. As an example, the following shortcodes display a highlight for each theme color.

Mermaid

Sun, 15 Jun 2025 00:00:00 +0000

Overview

Added in v1.0.0

Use the mermaid shortcode to add diagrams and charts powered by Mermaid . Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. Instead of using the shortcode syntax, you can also use a fenced codeblock with the language mermaid to achieve the same effect.

Navbar

Wed, 14 Aug 2024 00:00:00 +0000

Overview

Use the navbar shortcode to display a navigation header with a toggler. The menu items are derived from the site’s configuration, which defaults to the menus defined under main. Nested items are supported at one-level depth. The navigation bar includes a search area and a language switcher if applicable. The items in the navigation header are accentuated if the current page or any of its descendants is active.

Navs and tabs

Sat, 30 Dec 2023 00:00:00 +0000

Overview

Added in v0.11.8

Use the nav shortcode to show a group of multiple tab panes. Add nav-item inner elements for each tab pane.

Horizontal Alignment

By default, navs are left-aligned, but you can easily change them to center or right aligned.

Persona

Thu, 28 Dec 2023 00:00:00 +0000

Overview

Use the persona shortcode to display a custom card. As an example, the following shortcode displays a persona card with a primary color.

Creators

As a content creator you value your independence. You like to take control of your online and offline presence. You want to focus on growing your audience, without limitations.

Release

Sat, 30 Dec 2023 00:00:00 +0000

Overview

Added in v0.14.1

Since Hinode v0.14.1 you can indicate the availability of a specific feature. The release shortcode renders a button that links to the specific release. Use the state to indicate if the feature is new or deprecated.

Added in v0.14.1

markdown

{{< release version="v0.14.1" >}}

Ensure the release parameter is set in the site’s configuration. The following example uses the Hinode repository hosted on GitHub.

Spinner

Mon, 14 Aug 2023 00:00:00 +0000

Overview

Important

The animation effect of this component depends on the prefers-reduced-motion media query. See the reduced motion section of Bootstrap’s accessibility documentation .

Regular Spinner

Use the spinner shortcode to indicate the loading state of a component or page. The inner content is used as alternative description. As an example, the following shortcode displays a centered spinner.

Sub

Sat, 30 Dec 2023 00:00:00 +0000

Overview

Added in v0.19.0

As an example, the following shortcode displays subscript text.

H₂O is a liquid.

markdown

H{{< sub 2 >}}O is a liquid.

Arguments

The shortcode supports the following arguments:

Sup

Sat, 30 Dec 2023 00:00:00 +0000

Overview

Added in v0.19.0

As an example, the following shortcode displays superscript text.

2¹⁰ is 1024.

markdown

2{{< sup 10 >}} is 1024.

Arguments

The shortcode supports the following arguments:

Table

Wed, 14 Aug 2024 00:00:00 +0000

Overview

Added in v0.8.0

Important

Bootstrap styling attributes require an explicit class argument as of release v0.22.0 . For example, use the following argument to accentuate a table with table-striped: class="table-striped".

Testimonial

Mon, 30 Mar 2026 00:00:00 +0000

Overview

Use the testimonial shortcode to display a quote with attribution. The testimonial supports a contact name, role, avatar image, logo, or icon. You can optionally link the contact name to a URL and add a call-to-action link.

Basic Testimonial

Provide inner content as the quote.

Hinode has transformed the way we publish documentation. It is fast, flexible, and a joy to use.

markdown

{{< testimonial >}}
 Hinode has transformed the way we publish documentation. It is fast, flexible,
 and a joy to use.
{{< /testimonial >}}

Testimonial With Avatar

Add image to display a circular avatar next to the contact name.

Timeline

Thu, 18 Apr 2024 00:00:00 +0000

Overview

Added in v0.15.3

Use the timeline shortcode to show items ordered on a vertical timeline.

Product launch

July 1, 2023

Toast

Wed, 14 Aug 2024 00:00:00 +0000

Overview

Important

To support multiple toast messages on the same page, each toast message is explicitly linked to a button using the parameter id since release v0.14.3 . Hinode wraps the individual toast messages in a container to stack them automatically.

Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen. Give the toast a unique id and assign this value to the toast argument of a button. As an example, the following shortcode displays two buttons that, when clicked, trigger a toast message. The messages are stacked when both buttons are clicked in a short timeframe.

Tooltip

Sat, 30 Dec 2023 00:00:00 +0000

Overview

Use the tooltip shortcode to display a tooltip for a hyperlink. Refer to the Button on how to display a tooltip for a button instead.

Provide a title for the tooltip text. It appears when hovering over the inner text.

markdown

{{< tooltip title="Tooltip" >}}
 Hover over me
{{< /tooltip >}}

Add a href to create a hyperlink with a tooltip.

Video

Wed, 28 Aug 2024 00:00:00 +0000

Overview

Important

Hinode uses a strict Content Security Policy by default. Be sure your server configuration safe lists your video provider in the frame-src configuration, or your video will not show.

Use the video shortcode to embed a responsive video on your site. The shortcode currently supports three providers, being Cloudinary , Vimeo , and YouTube . The last two providers also support shorthand notation.

Components on Hinode

Abbr

Overview

Data

Accordion

Overview

Flush

Always Open

Alert

Overview

Colored Alert

Dismissible Alert

Animation

Overview

Args

Overview

Data Format

Badge

Overview

Heading Badges

Breadcrumb

Overview

Default Breadcrumb

Breadcrumb for Specific Path

Button Group

Overview

Styling

Button

Overview

Stateful Buttons

Sized Buttons

Card Group

Overview

Card

Overview

Carousel

Overview

Collapse

Overview

Styling

Command

Overview

Examples

Docs

Overview

Default Code Snippet

Example

Overview

Hugo Code Example

File

Overview

Default File Preview

Icon

Overview

Image

Overview

Ins

Overview

Arguments

Kbd

Overview

Regular Input

Link

Overview

Map

Overview

Mark

Overview

Default Highlight

Colored Highlight

Mermaid

Overview

Navbar

Overview

Navs and tabs

Overview

Horizontal Alignment

Persona

Overview

Release