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.
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 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 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": "",
      "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": 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": "filled",
      "template": "debug",
      "title": ""
    }