Open LLM text
Share with AI
Ask Claude Ask ChatGPT Ask Copilot

notice.html

learn how to use the notice shortcode

Occasionally you might need to make admonitions, callouts, or notices in your documentation. Use the {{<notice>}} shortcode to display these.

How it works

The {{<notice>}} shortcode accepts 2 positional args: type and title. Both are optional. If no type is set, the notice defaults to info.

Examples

without type
This is a default notice.
want a cookie?
This is a snack notice.
you don't have to add a title
This is a tip notice.
there's a lot of options
This is a note notice.
probably redundant with note
This is a info notice.
html
{{< notice "" "without type" >}}
This is a **default** notice.
{{< /notice >}}

{{< notice snack "want a cookie?" >}}
This is a **snack** notice.
{{< /notice >}}

{{< notice tip "you don't have to add a title">}}
This is a **tip** notice.
{{< /notice >}}

{{< notice note "there's a lot of options" >}}
This is a **note** notice.
{{< /notice >}}

{{< notice info "probably redundant with note" >}}
This is a **info** notice.
{{< /notice >}}

{{< notice security "hugo is safe" >}}
This is a **security** notice.
{{< /notice >}}

{{< notice warning "don't use lightmode at night" >}}
This is a **warning** notice.
{{< /notice >}}

{{< notice danger "cats may destroy furniture" >}}
This is a **danger** notice.
{{< /notice >}}

Source code

go
{{ $type := .Get 0 | default "info" }}
{{ $title := .Get 1 }}
{{ $isAlert := or (eq $type "danger") (or (eq $type "warning") (eq $type "security")) }}
{{ $role := cond $isAlert "alert" "note" }}
<div class="notice notice--{{ $type }} group"
     data-component="notice"
     data-notice-type="{{ $type }}"
     role="{{ $role }}"{{ if $isAlert }} aria-live="polite"{{ end }}>
      <div class="notice__container">
    <div class="notice__icon-wrapper">
           {{- $iconName := "" -}}
            {{- with $type -}}
                {{- if eq . "danger" -}}{{ $iconName = "danger" }}
                {{- else if eq . "warning" -}}{{ $iconName = "warning" }}
                {{- else if eq . "security" -}}{{ $iconName = "security" }}
                {{- else if eq . "info" -}}{{ $iconName = "info" }}
                {{- else if eq . "note" -}}{{ $iconName = "note" }}
                {{- else if eq . "tip" -}}{{ $iconName = "tip" }}
                {{- else if eq . "snack" -}}{{ $iconName = "snack" }}
                {{- end -}}
            {{- end -}}
           <img src="{{ printf "icons/notice/%s.svg" $iconName | relURL }}" class="notice__icon" alt="" aria-hidden="true">
        </div>
            <div class="notice__content">
      {{- if $title -}}
        <div class="notice__title">{{ $title }}</div>
      {{- end -}}
      <div class="notice__text">
                {{ $.Page.RenderString .Inner }}
            </div>
        </div>
    </div>
</div>