Card shortcode for Hugo

This post is assuming that you know how to make a blog in Hugo and what is shortcodes in Hugo.

When I updated this blog recently with blogrolls, I wanted to display cards in my Markdown. Instead of using raw HTML, I decided to create a custom shortcode for cards. In the below I will explain how to create a custom Hugo shortcode and acess the same in the template.

Custom Card Shortcode

Below is the Shortcode for the displaying the card in the Markdown and the rendered ouput.

Shortcode in the markdown

{{< sc_img_card title="Some" link="https://some.com/"
descr="Lorem Ipsum is simply dummy text of the printing and typesetting industry. " >}}

{{< sc_img_card title="Sample" link="https://www.sample.io/" 
descr="Contrary to popular belief, Lorem Ipsum is not simply random text." >}}

{{< sc_img_card title="Title here" link="https://www.title.com/"
descr="It is a long established fact that a reader will be distracted by the readable content." >}}

Rendered output

Let’s check how this shortcode is creaed. As you can see all shortcode parameters can access with .Get method. Whether its a named or positional parameters you can pass a key or the number to the .Get method to acess the values as shown below.

sc_img_card.html

<div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 mb-4">
    <a href="{{ .Get " link" }}" aria-label="Link to the blog">
        <div class="card h-100 bg-faded-light">
            <div class="card-body">
                <h4 class="title">{{ .Get "title" }}</h4>
                <a href="{{ .Get "link" }}" class="m-0 fs-6 text-danger">
                {{ .Get "link" }}
                </a>
                <p class="fs-6 p-01">{{ .Get "descr" }}</p>
            </div>
        </div>
    </a>
</div>

In the above template, I am using the named parameters and you can see .Get "parameter_name" is rendering the tilte, link, and descr from the shortcode as below.

So that how we create our own custom shortcodes in Hugo. Also, please note the style classes in the components are from Bootstrap, but if you want you can modify as per your needs.

You can checkout the live demo in my blogroll.