cards Shortcode

cards shortcode is a multiple card renderer suitable for rendering mulitple cards data like a deck. Unlike card which is only specific to a single card data, cards takes data directory path and automatically parse each card's data.

Example usage:

1
2
{{< cards "bissetii.data.cards" "grid" "embed" >}}
{{< cards "bissetii.data.cards" "card" >}}

This shortcode is available starting from v1.13.0.

If you are looking to render a single particular card, see Card Shortcode (notice the singular form).

Heads-Up

While the shortcode is useful, it breaks the Markdown syntax conventions due to Hugo specific shortcode feature. Therefore, when using other Markdown renderer, these shortcodes would be rendered as text instead of HTML code fragments.

Also, be careful and stay safe while using this shortcode. It allows any form of HTML to be embedded into your Markdown page.

Using cards

The parameters are equivalent to card with 1 exception:

  1. It accepts directory holding card TOML data files like “a deck of cards”.

The rest of the parameters will be directly fed to each Card Shortcode under the hood.

Since this is a HTML renderer in Markdown file, you want to call in the shortcode using the < symbol instead of %. The brackets are as follow:

1
2
3
4
5
6
# This is Markdown Heading
Your normal text here.

{{< cards "bissetii.data.cards" "grid" "embed" >}}

## Back to Markdown

This will render the output as:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
<h1>This is Markdown Heading</h1>
<p>Your normal text here.</p>


	<div class="row">
		<div class="column">

<article class="Card embed"
	style="min-width: 500px;
		width: 500px;
		min-height: 500px;
		height: 500px;">
	<div class="card-thumbnail">
		
<img alt="Card Info 1"
	src="https://bissetii.zoralab.com/img/thumbnails/default-1200x1200.png"
	width="500px"
	height="263px"
	loading="lazy"/>
		
<img alt="Card Info 1a"
	src="https://bissetii.zoralab.com/img/thumbnails/default-1200x1200.png"
	width="500px"
	height="263px"
	loading="lazy"/>
	</div>
		<div class="card-content"><h3 id="my-card-title-here">My Card Title Here</h3>
<p>This can be written in Markdown where it will be processed into HTML
automatically.</div>
		<ul class="card-call-to-action">
			<li><a href="https://bissetii.zoralab.com/"
	id="card1-cta-home">Home</a></li>
			<li><a href="https://bissetii.zoralab.com/"
	id="card1-cta-buy"
	class="pinpoint">Buy</a></li>
		</ul>
</article>

		</div>
		<div class="column">

<article class="Card embed"
	style="min-width: 250px;
		width: 250px;
		min-height: 500px;
		height: 500px;">
	<div class="card-thumbnail">
		
<img alt="Card Info 2"
	src="https://bissetii.zoralab.com/img/thumbnails/default-1200x628.png"
	width="500px"
	height="263px"
	loading="lazy"/>
	</div>
		<div class="card-content"><h3>My Card 2 Title Here</h3>
<p>
	This is the content of another card. You can design as many as you want
	but you can try to keep things under a single umbrella.
</p>
</div>
		<ul class="card-call-to-action">
			<li><a href="https://bissetii.zoralab.com/">Home</a></li>
			<li><a href="https://bissetii.zoralab.com/"
	class="pinpoint">Buy</a></li>
		</ul>
</article>

		</div>
		<div class="column">

<article class="Card embed"
	style="min-width: 200px;
		width: 200px;
		min-height: auto;
		height: auto;">
		<div class="card-content"><h3 id="card-3-title-here">Card 3 Title Here</h3>
<p>This is to demonstrate that the content can be written in markdown. The entire
content here are completely written in Markdown.</div>
		<ul class="card-call-to-action">
			<li><a href="https://bissetii.zoralab.com/"></a></li>
			<li><a href="https://bissetii.zoralab.com/"></a></li>
		</ul>
</article>

		</div>
		<div class="column">

<article class="Card embed"
	style="min-width: 200px;
		width: 200px;
		min-height: auto;
		height: auto;">
		<div class="card-content"><h3>Card 4 Here</h3>
<p>
	This is to demonstrate that the Content field can be written using HTML
	codes. The Content field here is written with HTML codes.
</p>
</div>
</article>

		</div>
	</div>

<h2>Back to Markdown></h2>

Conclusion

That’s all about cards shortcode in Bissetii. If you need more feature or need to report a bug, please feel free to file an issue at our Issue Section.