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.
This shortcode is available starting from
If you are looking to render multiple cards in a deck at once, see Cards Shortcode (notice the plural form).
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.
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:
- If the content is a partial path and the file is available, the partial file will be parsed instead.
- Else, Bissetii will parse the content as a direct Markdown format.
- 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,
TOML format in order to keep things simple.
The full file pattern is shown as follow:
- Line 1-2 - specifies the card
height. The value
- Line 3 - the rendering for the
card-content. You can provide any one of the following values:
- Partial parsing (E.g.
- If fails, directly process with markdown format.
- If fails or HTML codes is detected, direct process with HTML format.
- Partial parsing (E.g.
- Line 10 - creating optional Call-To-Action (CTA) links. Each CTA has
its own positioning tags. CTA main keyword MUST be
- 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
- Line 28-36 - Thumbnail image properties compliant to Image Shortcode parameters.
card shortcode currently accepting the following parameters.
This is the card deck path for rendering all the cards inside it.
Example, for the deck directory located in
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:
""- empty value default to
card- just to generate the card HTML code (default).
grid- generate the deck along with the grid layout.
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:
""- empty value default to normal mode.
embed- embed into the page with no shadow and movements.
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:
This will render the output as:
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