Shortcodes reference - Hugo Content Guide

Components

`accordion`

Create a container for expandable sections.

Parameters

Name	Required?	Description
`class`	Optional	The value for the `class` attribute. Default value is `accordion`.
`name`	Optional	A value to use for the name attribute on the `<details>` elements. Use this to create an exclusive accordion.
`aria_label`	Optional	The value for the `aria-label` attribute.
`aria_labelledby`	Optional	The value for the `aria-labelledby` attribute.

Example

{{< accordion >}}
    {{< accordion-item title="Residential development pre-service" >}}
        <p>…</p>
    {{< /accordion-item >}}
    {{< accordion-item title="Additional help" >}}
        <p>…</p>
    {{< /accordion-item >}}
{{< /accordion >}}

The contents of the shortcode should only contain {{< accordion-item />}} shortcodes.

`accordion-item`

Create an expandable section.

Parameters

Name	Required?	Description
`title`	Required	The title for the expandable section.
`details_class`	Optional	The value for the detail element’s `class` attribute. Default value is `accordion-item`.
`summary_class`	Optional	The value for the summary’s `class` attribute. Default value is `accordion-trigger`.
`content_class`	Optional	The value for the content’s `class` attribute. Default value is `accordion-panel`.
`id`	Optional	The value for the content’s `id` attribute.
`open`	Optional	Set this to `true` to open the section on page load.
`name`	Optional	A value to use for the name attribute on the `<details>` element. Use this to create an exclusive accordion.

Example

{{< accordion >}}
    {{< accordion-item title="Residential development pre-service" >}}
        <p>…</p>
    {{< /accordion-item >}}
    {{< accordion-item title="Additional help" >}}
        <p>…</p>
    {{< /accordion-item >}}
{{< /accordion >}}

This shortcode must be used within a {{< accordion />}} shortcode. The contents of the shortcode become the content of the expandable section.

`aside`

Create a section of content which is only indirectly related to the surrounding content and made visually distinct with a coloured background.

Parameters

Name	Required?	Description
`element`	Optional	The HTML element to use. Default value is `aside`.
`title`	Optional	The heading content displayed at the top of the component.
`title_element`	Optional	The HTML element to use for the heading. Default value is `h3`.
`id`	Optional	The value for the `id` attribute. Default value will be generated based on the title.
`class`	Optional	The value for the `class` attribute. Default value is `aside`.
`aria_label`	Optional	The value for the `aria-label` attribute.

Example

{{< aside title="GHG reduction commitments" >}}
    <p>Both the United States and Canada have targeted greenhouse gas (GHG) reductions of 50 to 52% and 40 to 45% respectively from 2005 levels by 2030.</p>
{{< /aside >}}

The content of the element should be placed inside of the shortcode tag.

`featured-video`

Embed a link to a YouTube video, with a thumbnail image, title and description.

Parameters

Name	Required?	Description
`id`	Required	The YouTube ID of the video.
`title`	Required	The title of the video.
`duration`	Required	The duration of the video. Use a format like `5:30`.
`title_element`	Optional	The name of the HTML tag to use for the title. Default value is `h2`.
`thumbnail`	Optional	The URL for the thumbnail image. Only include this parameter if you want to override the default, auto-generated thumbnail image.
`alt`	Optional	The alt text for the thumbnail image. Only include this parameter if you want to override the default text generated by the shortcode.
`href`	Optional	The video’s URL. Only include this parameter if you want to override the default, which is generated based on the YouTube ID.
`size`	Optional	The size of the video thumbnail. Set this to `large` to use an alternate style of this component with a large thumbnail.
`transcript`	Optional	The URL to a transcript PDF file.

Example

{{< featured-video id="y0nY1EqPItU" title="How to spot a scam" duration="1:41" >}}Scammers are always finding new ways to take your money. Never share your personal information including your birthdate, social insurance number, or bank account information.{{< /featured-video >}}

Thumbnail images

Thumbnail images for the video will be automatically generated by Hugo, by making resized copies of the provided source image. Place a source image at the path content/assets/img/featured-video/$id.jpg, where $id is the YouTube ID. The source image should at minimum be 384 pixels in width and 288 pixels in height, or 1046 pixels by 654 pixels minimum when using the “large” style.

Alternate styles

The default is a basic style with a small thumbnail image. Add size="large" to the shortcode to use an alternate style with a larger thumbnail image and larger text with a blue background.

`figurebox`

Embed an image, with an optional caption.

Parameters

