Card

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

High performance code

Awesome AI accelerated code

printf("Hello World!");

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

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": ""
}