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

## Metadata

- **Section**: features
- **Type**: features
- **Author**: Lawrence Lane
- **Parent**: [notice.html](/features/shortcodes/index.txt)

## Navigation
- **Current Section**: [notice.html](/features/shortcodes/index.txt)