Hugo: shortcode for displaying a cards

For this example, we will use bootstrap cards, you can customize the html code according to your needs.

file: shotcodes/card.html

<div class="card text-bg-light mb-3">
  <div class="card-header"><h2>{{ .Get 0 }}</h2></div>
  <div class="card-body">
    <p class="card-text">{{ .Inner }}</p>
  </div>
</div>

Insert below code in your post

{{% card "Header" %}}
Some quick example text to build on the card title and make up the bulk of the card's content.
{{% /card %}}

Output:

Some quick example text to build on the card title and make up the bulk of the card's content.

From here you can style the shortcode.

Read also

Hugo: How to escape Hugo shortcodes

If want to escape/comment a shortcode (aka. prevent from executing shortcode) in a .md, and display the shortcode itself in the output.

Hugo: frontmatter title block code snippet for Visual Studio Code

In VSCode, Code Snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements. Learn how to use code snippets to generate frontmatter title block for Hugo

Hugo: How to dump a variable to build console

Many time you may want to inspect or dump variables of current scope in Hugo

Hugo: How to filter/remove urls from sitemap.xml

Sometimes you may want to remove certain urls or path from sitemap.xml to improve seo of you website. Here is how you do it for hugo static site generator.

Hugo: How to integrate Handlebar.js with hugo static site generator

Since hugo and handlebar.js both use same template syntax, directly including the handlebar.js template in hugo will reslut hugo build error. Here is the workaround on How to include Handlebar.js or any js templating library that use the same syntax as hugo templates.