Logo

Hugo Catalog

Shortcodes

Audio Shortcode

The Audio shortcode can be used to document the audible aspects, for example background music, sound effects or jingles in the browser-provided interface.

Shortcode Parameters

  • 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
HTML Example

6-second synth melody

Markdown Example
{{<audio src="https://samplelib.com/lib/preview/mp3/sample-6s.mp3" span="3" title="6-second synth melody">}}

If you want to enable autoplay you must set muted to true as well otherwise it will not autoplay.

Sample mp3 provided by: https://samplelib.com/sample-mp3.html

Bullet Shortcode

The Bullet shortcode can be used to display do’s and dont’s.

Shortcode Parameters

  • 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
HTML Example
Do: example bullet text
Dont: example bullet text
Markdown Example
{{<bullet leading_text="Do:" text="example bullet text" type="true">}}

{{<bullet leading_text="Dont:" text="example bullet text" type="false">}}

Catalog Image Shortcode

Catalog Image is meant to be used if you want to control the width of your image using the span property or if you want to use any of the other features it provides, like using the light or dark transparent backgrounds, adding a title and description or using an overlay image to display on hover.

Shortcode Parameters

  • 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
HTML Example

Image shortcode with a span value of 3.

Markdown Example
{{<catalog-image src="/images/hugo-catalog-logo.svg" span="3" text_position="top" title="enable_subnav = false" description="" overlay="" light="false" dark="false" scale="true">}}
HTML Example

Image shortcode with a span value of 6 and light = true to enable a transparent background.

Markdown Example
{{<catalog-image src="/images/hugo-catalog-logo.svg" span="6" text_position="top" title="" description="" overlay="" light="true" dark="false" scale="true">}}
HTML Example

Image shortcode with a span value of 6 and dark = true to enable a translucent black background.

Markdown Example
{{<catalog-image src="/images/hugo-catalog-logo.svg" span="6" text_position="top" title="" description="" overlay="" light="false" dark="true" scale="true">}}
HTML Example

All images will display as responsive images, if you want to display an image at its native size simply set the scale property to false and the image will render at it’s native size.

This example uses an image shortcode with a span value of 6, title, description with the text_position set to the top and a scale property set to false.

Title

This is a sample description

Markdown Example
{{<catalog-image src="/images/logo-image.png" span="6" text_position="top" title="Title" description="This is a sample description" overlay="" light="false" dark="false" scale="false">}}

You can control the positioning of the title and description with the text_position property. You can either place it to the top or bottom of the image.

Title

This is a sample description

Markdown Example
{{<catalog-image src="/images/logo-image.png" span="6" text_position="bottom" title="Title" description="This is a sample description" overlay="" light="false" dark="false" scale="true">}}
In order for the scale property to work properly the image needs to be smaller than 960px width
HTML Example

The overlay property allows you to set an image that you can display on mouse over of the initial image.

Markdown Example
{{<catalog-image src="/images/subtitle-image.png" span="6" text_position="top" title="" description="" overlay="/static/images/subtitle-image-hover.png" light="false" dark="false" scale="true">}}

Color Shortcode

The Color shortcode is used to document colors, it supports the following color formats:

  • Hex
  • RGB
  • Pantone
  • CMYK
  • MUI

Shortcode Parameters

  • 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

Example

Theme Primary Color

HEX: #003b5c

RGB: 0, 59, 92

PANTONE: 302 C

CMYK: 100%, 36%, 0%, 64%

Theme Secondary Color

HEX: #C6007E

RGB: 198, 0, 126

PANTONE: 233 C

CMYK: 0%, 100%, 36%, 22%

Markdown Example
{{<color name="Theme Primary Color" span="3" hex="#003b5c" rgb="0, 59, 92" pantone="302 C" cmyk="100%, 36%, 0%, 64%" mui="">}}

{{<color name="Theme Secondary Color" span="3" hex="#C6007E" rgb="198, 0, 126" pantone="233 C" cmyk="0%, 100%, 36%, 22%" mui="">}}

Column Shortcode

Hugo Catalog uses a css grid based layout for the content area, the content area has a max-width of 960px wide. We use a css grid based layout composed of 6 columns.

The column shortcode is a container which controls how your markdown content displays, you can specify the width of the column with the span property.

Shortcode Parameters

  • 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.

You can compose rows of columns based on their span values. You can put any combination of span values as long as they add to 6, the grid is smart enough to accomadate them, here are some examples.

HTML Example
span = 3
span = 3
Markdown Example
{{<column span="3" color="#999" align="center">}}span = 3{{</column>}}

{{<column span="3" color="#999" align="center">}}span = 3{{</column>}}
HTML Example
span = 2
span = 4
Markdown Example
{{<column span="2" color="#999" align="center">}}span = 2{{</column>}}

{{<column span="4" color="#999" align="center">}}span = 4{{</column>}}
HTML Example
span = 2
span = 2
span = 2
Markdown Example
{{<column span="2" color="#999" align="center">}}span = 2{{</column>}}

{{<column span="2" color="#999" align="center">}}span = 2{{</column>}}

{{<column span="2" color="#999" align="center">}}span = 2{{</column>}}
HTML Example
span = 6
Markdown Example
{{<column span="6" color="#999" align="center">}}span = 6{{</column>}}
HTML Example
span = 5
span = 1
Markdown Example
{{<column span="5" color="#999" align="center">}}span = 5{{</column>}}

{{<column span="1" color="#999" align="center">}}span = 1{{</column>}}
All shortcodes span properties will display at 100% width at devices with resolutions smaller than 1024 x 768 regardless of the span value specified.

Divider Title Shortcode

The Divider Title shortcode can be used as a divider.

Shortcode Parameters

  • title: required string - the text to display above the divider
  • align: optional string - controls the text alignment, defaults to left
No alignment set defaults to left
Aligned to center
Aligned to right
{{<divider-title title="No alignment set defaults to left" align="left">}}

{{<divider-title title="Aligned to center" align="center">}}

{{<divider-title title="Aligned to right" align="right">}}

Donwload Shortcode

To link downloadable style guide resources, use the Download shortcode

Shortcode Parameters

  • 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.
HTML Example
Hugo Catalog Logos
6.32 KB
Markdown Example
{{<download title="Hugo Catalog Logos" span="3" url="/static/downloads/hugo-catalog-logos.zip" subtitle="">}}

Hint Shortcode

The Hint shortcode highlights important aspects.

Shortcode Parameters

  • 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
HTML Example
This is an info hint
This is an danger hint
This is an warning hint
This is an success hint
Markdown Example
{{<hint type="info">}}This is an info hint{{</hint>}}

{{<hint type="danger">}}This is an info hint{{</hint>}}

{{<hint type="warning">}}This is an info hint{{</hint>}}

{{<hint type="success">}}This is an info hint{{</hint>}}

Video Shortcode

The Video shortcode can be used to display videos.

Shortcode Parameters

  • 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
If you want to enable a video to autoplay you must also have muted set to true otherwise the video will not autoplay.
HTML Example
Markdown Example
{{<video src="/images/download-demo.mp4" span="6" autoplay="true" muted="true" loop="false" poster="/images/gitlab-decap-login.png" >}}