Components Reference

This page serves as a reference for all available components, shortcodes, and styling options used throughout the Knowledge Base. Use this to quickly copy code snippets for your content.

Table of Contents

• Color Palette
• Typography
  • Emphasis
  • Unordered List
  • Ordered List
• Shortcodes
  • Gallery
  • Slideshow
  • YouTube
  • Custom HTML
  • Tooltip
• Layout Components
  • Collapsible Sections
  • Tabbed Panels
  • FAQ Accordion Menu
• Styling Elements
  • Images with Captions
  • Tables
  • Blockquotes
  • Code Blocks

Typography

Headings

# H1 - Heading one
## H2 - Heading two
### H3 - Heading three
#### H4 - Heading four
##### H5 - Heading five
###### H6 - Heading six

H1 - Heading one

H2 - Heading two

H3 - Heading three

H4 - Heading four

H5 - Heading five

H6 - Heading six

Emphasis

**This is bold text**
This is **bold** in a sentence
__This is bold text__
*This is italic text*
_This is italic text_
~~Strikethrough~~
`inline code`

This is bold text

This is bold in a sentence

This is bold text

This is italic text

This is italic text

Strikethrough

inline code

Lists

Unordered List

• Item 1
• Item 2
  • Sub Item 1
  • Sub Item 2
• Item 3

Ordered List

1. Item 1
2. Item 2
   • Sub Item 1
   • Sub Item 2
3. Item 3

Horizontal Rules

Color Palette

Shortcodes

Shortcodes are special Hugo commands that provide enhanced functionality in your markdown content.

Gallery

The gallery shortcode displays a collection of images with automatic lightbox functionality.

Usage:

{{< gallery >}}

Example:

Notes:

• Place the gallery shortcode in a page bundle with image files.
• Supported formats: jpg, jpeg, png, gif, webp.
• Images will automatically display in a responsive grid.

Slideshow

The slideshow shortcode creates an interactive image carousel with navigation controls.

Simple Usage:

{{< slideshow >}}

Advanced Usage with Captions and Credits:

