Widgets and shortcodes

There are a number of display widgets and shortcodes available. All the shortcodes mentioned on this page are defined in /docs/layouts/shortcodes.

Admonition boxes

Use the note, tip, and warning shortcodes to create admonition boxes.



A tip box gives a hint or other helpful but optional piece of information.

tip source

{{< tip title="Tip" >}}
A tip box gives a hint or other useful but optional piece of information.
{{< /tip >}}


A note box gives some important information that is often not optional.
{{< note title="Note" >}}
This is a note with a [link](https://www.yugabyte.com).
{{< /note >}}


A warning box informs the user about a potential issue or something to watch out for.
{{< warning title="Warning" >}}

This is a warning with a [link](https://www.yugabyte.com).

{{< /warning >}}

Inline section switcher

An inline section switcher lets you switch between content sections without a separate URL. If you want to link to sub-sections inside a switcher, use tabs. This widget looks as follows:

Inline section switcher

The corresponding code for this widget is as follows. Note that the actual content must be placed in a file with the .md extension inside a subdirectory; name the subdirectory such that it can be associated with the switcher title.

<ul class="nav nav-tabs-alt nav-tabs-yb">
  <li >
    <a href="#macos" class="nav-link active" id="macos-tab" data-toggle="tab"
       role="tab" aria-controls="macos" aria-selected="true">
      <i class="fa-brands fa-apple" aria-hidden="true"></i>
    <a href="#linux" class="nav-link" id="linux-tab" data-toggle="tab"
       role="tab" aria-controls="linux" aria-selected="false">
      <i class="fa-brands fa-linux" aria-hidden="true"></i>
    <a href="#docker" class="nav-link" id="docker-tab" data-toggle="tab"
       role="tab" aria-controls="docker" aria-selected="false">
      <i class="fa-brands fa-docker" aria-hidden="true"></i>
  <li >
    <a href="#kubernetes" class="nav-link" id="kubernetes-tab" data-toggle="tab"
       role="tab" aria-controls="kubernetes" aria-selected="false">
      <i class="fa-regular fa-dharmachakra" aria-hidden="true"></i>

<div class="tab-content">
  <div id="macos" class="tab-pane fade show active" role="tabpanel" aria-labelledby="macos-tab">
  {{% includeMarkdown "binary/explore-ysql.md" %}}
  <div id="linux" class="tab-pane fade" role="tabpanel" aria-labelledby="linux-tab">
  {{% includeMarkdown "binary/explore-ysql.md" %}}
  <div id="docker" class="tab-pane fade" role="tabpanel" aria-labelledby="docker-tab">
  {{% includeMarkdown "docker/explore-ysql.md" %}}
  <div id="kubernetes" class="tab-pane fade" role="tabpanel" aria-labelledby="kubernetes-tab">
  {{% includeMarkdown "kubernetes/explore-ysql.md" %}}

Include content from other files

The includeCode and includeFile shortcodes insert the contents of a file as plain text, while includeMarkdown inserts the contents of a file and renders it as markdown.


Because it doesn't make its own code block, you can use this shortcode to build a code block from several sources.

The base path is /docs/static/.

This shortcode strips trailing whitespace from the input file.

Call includeCode in a fenced code block:

{{% includeCode file="code-samples/include.sql" %}}

To nest the code block, tell the shortcode how many spaces to indent:

1. To do this thing, use this code:

    {{% includeCode file="code-samples/include.sql" spaces=4 %}}

To specify highlighting options, do so on the fenced code block. This is a Hugo feature, not part of the shortcode. For example, add a highlight to lines 1 and 7-10:

```sql {hl_lines=[1,"7-10"]}
{{% includeCode file="code-samples/include.sql" %}}

For more information on highlight options, see the Hugo docs on highlighting in code fences and supported syntax highlighting languages.


The includeFile shortcode infers the code language from the filename extension (or output if there's no extension) and creates its own code block.

The base path is /docs/static/.

This shortcode strips trailing whitespace from the input file.

Call includeFile on a line of its own:

{{< includeFile file="code-samples/include.sql" >}}

To nest the code block, indent the shortcode:

    {{< includeFile file="code-samples/include.sql" >}}

To specify a code language and override the default:

{{< includeFile file="code-samples/include.sql" lang="sql" >}}

To specify highlighting options:

{{< includeFile file="code-samples/include.sql" hl_options="hl_lines=1 7-10" >}}

Fenced blocks are different

CAREFUL! hl_lines takes a different form here than when you're specifying it on a fenced block: no comma, no quotes: hl_options="hl_lines=1 7-10"

For more information on highlight options: https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode


Inserts the contents of a markdown file, rendered as part of the calling page. We use this primarily for syntax diagrams.

Landing Page sections

Learn through section

This widget looks as follows:

Learn through section

The corresponding code for this widget is as follows.

{{< sections/text-with-right-image
  title="Learn through examples"
  description="Microservices need a cloud native relational database that is resilient, scalable, and geo-distributed. YugabyteDB powers your modern applications"
  buttonText="Get started"
  imageAlt="Yugabyte cloud" imageUrl="/images/homepage/learn-through-examples.svg"

Other shortcodes

Note that the way you invoke a shortcode matters. Use angle brackets (< and >) to output plain text, and percent signs (%) to have Hugo render the output as Markdown.

For example, use {{< slack-invite >}} to output a bare URL for inclusion in a Markdown-style link, such as [YugabyteDB Community Slack]({{< slack-invite >}}): YugabyteDB Community Slack. Use {{% slack-invite %}} to output a clickable URL: https://communityinviter.com/apps/yugabyte-db/register.

Incomplete list of other shortcodes

Inserts the address for community slack invitations.
Inserts the address to open a YugabyteDB Managed support ticket.
Inserts the address to open a support ticket with no pre-selected product.
Inserts the address to open a YugabyteDB Anywhere support ticket.
Inserts the current version of a particular release series.
This shortcode has quite a few options. Refer to the comments at the top of the file for usage details.