Welcome to Hinode! 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.

Cookie Policy

Thu, 19 Sep 2024 00:00:00 +0000

Effective Date 19-Sep-2024

What Are Cookies?

This Cookie Policy explains what cookies are and how we use them, the types of cookies we use i.e, the information we collect using cookies and how that information is used, and how to manage the cookie settings.

Cookies are small text files that are used to store small pieces of information. They are stored on your device when the website is loaded on your browser. These cookies help us make the website function properly, make it more secure, provide better user experience, and understand how the website performs and to analyze what works and where it needs improvement.

Privacy Policy

Thu, 19 Sep 2024 00:00:00 +0000

Effective Date 19-Sep-2024

This Privacy Policy describes the policies of gethinode.com on the collection, use and disclosure of your information that we collect when you use our website ( https://gethinode.com , referred to as the “Service”). By accessing or using the Service, you are consenting to the collection, use and disclosure of your information in accordance with this Privacy Policy. If you do not consent to the same, please do not access or use the Service.

Fourth post

Sun, 01 Jan 2023 00:00:00 +0000

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus libero in felis accumsan, vitae imperdiet metus vehicula. Quisque nec dignissim purus. In id dui porta sapien posuere viverra nec vel nisi. Sed varius tincidunt lectus, quis sagittis felis interdum id. Proin purus odio, ultrices auctor libero convallis, volutpat gravida turpis. Ut commodo metus orci, quis sagittis lectus rhoncus non. Nulla et lectus tortor. Suspendisse quam felis, molestie non odio quis, consequat venenatis orci. Etiam sed turpis sit amet elit scelerisque imperdiet. Sed suscipit felis non nibh suscipit egestas. Nulla sodales libero non rhoncus consequat. Nunc in elit at est cursus congue ut ac velit. Cras luctus libero augue, id semper sapien volutpat ultrices.

third post

Thu, 01 Dec 2022 00:00:00 +0000

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id scelerisque ligula. Vestibulum eu lorem tortor. Suspendisse tristique ultrices mauris, non maximus lorem faucibus in. Suspendisse sagittis eleifend dapibus. Curabitur dignissim luctus sapien eu consequat. Proin congue dui vel ipsum bibendum varius. Pellentesque cursus nisi metus, egestas eleifend ipsum sollicitudin vitae. Sed vitae erat elementum, semper turpis sed, molestie nulla.

Nulla molestie ultrices vehicula. Etiam iaculis, erat a blandit blandit, nulla tellus dapibus ligula, vitae venenatis turpis diam non felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae arcu in justo iaculis egestas. In imperdiet arcu vitae pharetra commodo. Quisque ut erat eget nisl semper laoreet vitae eget ligula. Mauris bibendum purus nec vulputate faucibus. In luctus sagittis ante, quis laoreet orci bibendum vitae. Nam at odio accumsan, tincidunt eros at, lacinia metus. In et ultricies sapien, a mollis est. Nunc convallis orci eu tristique euismod. Proin vel ullamcorper diam. Quisque et semper orci. Proin pharetra lorem justo, id malesuada erat feugiat sit amet. Praesent bibendum mi at lorem volutpat suscipit. Morbi sed libero elit.

Second post

Tue, 01 Nov 2022 00:00:00 +0000

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin sapien. Ut porttitor lectus eu tempor ultricies. Sed semper tincidunt nibh pellentesque condimentum. Vivamus dictum sem eu rhoncus semper. Vestibulum convallis congue tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris magna urna, egestas sit amet ligula quis, viverra semper arcu. Praesent laoreet nunc vitae nulla posuere facilisis.

Nunc eget dignissim ex, sed lobortis leo. Suspendisse mollis posuere tellus, in viverra nunc ullamcorper vitae. Nam vel tempor arcu, in imperdiet odio. Fusce malesuada vehicula odio, in iaculis nulla congue eget. Quisque id odio id nisl facilisis posuere porta sit amet mauris. Curabitur lorem leo, tempus id rhoncus eget, placerat vitae lectus. Morbi eu aliquet enim. Nulla malesuada laoreet sodales.

First post

Sat, 01 Oct 2022 00:00:00 +0000

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate, ante in luctus congue, leo risus semper justo, vel consequat sapien lectus quis ipsum. In imperdiet urna justo. Nulla vel pellentesque ipsum. Cras congue feugiat dolor ac aliquam. Pellentesque eget dui venenatis, ultrices urna ac, vehicula nibh. Curabitur est lectus, dapibus eu vehicula non, malesuada et dui. Nam enim nulla, egestas et nunc non, elementum aliquet justo. Mauris euismod mauris sapien, eget vestibulum odio dictum sit amet. Morbi nisl elit, placerat at auctor in, finibus ac neque. Curabitur placerat feugiat risus non vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis cursus est, nec posuere libero.

About

Mon, 11 Apr 2022 00:00:00 +0000

Bootstrap Framework

Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source Sass files.

Full Text Search

Search your site with FlexSearch, a full-text search library with zero dependencies.

Development Tools

Mon, 01 Jan 0001 00:00:00 +0000

About

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The about content block renders a short message next to an illustration. You can add optional links or buttons below the message.

Image First

Set order to first to show the illustration before the heading.

Preheading

Alex Smith

Mon, 01 Jan 0001 00:00:00 +0000

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan venenatis dapibus. Proin placerat mauris ac interdum gravida. Proin consequat feugiat sagittis. Sed vel augue nec est auctor semper. Curabitur mauris ante, euismod eu sem in, sagittis porttitor urna. Mauris sodales at quam condimentum malesuada. Vivamus erat augue, euismod nec ligula quis, molestie lobortis ante. Proin venenatis non diam ac interdum.

Approach

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The approach block renders a featured image with one or more steps.

Preheading

Heading

Approach content. It supports multiple lines.

First Step

Articles

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The articles block renders a group of cards for selected content. By default, the block uses the content of the current section. You can override this by setting input.section to the name of a specific section of your site.

Stacked Cards

Set orientation to stacked to render the article’s illustration above the card body.

Betty White

Mon, 01 Jan 0001 00:00:00 +0000

Duis rutrum, justo eleifend sagittis facilisis, leo orci hendrerit elit, ac tristique nisl justo non neque. Mauris semper egestas massa, nec dapibus ex tincidunt nec. Quisque lectus quam, finibus sed hendrerit id, accumsan eget sapien. Nam facilisis diam eu felis tempus euismod. Nullam id neque fringilla purus vestibulum mattis elementum vitae lectus. Fusce vel libero consectetur urna egestas molestie eget sit amet elit.

Cards

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The cards content block renders a group of content cards. You can define the card’s content, including an illustration, using frontmatter inputs.

Stacked Cards With an Image

Set the image attribute of each element to an image asset to render illustrated cards.

Preheading

Charles Green

Mon, 01 Jan 0001 00:00:00 +0000

Suspendisse potenti. Aenean elit nisl, viverra eu volutpat at, sodales a sem. Aliquam blandit nunc non mi posuere, quis laoreet ex congue. Donec fringilla porttitor lacus accumsan porttitor. Integer vel sagittis diam. Nullam vehicula fermentum risus nec facilisis. Fusce eleifend gravida orci, in efficitur enim fermentum nec. Sed quis malesuada lorem. Ut vitae sodales sapien.

Contact form

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The contact-form content block renders a contact form powered by a form provider of your choice. Provide a render hook and action to link your custom form and callback action to the content block.

Netlify Contact Form

Netlify Forms provides serverless form handling, allowing you to manage forms without extra API calls or additional JavaScript. You can enable form detection by including a data-netlify or netlify attribute.

CTA

Mon, 01 Jan 0001 00:00:00 +0000

Overview

Default Message

The cta content block renders a call to action message with a button. By default, the cta uses a generic title and message.

Interested in This Topic?

Please leave your contact details so we can get in touch.

Get in touch

yml

- _bookshop_name: cta
 background:
 color: body-tertiary
 subtle: false
 links:
 - title: Get in touch
 url: '#!'
 icon: chevron-right

Custom Message

Set the heading attribute to override the default message title and content.

FAQ

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The FAQ content block renders an accordion of frequently asked questions. Clicking on a question reveals the answer interactively.

Preheading

Heading

Section content. It supports multiple lines.

First item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur nulla at tortor mattis pharetra.

Second item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis sit amet nulla sit amet efficitur.

Third item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam lobortis, sodales dolor eu, posuere elit.

yml

- _bookshop_name: faq
 heading:
 preheading: Preheading
 title: Heading
 content: >-
 Section content. It supports multiple lines.
 background:
 color: body-tertiary
 subtle: false
 items:
 - title: First item
 description: |-
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
 efficitur nulla at tortor mattis pharetra.
 - title: Second item
 description: >-
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis
 sit amet nulla sit amet efficitur.
 - title: Third item
 description: >-
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam
 lobortis, sodales dolor eu, posuere elit.

Arguments

The content block supports the following arguments:

Featured

Mon, 01 Jan 0001 00:00:00 +0000

Overview

Featured Article

Set the url of a link to include a button that redirects to a content page.

Preheading

Heading

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The heading content block renders a section heading with optional regular content.

Preheading

Section Heading

Regular content that is placed below the title.

yml

- _bookshop_name: heading
 heading:
 preheading: Preheading
 title: Section heading
 content: Regular content that is placed below the title.
 width: 8
 justify: center

Arguments

The content block supports the following arguments:

Hero

Mon, 01 Jan 0001 00:00:00 +0000

Overview

Basic Hero

The hero content block renders a page hero, typically at the top of the page. Set cover to true to display a full-page hero.

Title

Hero content

yml

- _bookshop_name: hero
 heading:
 title: Title
 align: start
 content: Hero content
 width: 12

Illustrated Hero

You can include an illustration next to the hero heading. Specify orientation and order to configure the illustration’s placement. You can set cover to true to display a full-height hero. In horizontal layout, the image fills the width remaining next to the header (in sizes 1 to 12).

List

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The list block renders a list of articles.

Default List

Title	Description
Fourth Post	This is the fourth blog post. It is excluded from the search index.
Third Post	This is the third blog post. It uses exact case for the title.
Second Post	This is the second blog post.
First Post	This is the first blog post.

Filtered List

Add the following configuration to your page’s frontmatter to enable data table features:

Panels

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The panels content block displays multiple panels that are toggled by a tab control.

Tabs

Set tab-type to tabs to adjust the panel controls.

Preheading

Heading

Panels content. It supports multiple lines.

Content of the first panel.

Content of the second panel.

Content of the third panel.

yml

- _bookshop_name: panels
 heading:
 preheading: Preheading
 title: Heading
 content: Panels content. It supports multiple lines.
 align: start
 background:
 color: body-tertiary
 subtle: false
 width: 12
 tab_type: tabs
 ratio: 1x1
 elements:
 - title: First Panel
 image: /img/placeholder.png
 content: Content of the first panel.
 - title: Second Panel
 image: /img/placeholder.png
 content: Content of the second panel.
 - title: Third Panel
 image: /img/placeholder.png
 content: Content of the third panel.

Pills

Set tab-type to pills to adjust the panel controls.

Preview

Mon, 01 Jan 0001 00:00:00 +0000

Overview

Basic Preview

The preview content block renders a live URL preview in an iframe with device switcher controls. By default, it displays in desktop view.

Hugo on Wikipedia

Live preview of the Hugo static site generator Wikipedia page

yml

- _bookshop_name: preview
 heading:
 title: Hugo on Wikipedia
 content: Live preview of the Hugo static site generator Wikipedia page
 url: "https://en.wikipedia.org/wiki/Hugo_(software)"

Preview With Specific Device

Set the device argument to specify which device view to display by default. Options are desktop, tablet, or mobile.

Releases

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The releases content block displays a timeline with release information.

Preheading

Heading

Content

Product launch

July 1, 2023

Separator

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The separator content block renders a section separator. The separator spans the entire page from edge to edge on smaller devices. On larger screens, the separator is bound by the maximum container width that contains the section.

Line Separator

The default separator renders a horizontal line.

yml

- _bookshop_name: separator

Clear Separator

Set the argument clear: true to render a clear separator.

Team

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The team content block renders a group of team members.

Team

Alex Smith

Testimonials

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The testimonials content block renders one or more client testimonials. You can render them as a carousel or as columns.

Carousel

Set carousel to true to render a carousel of multiple testimonials.

First testimonial.

Second testimonial.

Third testimonial.

yml

- _bookshop_name: testimonials
 card:
 color: body-tertiary
 subtle: false
 cols: 1
 icon_style: fa-4x text-secondary
 carousel: true
 testimonials:
 - icon: linkedin
 content: First testimonial.
 link: #!
 - icon: google
 content: Second testimonial.
 link: #!
 - icon: github
 content: Third testimonial.
 link: #!

Columns

Set cols to 3 to render three testimonials as columns.

Video message

Mon, 01 Jan 0001 00:00:00 +0000

Overview

The video-message content block renders a video with optional messages displayed either horizontally or stacked below the video.

Horizontal Layout

Set orientation to horizontal to display the messages to the right of the video.

Preheading

Welcome to Hinode! 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