Card
Use the card
shortcode to display content in a nice card.
Usage
{{% card title="High performance code" href="https://example.com" %}}
Awesome AI accelerated code
```c
printf("Hello World!");
```
{{% /card %}}
{{ partial "shortcodes/card.html" (dict
"page" .
"href" "https://example.com"
"title" "High performance code"
"content" ("Awesome AI accelerated code\n\n```c\nprintf(\"Hello World!\")\n```" | .RenderString)
)}}
If you want to show a set of cards grouped together you can wrap your cards into the cards
shortcode.
Parameter
Name | Default | Notes |
---|---|---|
href | <empty> | Either the destination URL for the card or JavaScript code to be executed on click. If this parameter is set, the card will hover on mouse over. - if starting with javascript: all following text will be executed in your browser- every other string will be interpreted as URL, you can use link effects as well. If this parameter is set, your content is not allowed to contain any other HTML anchor elements. Otherwise your layout may mess up. |
image | <empty> | A image URL to be displayed at the start of the card. |
title | see notes | Arbitrary title for the card. |
template | default |
The template to be used to display the card. - default : The standard layout- debug : A debug layout helping you in developmentSee below how to use your own templates. |
params | <empty> | Arbitrary additional parameter for your template as string (JSON, TOML, YAML) or in a dict .See example below. |
<content> | <empty> | Arbitrary text to be displayed on the card. |
Card Templates
If you have advanced requirements to display your cards, you can place a card layout partial into layouts/partials/card
that will be used for each single card.
For example, if you want to see debug output displaying the parameter the partial receives, you could set template=debug
which will cause the partial layouts/partials/debug.html
to be called. The debug
card template is shipped with the theme.
A card template will be called with all the above parameter. href
and image
are transformed into a form ready to be consumed.
Examples
A Bit of Everything
{{% card title="Everything" image="/images/magic.gif" href="https://example.com" %}}
Image, title and a text
{{% /card %}}
Just Text
Because the text contains source code with the copy-to-clipboard button, you are not allowed to use the href
parameter or your layout may get messed up.
{{% card %}}
reallylongwordthatdoesnotwraparoundandbehaveslikeaprick
```c
printf("Hello Code!");
```
---
And a bullet list
- blue
- red
- yellow
- marshmallow
- cardboard box
- sandals
- kumi ichi
- random stuff
- just made up
- i guess i reached the end
- really?
- you can stop now
{{% /card %}}
reallylongwordthatdoesnotwraparoundandbehaveslikeaprick
printf("Hello Code!");
And a bullet list
- blue
- red
- yellow
- marshmallow
- cardboard box
- sandals
- kumi ichi
- random stuff
- just made up
- i guess i reached the end
- really?
- you can stop now
Image Only
If only an image is displayed, the full card will be used.
{{% card image="/images/magic.gif" %}}
{{% /card %}}

Debug Card Template with Arbitrary Parameter
Show all parameter for the card template with the custom debug
card template.
Adds additional params
for the template.
{{% card template="debug" params={"blub":"bla"} %}}
{{% /card %}}
All Parameter
{
"color": "",
"content": "",
"href": "",
"hrefattributes": {},
"icon": "",
"image": "",
"page": {
"PageWithoutContent": {
"Date": "0001-01-01T00:00:00Z",
"Lastmod": "0001-01-01T00:00:00Z",
"PublishDate": "0001-01-01T00:00:00Z",
"ExpiryDate": "0001-01-01T00:00:00Z",
"Aliases": null,
"BundleType": "branch",
"Description": "Show content in a card",
"Draft": false,
"IsHome": false,
"Keywords": null,
"Kind": "section",
"Layout": "",
"LinkTitle": "Card",
"IsNode": true,
"IsPage": false,
"Path": "/shortcodes/card",
"Slug": "",
"Lang": "en",
"IsSection": true,
"Section": "shortcodes",
"Sitemap": {
"ChangeFreq": "",
"Priority": -1,
"Filename": "sitemap.xml",
"Disable": false
},
"Type": "shortcodes",
"Weight": 0
},
"TableOfContentsProvider": {
"Date": "0001-01-01T00:00:00Z",
"Lastmod": "0001-01-01T00:00:00Z",
"PublishDate": "0001-01-01T00:00:00Z",
"ExpiryDate": "0001-01-01T00:00:00Z",
"Aliases": null,
"BundleType": "branch",
"Description": "Show content in a card",
"Draft": false,
"IsHome": false,
"Keywords": null,
"Kind": "section",
"Layout": "",
"LinkTitle": "Card",
"IsNode": true,
"IsPage": false,
"Path": "/shortcodes/card",
"Slug": "",
"Lang": "en",
"IsSection": true,
"Section": "shortcodes",
"Sitemap": {
"ChangeFreq": "",
"Priority": -1,
"Filename": "sitemap.xml",
"Disable": false
},
"Type": "shortcodes",
"Weight": 0
},
"MarkupProvider": 0,
"ContentProvider": 0
},
"params": {
"blub": "bla"
},
"style": "initial",
"template": "debug",
"title": ""
}