Name	Required?	Description
`src`	Required	The path to the image file. The image must be placed in `content/assets/img/figurebox/`.
`size`	Optional	Either `large`, `x-large`, `full` or `standard`. This sets the size at which the image will be displayed. Default value is `standard`.
`alt`	Optional	The value for the image’s `alt` attribute. Include a short text which describes the image.
`title`	Optional	The value for the image’s `title` attribute. This text will be displayed as a tooltip when users place their mouse cursor over the image.
`popup`	Optional	Either `true` or `false`. Set this to `false` if you don’t want the full-size image to be viewed in a popup when the figurebox is clicked.
`width`	Optional	The image’s width, in pixels. Only use this parameter when the image is in SVG format, Hugo is able to auto-detect the width of images in other formats.
`height`	Optional	The image’s height, in pixels. Only use this parameter when the image is in SVG format, Hugo is able to auto-detect the height of images in other formats.
`style`	Optional	The value of the image’s `style` attribute. This should only be used in rare cases where the CSS for the image needs tweaking.
`loading`	Optional	Either `eager` or `lazy`. In most cases, you should leave out this parameter to use the default value, `lazy`.
`group`	Optional	The name of the group that the image belongs to. Don’t include spaces or upper-case letters. By default, all images on the page are grouped together.
`webp`	Optional	Either `true` or `false`. If set to `false` then WebP images will not be generated. WebP images will be generated by default for all images except for PNGs, so this parameter can be set to `true` to opt in to generating WebP images from PNGs.
`quality`	Optional	A number between 1 and 100. Leave this out to use the default, which is 80. Use a higher number to increase the visual quality when needed, or a lower number to decrease the file size.
`hint`	Optional	A hint about the type of image. Currently only used when encoding to WebP. The default value is `drawing` for PNG images and `photo` for all others. Valid values are `picture`, `photo`, `drawing`, `icon`, or `text`.

Example

{{< figurebox src="/assets/img/figurebox/transmission-route-map-dec4-2019.jpg" size="large" alt="Large transformer move December 5 from city to Riel station." >}}The route from Winnipeg to Riel Converter Station.{{< /figurebox >}}

The contents of the shortcode, between {{< figurebox … >}} and {{< /figurebox >}}, become the image caption. You can use HTML or Markdown markup in the caption.

SVG images

When embedding an SVG image, you must include the width and height parameters, like in the following example. Use the dimensions, in pixels, of the full-size image.

{{< figurebox src="/assets/img/figurebox/compressed-natural-gas-map.svg" size="large" alt="Map showing the location of the compressed natural gas station." width="1425" height="1494" >}}The CNG station is located southwest of Winnipeg, close to most of our natural gas customers.{{< /figurebox >}}

`hero-banner`

Embed a full-width banner on landing pages.

Parameters

Name	Required?	Description
`img`	Required	The file name of the image to use. The image must exist in `/assets/img/banners/full_width/` and the name must not include the `.jpg` file extension.
`caption`	Optional	A string of text to place over the image. Keep this as short as possible.
`captiontag`	Optional	The name of an HTML tag to use for the caption element. Default value is `p`.
`id`	Optional	The value of the `id` attribute. Leave out this parameter to omit the `id` attribute.
`class`	Optional	The value of the `class` attribute. Default value is `hero-banner`.
`size`	Optional	The size keyword for the banner. The available options are `16x9`, `square`, `home`, or leave out this parameter to use the normal size.

Example

{{< hero-banner img="your-home-hero-banner" caption="Your home, your energy" >}}

`pull-quote`

Display a passage pulled from the main text. Mostly used in articles.

Parameters

Name	Required?	Description
`citation`	Optional	The attribution for the quoted text. Can be a person’s name or any other type of attribution. An em dash will be prepended to the attribution, don’t include this in the parameter value.
`font_size`	Optional	The size of the font for the quote text, either `small`, `large` or `auto`. The default is `auto`, which will automatically use a small font size when the quote text is longer than 230 characters.
`align`	Optional	The alignment of the pull quote within the surrounding text. Set this to `right` to float the quote to the right of the text. By default, pull quotes are not floated and take up the full content width.

The contents of the shortcode, between {{< pull-quote … >}} and {{< /pull-quote >}}, become the quote text. You can use HTML or Markdown markup in the text. Make sure to surround the quote with proper quotation marks.

Example

{{< pull-quote citation="Matt Haarsma" >}}“The honours are really nice, but it’s also good karma to help others when you can.”{{< /pull-quote >}}

