Create alerts as shortcode or partial or in hugo.toml for global announcements.

The global alert

This is setup in your hugo.toml configuration file. Multiple banners will be displayed for however many [[params.alphaAlert]] blocks you configure.

[params]
  isAlpha = true
[[params.alphaAlert]]
  alertType = "danger"
  alertTitle = "Special Banner add-on included"
  alertMessage = "This theme is a work in progress!"
  alertIconClass = "fa-solid fa-camera-retro"
  dismissable = true

Features:

• Alert Types: Supports info, danger, success, warning, and a default dark type.
• info (blue), success (green), warning (yellow), danger (red), dark (dark)
• Icon Classes: Automatically assigns default icons based on the alert type but allows for custom icons if specified.
• Conditional Display: Only displays the alert box if there is either a title or a message.
• Default Values: Provides default values to avoid issues when variables are not set.
• Dismissable: Defaults to false, add true and it will have an x to close the alert box.

For alertIconClass any fontawesome-free icon class will work.

From the content directory, called as a shortcode.

All of the params are optional, but if neither alertTitle or alertMessage are passed they will not render. The alertIconClass must be a valid fontawesome icon class.

{{< alert-wrapper 
  alertType="info" 
  alertTitle="will" 
  alertMessage="robinson" 
  alertIconClass="fa-solid fa-snowflake"
  dismissable=true
>}}

Alert shortcode examples:

Info

Success

Warning

Danger

Default (no type)

No alertType passed — renders with a neutral gray style. No alertIconClass either, so the default icon is used.

Dismissable alerts

Add dismissable="true" to any alert to show a close button. The user can dismiss it and it will not reappear.

{{< alert-wrapper
  alertType="success"
  alertTitle="All set"
  alertMessage="You can dismiss this alert with the X button."
  dismissable="true"
>}}