{{< slideshow 
  data='[
    {"image":"image1.jpg", "caption":"First image", "credit":"Photographer 1"},
    {"image":"image2.jpg", "caption":"Second image", "credit":"Photographer 2"}
  ]' >}}

Example:

< >

Notes:

• Place the slideshow shortcode in a page bundle with image files.
• Supported formats: jpg, jpeg, png, gif, webp.
• The JSON data parameter is optional but enables captions and credits.

YouTube

The YouTube shortcode embeds a responsive YouTube video player.

Usage:

{{< youtube "VIDEO_ID" "Optional Title" >}}

Example:

Notes:

• Replace VIDEO_ID with the YouTube video identifier.
• The title parameter is optional.

Custom HTML

The custom HTML shortcode allows you to add special HTML content with a styled container.

Usage:

{{% custom-html %}}
<div class="special-content">
  Your custom HTML here
</div>
{{% /custom-html %}}

Example:

Tooltips

Basic usage:

{{% tooltip text="Example text with tooltip" %}}
This is the tooltip content that will appear when hovered.
{{% /tooltip %}}

Customizing the icon:

{{% tooltip text="This term has a definition" icon="?" %}}
The definition or explanation goes here. You can include **markdown** formatting.
{{% /tooltip %}}

The shortcode accepts two parameters:

• text: The text that will appear in line (before the tooltip icon)
• icon: The character to show in the tooltip icon (defaults to “i”)

The content between the opening and closing shortcode tags becomes the tooltip text that appears on hover.

Callouts

The callout shortcode is designed to handle five types of callouts:

• tip (green) - for pro tips and best practices
• caution (yellow) - for important considerations
• warning (red) - for critical warnings
• note (purple) - for additional information
• info (default, blue) - for general information

How to Use the Shortcode

Here are some examples of how to use the callout shortcode:

{{< callout tip "Pro Tip: Using Callouts" >}}
This is a tip callout. It's perfect for sharing best practices and expert advice.
You can include **markdown** formatting and [links](#) within the callout.
{{< /callout >}}

{{< callout caution "Caution: Important Consideration" >}}
This is a caution callout. Use it when you want to highlight something important that users should be aware of before proceeding.
{{< /callout >}}

{{< callout warning "Warning: Critical Information" >}}
This is a warning callout. Use it for critical warnings where users need to be extra careful.
{{< /callout >}}

{{< callout note "Note: Additional Information" >}}
This is a note callout. Perfect for providing additional context or information that's useful but not essential.
{{< /callout >}}

{{< callout info "Information" >}}
This is the default info callout. Use it for general information when other callout types don't fit.
{{< /callout >}}

<!-- You can also use it without a header -->
{{< callout tip >}}
A tip without a header!
{{< /callout >}}

Layout Components

Collapsible Sections

Collapsible sections allow you to hide content that can be expanded when clicked.

Markdown Structure:

{{% collapsible header="Heading for the Section" %}}
With a collapsible section, you can:

- Item 1
- Item 2
- Item 3

{{% /collapsible %}}

Notes:

• Each collapsible section needs a unique HEADER.

Tabbed Panels

Note: The “tab-group-name” is if there are multiple tabs on the same page, if not, that can be left blank

{{< tabs "tab-group-name" >}}

{{< tab "first" >}}
First Tab
{{< /tab >}}

{{< tab "second" >}}
Second Tab
{{< /tab >}}

{{< tab "third" >}}
Third Tab
{{< /tab >}}

{{< /tabs >}}

Note: The "tab-group-name" is if there are multiple tabs on the same page, if not, that can be left blank

{{< tabs >}}
{{< tab "First" >}}
Content for first tab
{{< /tab >}}
{{< tab "Second" >}}
Content for second tab
{{< /tab >}}
{{< /tabs >}}

The tabs will work with any content inside them, including:

• Text
• Images
• Lists
• Other shortcodes
• Code blocks

FAQ Accordion Menu

{{< faq-wrapper >}}
  {{< faq-item "1" "Q: What is a Knowledge Base?" >}}
  A knowledge base is a centralized repository of information about a product, service, department, or topic.
  {{< /faq-item >}}
  
  {{< faq-item "2" "Q: How do I search the knowledge base?" >}}
  You can use the search icon in the top navigation or visit the dedicated search page.
  {{< /faq-item >}}
  
  {{< faq-item "3" "Q: Can I contribute to the knowledge base?" >}}
  **Example:**
![Example Image|This is a caption for the image|Photo by John Doe|400](/images/default-featured-image.webp)

**Notes:**
- The pipe character (|) separates the different components.
- Components from left to right: Alt text, Caption, Credit, Width in pixels.
- Width is optional and defaults to 100% if not specified.
  {{< /faq-item >}}
{{< /faq-wrapper >}}

FAQ Accordion Menu

Expand All

Q: What is a Knowledge Base?

A knowledge base is a centralized repository of information about a product, service, department, or topic.

Q: How do I search the knowledge base?

You can use the search icon in the top navigation or visit the dedicated search page.

Q: Can I contribute to the knowledge base?

Example:

Notes:

• The pipe character (|) separates the different components.
• Components from left to right: Alt text, Caption, Credit, Width in pixels.
• Width is optional and defaults to 100% if not specified.

Styling Elements

Images with Captions

You can add captions and credits to images using our custom markdown renderer.

Usage:

![Alt text|Caption text|Credit information|Optional width](image.webp)

Example:

Notes:

• The pipe character (|) separates the different components.
• Components from left to right: Alt text, Caption, Credit, Width in pixels.
• Width is optional and defaults to 100% if not specified.

Tables

Standard markdown tables with additional CSS classes.

Basic Table:

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Notes:

• Tables automatically adapt to the content width.
• For large tables, wrap them in a div with class “table-wrapper” for horizontal scrolling.

Blockquotes

Use blockquotes to highlight important information or quotes.

Usage:

> This is a blockquote that highlights important information.
> 
> It can span multiple paragraphs.

Example:

This is a blockquote that highlights important information.

It can span multiple paragraphs.

This is a blockquote that highlights important information.

It can span multiple paragraphs.

Code Blocks

Use code blocks to display formatted code snippets.

Usage:

```language
Your code here
```

Example:

• CSS

.example-class { 
  color: var(--accent-color); 
  padding: 1rem; 
  border-radius: 8px; 
}

• JS

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

Notes:

• Replace “language” with the appropriate language identifier (e.g., css, html, js, python).
• Code blocks feature syntax highlighting.