`search-block`

Embed a search form.

Parameters

Name	Required?	Description
`title`	Optional	A title to be used as a heading above the form.

Example

{{< search-block title="Looking for something specific?" >}}

`section-divider`

Used within articles to a indicate a section break.

Parameters

Name	Required?	Description
`class`	Optional	The value for the `class` attribute. Default value is `section-divider`.

Example

{{< section-divider >}}

`secondary-links`

Display a menu of secondary navigation links.

Parameters

Name	Required?	Description
`path`	Optional	The active path. This controls which links are displayed. Default value is the path of the current page.

Example

{{< secondary-links path="/accounts_and_services" >}}

`tertiary-links`

Display a menu of tertiary navigation links.

Parameters

Name	Required?	Description
`path`	Optional	The active path. This controls which links are displayed. Default value is the path of the current page.

Example

{{< tertiary-links >}}

Forms

`form-settings`

Embed special hidden inputs within forms. Should be inserted immediately before the closing </form> tag.

Parameters

Name	Required?	Description
`mail_to`	Required	A hash representing the email address to send to.
`mail_from`	Required	A hash representing the email address to send from.
`response_page`	Required	The path to the form thank you page. Include leading and trailing slashes.
`department`	Required	The name of the department.
`field_names`	Optional	Formatting settings for the fields in the outgoing email. Don’t include any of the following values: `department:hide;`, `main_page:hide;`, `mail_to:hide;`, `mail_from:hide;`, `mail_subject:hide;`, `email_html:hide;`, `response_page:hide;`, `field_names:hide;`, `First_name_one_val:hide;`, `First_name_two_val:hide;`, `submit:hide;`
`mail_subject`	Optional	The subject line for the outgoing email. The page title will be used as the subject line if this parameter is left out.
`main_page`	Optional	The path to the form page. This will be filled out automatically, so only set this parameter to override the default.
`email_html`	Optional	Either `yes` or `no`. Default value is `yes`.

Example

{{< form-settings
    mail_to="phNLj5Nld4bv5Y4nd6hLP2YbNE3mV96pf4XIs3wa/q4="
    mail_from="CPbnAbVjXfebFejB3kwhZ2bodxrIlyCoKacihxLPSx8="
    response_page="/accessibility/feedback_thank_you/"
    department="AREQ"
    field_names="header1:header=4; header2:header=4; header3:header=4; contact_name:required=text; street_address:required=text; city:required=text; postal_code:required=text;"
    mail_subject="Accessibility request or feedback"
>}}

`required-marker`

Used within form field labels to indicate that filling the field is mandatory.

Example

<label for="postal_code">Postal code {{< required-marker >}}</label>

`upaknee-form`

Embed an Upaknee newsletter sign up form.

Parameters

Name	Required?	Description
`form_id`	Required	The form ID supplied by Upaknee.
`client_id`	Optional	The client ID supplied by Upaknee. Default value is 101380.
`list_id`	Optional	The list ID supplied by Upaknee. Default value is 876720.
`class`	Optional	The value for the `class` attribute. Default value is `clearfix`.

Example

{{< upaknee-form form_id="00ec53c4682d36f5c4359f4ae7bd7ba1" >}}

Do not include Upaknee’s JavaScript snippet on the page when using this shortcode, that will be handled automatically by Hugo. The form ID, client ID and list ID for the shortcode parameters can be found within the JavaScript snippet provided by Upaknee:

<script>
    window.__ugv = ( typeof window.__ugv != 'undefined' && window.__ugv instanceof Array ) ? window.__ugv : [];
    var def = {
        i: '{form_id},
        s: 'https://listmanagement.mbhydromail.ca/',
        f: 'assets/forms/api/',
        c: {client_id},
        l: {list_id},
        t: 'p',
        a: 0,
        d: ['form_{unique_hash}']
    };
    window.__ugv.push(def);
</script>

Other

`article-archives`

Display a menu of publish dates for all articles, each displayed as Month Year and grouped by year.

Parameters

Name	Required?	Description
`show_count`	Optional	Either `true` or `false`. Set to `true` to show the article count next to each link. Default value is `false`.
`class`	Optional	A value for the `class` attribute. Default value is `article-archives`.

Example

{{< article-archives class="article-archives two-columns-across" show_count="true" >}}

`article-list`

Generate a list of articles. This shortcode is very flexible and can be used to display either a simple list of links to articles, or a set of article teasers. The list can be filtered and ordered in various ways using shortcode parameters.

Parameters

