Hugo Shortcodes Library
GitHubToggle Dark/Light/Auto modeToggle Dark/Light/Auto modeToggle Dark/Light/Auto modeBack to homepage


A Hugo shortcode to create Notion-style callout blocks.

How to use


{{< callout emoji="⚠️" >}}
**Markdown works in here.**
> yes it does.
{{< /callout >}}


# callout.html

    #callout {
        background: #F9F9F9;
        padding: 1.5em 1.25em;
        border-radius: 3px;
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;

    #callout-inner {
        margin-left: 2em;

    @media (max-width: 767px) {
        #callout {
            padding: 1.5em 0.75em 1.5em 0.6em;

        #callout-inner {
            margin-left: 0.5em;
<div id="callout">
    <div>{{ .Get "emoji" }}</div>
    <div id="callout-inner">
        {{ .Inner  | markdownify }}



Markdown works in here.

yes it does.

Source Unknown