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="Jeff Atwood" link="https://blog.codinghorror.com/"
descr="Indoor enthusiast. Co-founder of Stack Overflow and Discourse." >}}

{{< sc_img_card title="Shawn Wang" link="https://www.swyx.io/" 
descr="Writer, Speaker, Developer Advocate. He help developers to Learn in Public!" >}}

{{< sc_img_card title="Sara Soueidan" link="https://www.sarasoueidan.com/"
descr="Sara is an independent inclusive design engineer, author, speaker, 
and trainer based in Lebanon." >}}

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.