We use cookies on this site to enhance your user experience

By clicking the Accept button, you agree to us doing so. More info on our cookie policy

Notifications

Page Components

Contents

Bulma Notifications

Bulma offers a notification component to show a messages.

Use the following code to include a simple notification.

{% include notification.html message="This is the message for the notification" %}

Overriding Defaults

The message is required but the status defaults to ‘is-warning’ and the icon defaults to ‘fas fa-exclamation-circle’, but can be overwritten by setting the values in the includes.

This is the message for the notification

{% include notification.html message="This is the message for the notification" 
status="is-danger" 
icon="fas fa-exclamation-triangle" %}

Markdown message

The notification message can also be written in markdown.

This message contains markdown and a link.

It also contains a second paragraph and a list.

  • List item
  • List item
{% include notification.html 
message="This **message** contains _markdown_ and a [link](https://www.csrhymes.com).

It also contains a second paragraph.

* List item
* List item
"  %}

Dismissible Notifications

To set a notification to be dismissible, set dismissible to ‘true’

This notification is dismissable

{% include notification.html
message="This notification is dismissable"
status="is-info"
dismissable="true" %}

Iconless Notifications

Omit the icon by setting icon to ‘false’

This notification does not have an icon.

{% include notification.html
message="This notification does not have an icon."
icon="false"
status="is-success" %}