notice.html

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.

hugo is safe

This is a security notice.

don't use lightmode at night

This is a warning notice.

cats may destroy furniture

This is a danger notice.

{{< 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 #

{{ $type := .Get 0 | default "info" }}
{{ $title := .Get 1 }}
<div class="notice p-4 mt-2 mb-2 rounded-md shadow-md 
    {{- with $type }}
        {{if eq . "danger" }} bg-brand-7
        {{else if eq . "warning" }} bg-brand-6
        {{else if eq . "security" }} bg-brand-5
        {{else if eq . "tip" }} bg-brand-4
        {{else if eq . "note" }} bg-brand-3 
        {{else if eq . "info" }} bg-brand-2 
        {{else if eq . "snack" }} bg-brand-1 
        {{ end }}
    {{- end }}
">
    <div class="flex">
        <div class="flex-shrink-0">
           <img src="/icons/notice/
            {{- with $type}}
                {{- if eq . "danger" -}} danger
                {{- else if eq . "warning" -}} warning
                {{- else if eq . "security" -}} security
                {{- else if eq . "info" -}} info
                {{- else if eq . "note" -}} note
                {{- else if eq . "tip" -}} tip 
                {{- else if eq . "snack" -}} snack 
                {{- end -}}
            {{- end -}}
           .svg" class="icon w-5 h-5">
        </div>
        <div class="ml-3 w-full text-black text-sm">
            {{- if $title -}}
            <div class="font-brand font-bold mb-2">{{ $title }}</div>
            {{- end -}}
   
                {{ $.Page.RenderString .Inner }}

        </div>
    </div>
</div>

include.html pdoc.html