Callout

A Hugo shortcode to create Notion-style callout blocks.

# file.md

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

# callout.html

<style>
    #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;
        }
    }
</style>
<div id="callout">
    <div>{{ .Get "emoji" }}</div>
    <div id="callout-inner">
        {{ .Inner  | markdownify }}
    </div>
</div>

Source Unknown