Tag: Bulma

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.

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.

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.