card Shortcode

card shortcode is a renderer that renders a specific card data easily into card format with various designs. This shortcode is mainly makes things easier to use since it involves many integrated data together.

Example usage:

1

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

This shortcode is available starting from v1.12.1.

If you are looking to render multiple cards in a deck at once, see Cards Shortcode (notice the plural 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 card

card shortcode relies completely on data file to render every cards. You should create the component listed here starting from top to bottom.

Create Card Contents

There are 3 different methods to create the card contents. You may use only 1 method as per your use cases. Here, the methods are arranged in their parsing sequences.

Bissetii parse your card content is the following priority:

1. If the content is a partial path and the file is available, the partial file will be parsed instead.
2. Else, Bissetii will parse the content as a direct Markdown format.
3. If any HTML codes are detected, Bissetii performs the last resort which is to parse the entire content as a direct HTML format.

Create Every Cards' Data File

Inside the card data deck directory, you should create each data file for every single card.

You can name if however you want as the shortcode will not use it. However, Bissetii recommends TOML format in order to keep things simple.

The full file pattern is shown as follow:

 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

Width = "500px"
Height = "500px"
Content = """
### My Card Title Here
This can be written in Markdown where it will be processed into HTML
automatically.
"""


[CTA.1]
URL = "/"
Content = "Home"
ID = "card1-cta-home"
Class = ""
Download = false
Target = ""

[CTA.2]
URL = "/"
Content = "Buy"
ID = "card1-cta-buy"
Class = "pinpoint"
Download = false
Target = ""


[Thumbnails.1]
AltText = "Card Info 1"
SourceURL = "/img/thumbnails/default-1200x1200.png"
Width = "500px"
Height = "263px"
IsMap = "false"
LoadingMode = "lazy"
SourceSet = ""
Layout = "responsive"
Class = ""

[Thumbnails.2]
AltText = "Card Info 1a"
SourceURL = "/img/thumbnails/default-1200x1200.png"
Width = "500px"
Height = "263px"
IsMap = "false"
LoadingMode = "lazy"
SourceSet = ""
Layout = "responsive"
Class = ""

• Line 1-2 - specifies the card width and height. The value auto is allowed.
• Line 3 - the rendering for the card-content. You can provide any one of the following values:
  1. Partial parsing (E.g. layouts/partials/bissetii-only/card/sample.html).
  2. If fails, directly process with markdown format.
  3. If fails or HTML codes is detected, direct process with HTML format.
• Line 10 - creating optional Call-To-Action (CTA) links. Each CTA has its own positioning tags. CTA main keyword MUST be CTA.
• Line 11-16 - CTA link properties compliant to Link Shortcode parameters.
• Line 27 - creating optional cards' image thumbnails. Each thumbnail has its own position tags. Thumbnails main keyword MUST be Thumbnails.
• Line 28-36 - Thumbnail image properties compliant to Image Shortcode parameters.

Calling Shortcode

1

{{< card "<deckPath>" "<outputType>" "<embedMode>" >}}

card shortcode currently accepting the following parameters.

deckPath Parameter

This is the card deck path for rendering all the cards inside it.

Example, for the deck directory located in data/bissetii/data/cards, the deckPath is bissetii.data.cards.

outputType Parameter

This is to instruct shortcode to generate the card deck alongside with grid system or just the card itself. Currently, it accepts the following values:

0. "" - empty value default to card.
1. card - just to generate the card HTML code (default).
2. grid - generate the deck along with the grid layout.

embedMode Parameter

Set this value to embed if you want the card not to have shadow and animations but embedded into the page instead. Currently it accepts the following values:

0. "" - empty value default to normal mode.
1. embed - embed into the page with no shadow and movements.

Example Usage

Since this is a HTML renderer in Markdown file, you want to call in the shortcode using the < symbol instead of %.

The example usage is as follows:

1
2
3
4
5
6

# This is Markdown Heading
Your normal text here.

{{< card "bissetii.data.cards.card1" "card" >}}

## 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

<h1>This is Markdown Heading</h1>
<p>Your normal text here.</p>

<article class="Card false"
	style="--card-width: 500px;--card-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><link href="https://bissetii.zoralab.com/"/></li>
			<li><link href="https://bissetii.zoralab.com/"/></li>
		</ul>
</article>


<h2>Back to Markdown></h2>

Conclusion

That’s all about card 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.