Demo

This is an example.

Another example, with a title and multiple paragraphs

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni in ea aut pariatur dolorem quia, dicta sit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta aliquid dicta repellendus! Nobis pariatur, sed blanditiis eaque accusamus consequuntur temporibus obcaecati sunt esse, veritatis doloremque! Dignissimos soluta eius totam cumque.

Usage:

{{< box info >}}
Hello there, and have a nice day
{{< /box >}}

will show:

Hello there, and have a nice day

Variations

We can use {{< box warning >}} instead of {{< box info >}} to get another layout:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, omnis aliquam. Quia unde non, voluptates fuga molestias nobis dicta deserunt incidunt voluptatibus dignissimos

Here with {{< box important >}}

This is an important message.

And now with {{< box tip >}}

This is a tip

Installation

See the Github repository to get the latest version.

Documentation

Adding a title

Markdown can be used to add an emphasized line on top:

{{< box info >}}
**This is a bold line**

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, omnis aliquam...
{{< /box >}}

will output:

This is a bold line

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, omnis aliquam. Quia unde non, voluptates fuga molestias nobis dicta deserunt incidunt voluptatibus dignissimos aliquid aut sapiente magni voluptatum dolores sunt!

Styling the content

Markdown can be used inside the box:

Lorem incididunt commodo occaecat voluptate elit sint.

Eu nostrud laborum adipisicing. Ipsum dolor sit amet consectetur. Nam, omnis aliquam. Quia unde non adipisicing voluptates fuga molestias nobis!

This image link to an external website

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima pariatur quaerat ut magnam quibusdam, ex nulla enim modi dolorum illo voluptas explicabo incidunt aut minus harum dicta, similique voluptates soluta.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem, consectetur pariatur sunt, commodi minus nam unde officia nemo itaque ex labore incidunt recusandae omnis officiis odio ipsum eveniet atque voluptatibus.

Roadmap

Resources

  • This shortcode was shared on Github by Nicolas Martignoni, and was only slightly modified to make the headings optional.
  • This syntax can be hard to remember. This Vscode extension makes it easier to insert Shortcodes and many other Hugo snippets.
  • You can get an overview of the features provided by Markdown with this cheatsheet.