Category: Shortcodes

Figures

Jul 31, 2017 4 min.

Capsule provides three shortcodes for embedding images, responsive images, and groups of images with relevant metadata. img The {{< img >}} shortcode simply adds an img tag with the following parameters: align: aligns the image and wrap text around (‘right’ or ’left’) alt (or caption): set the alt text for the image class: adds CSS classes to the img tag link: wraps the img in anchor tags so that the image has a clickable link.

Blockquotes

Jul 30, 2017 2 min.

Use the {{< blockquote >}} shortcode to highlight blocks of text and also add metadata. Parameters: author: source author, appears as the title in the blockquote footer source: book, context, etc. where the text is derived, appearing as a subtitle below the author in the footer date: also appears as subtitle in the footer Note You can specify whether the content inside the notification is rendered as plain HTML or Markdown by using {{< >}} or {{% %}}, respectively.

Banners

Jul 30, 2017 2 min.

The {{< banner >}} and {{< banner-fluid >}} shortcodes use the Bulma hero class to display banners that can either fill the entire container width or the entire viewport width, respectively. Parameters: title: the text to be displayed prominently in the center of the banner class: string of classes to add to banner subtitle: smaller text displayed under the title img: url to background image mode: how the image is used to fill the banner space (‘stretch’ or ‘repeat’) Text to display in the body of the banner goes in between the {{< banner >}} tags.

Messages

Jul 30, 2017 1 min.

The message shortcode is a simple wrapper for the Bulma message class. The syntax is: {{< message class="<class>" title="<title>" >}} content {{< /message >}} your title your content Replace <title> with the title of the message and <class> with a Bulma class. The class markup is taken directly from the names of the Bulma classes: is-dark is-primary is-info is-success is-danger is-warning If no class is specified, the message will default to something similar to the dark version.

Notifications

Jul 29, 2017 1 min.

This shortcode wraps text within a Bulma notification class. They will occupy the container width. Given that no JS is included, notifications cannot be dismissed unless you add your own custom functions. These only really function to highlight text. To use, follow this syntax: {{< notification <class> >}} notification content {{< /notification >}} The available classes correspond to the class names available in Bulma: is-dark is-primary is-info is-success is-warning is-danger Note You can specify whether the content inside the notification is rendered as plain HTML or Markdown by using {{< >}} or {{% %}}, respectively.

Built-in Shortcodes

May 8, 2017 1 min.

Hugo comes with several built-in shortcodes. Some examples of them are displayed below. For a full list of available shortcodes, go to the Hugo website.