Card

Use the card shortcode to display content in a nice card.

High performance code
Awesome AI accelerated code
printf("Hello World!");

Usage

{{% card href="https://example.com" title="High performance code" %}}
Awesome AI accelerated code

```c
printf("Hello World!");
```
{{% /card %}}

{{ partial "shortcodes/card.html" (dict
  "page" .
  "content" "Awesome AI accelerated code\n\n```c\nprintf(\"Hello World!\");\n```"
  "href" "https://example.com"
  "title" "High performance code"
)}}

If you want to show a set of cards grouped together you can wrap your cards into the cards shortcode.

Parameters

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.
image	<empty>	URL to an image to be displayed at the start of the card.
title	<empty>	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 development See 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 href="https://example.com" image="/images/magic.gif" title="Everything" %}}Image, title and a text{{% /card %}}

{{ partial "shortcodes/card.html" (dict
  "page" .
  "content" "Image, title and a text"
  "href" "https://example.com"
  "image" "/images/magic.gif"
  "title" "Everything"
)}}

Everything

Image, title and a text

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 %}}

{{ partial "shortcodes/card.html" (dict
  "page" .
  "content" "reallylongwordthatdoesnotwraparoundandbehaveslikeaprick\n\n```c\nprintf(\"Hello Code!\");\n```\n\n---\n\nAnd a bullet list\n\n- blue\n- red\n- yellow\n- marshmallow\n- cardboard box\n- sandals\n- kumi ichi\n- random stuff\n- just made up\n- i guess i reached the end\n- really?\n- you can stop now"
)}}

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 %}}

{{ partial "shortcodes/card.html" (dict
  "page" .
  "content" ""
  "image" "/images/magic.gif"
)}}

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 params="{"blub":"bla"}" template="debug" %}}{{% /card %}}

{{ partial "shortcodes/card.html" (dict
  "page" .
  "content" ""
  "params" "{\"blub\":\"bla\"}"
  "template" "debug"
)}}

All Parameter

{
  "color": "",
  "content": "",
  "href": "",
  "hrefattributes": {},
  "icon": "",
  "image": null,
  "imageattributes": {},
  "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": [],
      "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": [],
      "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": "filled",
  "template": "debug",
  "title": ""
}

  </div>
</div>