Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
To avoid this limitations, Hugo created shortcodes. A shortcode is a simple snippet inside a page.
Hugo-theme-learn provides multiple shortcodes on top of existing ones.
The notice shortcode shows 4 types of disclaimers to help you structure your page.
{{% notice note %}}
A notice disclaimer
{{% /notice %}}
renders as
A notice disclaimer
{{% notice info %}}
An information disclaimer
{{% /notice %}}
renders as
An information disclaimer
{{% notice tip %}}
A tip disclaimer
{{% /notice %}}
renders as
A tip disclaimer
{{% notice warning %}}
An warning disclaimer
{{% /notice %}}
renders as
A warning disclaimer
Button is a just a clickable button with optional icon.
{{% button href="https://getgrav.org/" %}}Get Grav{{% /button %}}
{{% button href="https://getgrav.org/" icon="fa fa-play" %}}Get Grav with icon{{% /button %}}
{{% button href="https://getgrav.org/" icon="fa fa-share" icon-position="right" %}}Get Grav with icon right{{% /button %}}