Hugo alert boxes

blockquote.css

/* place under assets/css/blockquote.css */

/* General alert styling */
.alert {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .25rem;
}

.alert-title {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

/* Note style */
.alert-note {
  color: #1c4b78;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-note .alert-title {
  color: #0c5460;
}


/* Warning style */
.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert-warning .alert-title {
  color: #856404;
}

hugo.yaml

# add to hugo.yaml

markup:
  goldmark:
    parser:
      attribute:
        block: true
        title: true

render-blockquote.html

<!-- place at layouts/_default/_markup/render-blockquote.html -->

{{ resources.Get "css/blockquote.css" | .Page.Store.SetInMap "css" "blockquote" }}

{{ $emojis := dict
  "caution" ":exclamation:"
  "important" ":information_source:"
  "note" ":information_source:"
  "tip" ":bulb:"
  "warning" ":information_source:"
}}

{{ if eq .Type "alert" }}
  <blockquote class="alert alert-{{ .AlertType }}">
    <p class="alert-heading">
      {{ transform.Emojify (index $emojis .AlertType) }}
      {{ with .AlertTitle }}
        {{ . }}
      {{ else }}
        {{ or (i18n .AlertType) (title .AlertType) }}
      {{ end }}
    </p>
    {{ .Text }}
  </blockquote>
{{ else }}
  <blockquote>
    {{ .Text }}
  </blockquote>
{{ end }}