Hugo alert box shortcode

If you are using Hugo as your static site generator, you might want to create a card shortcode that can display different types of information on your blog posts. A card is a small rectangular element that can show an image, a title, a subtitle, and some text.

In this post, I will show you how to create a card shortcode that can accept both predefined data and custom data that you can pass from your Markdown file.

Please note that, this post is assuming that you know how to make a blog in Hugo and what is shortcodes in Hugo.

Custom alert card shortcode

The data depends on the header parameter that you specify in the Shortcode. For example, if you use the Shortcode below, it will check if the header value matches any of the cases in the if statement. If it does, it will display the corresponding data. If not, it will display the content value that you provide in the Markdown. You can also add a title to the card by using the title parameter

Card with predifned data

Below example showing how you can display a predifined content using this shortcode.

Shortcode

{{/* < alert_box header="lorem-ipsum" title="What is Lorem Ipsum?"  > */}}

Output

Card with custom data

Below example showing how you can display a custom content using this shortcode. Also you can pass the roles such as alert or danger to the Shortcode and it will style the card accordingly. If no role is passed default style will load.

Shortcode

{{/* < alert_box title="Primary alert" content="A simple primary alert—check it out!" > */}}

{{/*< alert_box role="success" title="Success alert" content="A simple success alert—check it out!" >*/}}

{{/*< alert_box role="warning" title="Warning alert" content="A simple warning alert—check it out!" >*/}}

{{/*< alert_box role="danger" title="Danger alert" content="A simple danger alert—check it out!" >*/}}

Output

Below is the code for above custom shortcode.

alert_box.html

{{ $header := .Get "header" }}
{{ $role := .Get "role" }}

{{ $roleClass := "" }}

{{ if eq $role "success"}}
    {{ $roleClass = "alert alert-success"}}
{{ else if eq $role "warning"}}
    {{ $roleClass = "alert alert-warning"}}
{{ else if eq  $role "danger" }}
    {{ $roleClass = "alert alert-danger"}}
{{ else }}
    {{ $roleClass = "info-card-bg"}}
{{ end }}


<div class="card mb-3 p-0 {{$roleClass}} ">
    <div class="card-body">
        {{ with .Get "title" }} 
        <h5 class="card-title">
            {{ . }}
        </h5>
        {{ end }}

        <p class="card-text text-muted fs-6">
            {{ if eq $header "lorem-ipsum"}}
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            {{ else if eq  $header "another-info" }}
                Contrary to popular belief, Lorem Ipsum is not simply random text.
            {{ else }}
                {{ with .Get "content" }} 
                    {{ . }}
                {{ end }}
            {{ end }}
        </p>
    </div>
</div>

You can put the above HTML file in the layouts/shortcodes folder as alert_box.html. If you want, you can modify the shortcode as per your requirments to add more details. The style classes in the components are from Bootstrap, but you can use as per you preferences.

For exploring more, you can checkout the Card shortcode here.