Name	Required?	Description
`view`	Optional	The name of the view template to use. Don’t include the file extension. The available options can be found in `layouts/articles/views`. Default value is `li`.
`element`	Optional	The name of the HTML wrapper tag. Only include this parameter if you want to override the default, which is either `ul` or `div`, depending on the view template being used.
`class`	Optional	The value of the `class` attribute. Default value is `article-list`.
`category`	Optional	The name of a category. Use this to display only articles which belong to a specific category.
`tag`	Optional	The name of a tag. Use this to display only articles which are tagged with a specific term.
`featured`	Optional	The name of a feature area. Use this to display only articles which are featured in a specific area.
`limit`	Optional	The number of articles to display. Leave out this parameter to display all articles.
`order`	Optional	Either `asc` or `desc`. Use this to reverse the order in which the articles are displayed.
`orderby`	Optional	Either `weight`, `date`, `title`, or any other front matter variable. Use this to change the order in which the articles are displayed.
`groupby`	Optional	Use `year` or any other front matter variable to group articles.
`title`	Optional	The title to display above the article list. Leave out this parameter to display no title.
`title_element`	Optional	The HTML element used to markup the title. Default value is `h2`.
`title_class`	Optional	The value for the title element’s class attribute. Default value is `list-title`.
`more_text`	Optional	The text used for the “More” link next to the title. Leave out this parameter to omit the “More” link entirely.
`more_href`	Optional	The path that the “More” link leads to. The default value is `/articles/` on English pages, and `/fr/articles/` on French pages.
`more_class`	Optional	The value of the `class` attribute for the “More” link. Default value is `more-link`.

Examples

The following shortcode will display a simple list of the 10 newest articles:

{{< article-list limit="10" >}}

The following shortcode will display a list of all articles in the “News releases” category, grouped by the year in which they were published, with the newest articles at the top of the list:

{{< article-list category="News releases" groupby="year" orderby="date" order="desc" >}}

The following shortcode will display teasers for the 2 latest articles which are tagged with the term “Featured”:

{{< article-list tag="Featured" view="summary" limit="2" >}}

`article-preview`

Display a single article preview.

Parameters

Name	Required?	Description
`permalink`	Required	The root-relative URL to the article.
`view`	Optional	The name of the view template to use. Don’t include the file extension. The available options can be found in `layouts/articles/views`. Default value is `summary`.

When using this shortcode, you should pay special attention to the markup that it produces. Depending on which view you use, you’ll need to adjust the HTML that wraps the shortcode. For example, you should wrap a <ul> element around the shortcode when using the li view.

Example

{{< article-preview permalink="/articles/2022/03/soup_for_the_soul_and_a_chance_to_win_part_of_the_pot/" view="feature" >}}

`include`

Include a partial template within content.

Parameters

Name	Required?	Description
`partial`	Required	The name of the partial template to include.

Example

{{< include partial="subnav/accounts-and-services.en" >}}

`scheduled`

Allow content to be displayed or hidden according to scheduled dates.

Parameters

Name	Required?	Description
`start`	Optional	The start date in the format `YYYY-MM-DD`. The shortcode content will only be displayed on or after this date.
`end`	Optional	The end date in the format `YYYY-MM-DD`. The shortcode content will only be displayed before this date.

Example

The content inside the following shortcode would be shown for one month only, starting on April 20, 2023.

{{< scheduled start="2023-04-20" end="2023-05-20" >}}Content{{< /scheduled >}}

On this page

Components

accordion

Parameters

Example

accordion-item

Parameters

Example

aside

Parameters

Example

featured-video

Parameters

Example

Thumbnail images

Alternate styles

figurebox

Parameters

Example

SVG images

hero-banner

Parameters

Example

pull-quote

Parameters

Example

search-block

Parameters

Example

section-divider

Parameters

Example

Navigation

secondary-links

Parameters

Example

tertiary-links

Parameters

Example

Forms

form-settings

Parameters

Example

required-marker

Example

upaknee-form

Parameters

Example

Other

article-archives

Parameters

Example

article-list

Parameters

Examples

article-preview

Parameters

Example

include

Parameters

Example

scheduled

Parameters

Example

`accordion`

`accordion-item`

`aside`

`featured-video`

`figurebox`

`hero-banner`

`pull-quote`

`search-block`

`section-divider`

`secondary-links`

`tertiary-links`

`form-settings`

`required-marker`

`upaknee-form`

`article-archives`

`article-list`

`article-preview`

`include`

`scheduled`