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 dedicated documentation.
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!
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
- Provide more layouts
- Add icons and allow to choose which one is used. Get inspiration from the “badge and buttons” shortcode
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.