Hugo Catalog Playground

This site is for users to test out Hugo Catalog and it’s widgets in a controlled environment so they can get a better idea how it works and it’s capabilities.

If you need help please refer to the online documentation at: http://hugocatalog.com

Feel free to experiment without worry of breaking anything, nothing you do gets saved.

If you find any bugs or have any feature requests file them in our theme repo github issues.

Audio Widget

The Audio widget has 6 properties, these are:

• src: required string - the url pointing to the source file
• title: optional string - a title for the audio clip, otherwise the filename is used
• span: required number - [1–6] width of the shortcode
• autoplay: optional boolean - if true, the audio clip plays without interaction defaults to false
• muted: optional boolean - if true, the audio file will be muted default to false
• loop: optional boolean - if true, the audio clip plays repeatedly defaults to false

Bullet Widget

The Bullet widget has 3 properties, these are:

• type: required boolean - can be of type true or false
• leading_text: optional string - the text to display at the beginning of the text, displays in bold
• text - required string - text to display with the bullet line

Catalog Image Widget

The Catalog Image widget has 9 properties, these are:

• src: string required - path to the image you want to display, can be local file path or CDN based url
• overlay: string optional - path to the image you want to display on hover, can be local file path or CDN based url
• title: string optional - the title
• description: string optional - markdown-formatted text description
• light: boolean optional - a light checkered background
• dark: boolean optional - a dark checkered background
• scale: boolean optional - scale the image down if it’s wider than the container
• span: number required - [1–6] width of the shortcode
• text_position: string optional - can either be top to place the title and description above it or bottom to place it below it

Text Position Top

places the images title and description above it.

Text Position Bottom

places the images title and description below it.

Image with overlay

Displays alternate image on hover

Code Block Widget

The Code Block widget allows you to insert code blocks into your markdown document, you can select the language for your code snippet by clicking the settings icon and selecting the appropriate mode for your code.

{
    "name":"John",
    "age":30,
    "car":null,
}

Color Widget

The Color widget has 7 properties, these are:

• name: optional string - defines the color name
• span: required number - [1–6] width of the shortcode
• hex: required string - defines the hex color value and sets the color of the example
• RGB optional string - defines the RGB color value
• Pantone optional string - defines the pantone color value
• CMYK optional string - defines the CMYK color value
• MUI optional string - defines MUI color value

Column Widget

The Column widget has 3 properties, these are:

• span: required number - [1–6] width of the shortcode
• color: optional rgba, rgb or hex color value - used to set the background color of the shortcode
• alignment: optional string - can be either left, center or right to align the content of the shortcode. Defaults to left.

Divider Title Widget

The Column widget has 2 properties, these are:

• title: required string - the text to display above the divider
• align: optional string - controls the text alignment, defaults to left

Download Widget

The Download widget has 5 properties, these are:

• title: required string - The title for the button
• span: required number - [1–6] width of the shortcode
• url required string - The URL pointing to the file
• filename: required string - Changes the file name under which it will be saved
• subtitle: optional string - Other text you may want to display if no value is provided it will display the file size.

Hint Widget

The Hint widget has 3 properties, these are:

• span: required number -[1–6] width of the shortcode
• type: required string - can be one of 4 types: Info, Danger, Warning and Success
• content required markdown - you can write markdown between the opening and closing hint brackets

Image Widget

In some cases you just need to insert an image without any of the advanced features provided by the Catalog Image Widget it is recommended you use the Image shortcode.

The Image widget has 3 properties, these are:

• src: required string - The URL pointing to the image file
• title optional string - used to display a title text for the image
• Alt Text optional string - used to display a alternative text when the image cannot be loaded

Video Widget

The Video widget has 6 properties, these are:

• span: required number - [1–6] width of the shortcode
• src: required string - the url path of your video
• muted: optional boolean - if this value is set to true the video will be muted
• loop: optional boolean - if this value is set to true the video will loop
• autoplay: optional boolean - if this value is set to true the player will begin playing automatically
• poster: optional string - the url path of the image path to use as the cover image