Alert

Flash messages, or alerts, inform users of successful or pending actions.

warn, error, success

Alerts come in different flavours: warn, error, success and a default if none is specified.

Partial

Input in layout/some/template.html: partial

{{ partial "component/alert.html" "Some alert message" }}
{{ partial "component/alert.html" (dict
  "Content" "Some alert message"
  "Params" (slice "warn")
) }}
{{ partial "component/alert.html" (dict
  "Content" "Some alert message"
  "Params" (slice "error")
) }}
{{ partial "component/alert.html" (dict
  "Content" "Some alert message"
  "Params" (slice "success")
) }}

Hugo generated output: html

<div class="flash">
  Some alert message
</div>
<div class="flash flash-warn">
  Some alert message
</div>
<div class="flash flash-error">
  Some alert message
</div>
<div class="flash flash-success">
  Some alert message
</div>

Shortcode

Input in content/some/file.md: shortcode

{{<alert>}}Some alert message.{{</alert>}}
{{<alert warn>}}Some alert message (warn).{{</alert>}}
{{<alert error>}}Some alert message (error).{{</alert>}}
{{<alert success>}}Some alert message (success).{{</alert>}}

Hugo generated output: html

<div class="flash">
  Some alert message.
</div>
<div class="flash flash-warn">
  Some alert message (warn).
</div>
<div class="flash flash-error">
  Some alert message (error).
</div>
<div class="flash flash-success">
  Some alert message (success).
</div>

full

Add full to make the message full width and remove border and border radius.

Input in content/some/file.md: shortcode

{{<alert full>}}Some alert message (full).{{</alert>}}

Hugo generated output: html

<div class="flash flash-full">
  Some alert message (full).
</div>

banner

Add banner to make the message fixed positioned at the top of the page.

Input in content/some/file.md: shortcode

<div style="min-height: 64px;">
{{<alert banner>}}Some alert message (banner).{{</alert>}}
</div>

Hugo generated output: html

<div style="min-height: 64px;">
<div class="flash flash-banner">
  Some alert message (banner).
</div>
</div>

multiple attributes

Partial

Input in layout/some/template.html: partial

{{ partial "component/alert.html" (dict
  "Content" "Some alert message (warn full banner)"
  "Params" (slice "warn" "full" "banner")
) }}

Hugo generated output: html

<div style="min-height: 64px;">
<div class="flash flash-warn flash-full flash-banner">
  Some alert message (warn full banner)
</div>
</div>

Shortcode

Input in content/some/file.md: shortcode

<div style="min-height: 64px;">
{{<alert warn full banner>}}Some alert message (warn, full, banner).{{</alert>}}
</div>

Hugo generated output: html

<div style="min-height: 64px;">
<div class="flash flash-warn flash-full flash-banner">
  Some alert message (warn, full, banner).
</div>
</div>

Blankslate Button