Cards

The cards shortcode displays your content in a grouped set of cards.

Python Example
The AI native programming language.
print("Hello World!")
Terminal Example
For guys who like to tinker around.
echo "Hello World!"
C Example
For the connoisseur of programming.
printf("Hello World!");

Usage

{{< cards >}}
{{% card href="https://example.com" title="Python Example" %}}
The AI native programming language.

```python
print("Hello World!")
```
{{% /card %}}
{{% card title="Terminal Example" %}}
For guys who like to tinker around.

```bash
echo "Hello World!"
```
{{% /card %}}
{{% card title="C Example" %}}
For the connoisseur of programming.

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

{{ partial "shortcodes/cards.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "The AI native programming language.\n\n```python\nprint(\"Hello World!\")\n```"
      "href" "https://example.com"
      "title" "Python Example"
    )
    (dict
      "content" "For guys who like to tinker around.\n\n```bash\necho \"Hello World!\"\n```"
      "title" "Terminal Example"
    )
    (dict
      "content" "For the connoisseur of programming.\n\n```c\nprintf(\"Hello World!\");\n```"
      "title" "C Example"
    )
  )
)}}

Parameters

Name	Default	Notes
template	`default`	The template to be used to display all cards in the set. Can be overridden for each card. - `default`: The standard layout - `debug`: A debug layout helping you in development See below how to use your own templates.
<content>	<empty>	Arbitrary number of cards defined with the `card` sub-shortcode.

Card Parameters

Each card of the set is defined with the card shortcode.

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.
action	<empty>	Name of an action executed by your own script on click, without inline JavaScript. Use this instead of a JavaScript href if your site uses a strict Content Security Policy. If this parameter is set, the card will hover on mouse over. See example.
image	<empty>	URL to an image to be displayed at the start of the card.
imagealt	<empty>	Text alternative for the `image`, announced by a screen reader in place of the image. Set it if the card shows nothing but its image, as the image is then the only thing left to name the card. Without it such a card falls back to the title of the page its `href` leads to, or to the `href` itself. Leave it empty if the card also shows a title. The title names the card, so the image beside it is marked as decorative with an empty `alt` attribute.
title	<empty>	Arbitrary title for the card.
template	`default`	The template to be used to display the card. Overrides the template of the set. - `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.

Single Card

If you just want a single card, you can call the card shortcode standalone, without the enclosing cards shortcode.

{{% 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"
)}}

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

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 card parameters. href and image are transformed into a form ready to be consumed.

Examples

Lots of Cards

If only an image is displayed, the full card will be used. As no title is left to name the card, describe the image with the imagealt parameter.

{{< cards >}}
{{% card href="/images/magic.gif?download" image="/images/magic.gif" title="Everything" %}}
Image, title, text and href.

You can also use image effects in your `href`. This card will download the image.
{{% /card %}}
{{% card title="Title and Text" %}}Just a title and a text. You can use any **Markdown** in the text{{% /card %}}
{{% card title="Title Only" %}}{{% /card %}}
{{% card image="/images/magic.gif" title="Image and Title" %}}{{% /card %}}
{{% card image="/images/magic.gif" %}}Image and a text{{% /card %}}
{{% card %}}
Text only

> [!note]
> Because this content contains source code the copy-to-clipboard button will only be usable if `href` and `action` parameter are **not** set.

```c
printf("Hello Code!");
```
{{% /card %}}
{{% card href="/images/magic.gif?download" image="/images/magic.gif" imagealt="A top hat with a rabbit peeking out" %}}{{% /card %}}
{{< /cards >}}

{{ partial "shortcodes/cards.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "Image, title, text and href.\n\nYou can also use image effects in your `href`. This card will download the image."
      "href" "/images/magic.gif?download"
      "image" "/images/magic.gif"
      "title" "Everything"
    )
    (dict
      "content" "Just a title and a text. You can use any **Markdown** in the text"
      "title" "Title and Text"
    )
    (dict
      "content" ""
      "title" "Title Only"
    )
    (dict
      "content" ""
      "image" "/images/magic.gif"
      "title" "Image and Title"
    )
    (dict
      "content" "Image and a text"
      "image" "/images/magic.gif"
    )
    (dict
      "content" "Text only\n\n> [!note]\n> Because this content contains source code the copy-to-clipboard button will only be usable if `href` and `action` parameter are **not** set.\n\n```c\nprintf(\"Hello Code!\");\n```"
    )
    (dict
      "content" ""
      "href" "/images/magic.gif?download"
      "image" "/images/magic.gif"
      "imagealt" "A top hat with a rabbit peeking out"
    )
  )
)}}

Everything

Image, title, text and href.

You can also use image effects in your href. This card will download the image.
Title and Text

Just a title and a text. You can use any Markdown in the text
Title Only
Image and Title
Image and a text
Text only

Note

Because this content contains source code the copy-to-clipboard button will only be usable if href and action parameter are not set.
printf("Hello Code!");

Lots of Cards with Templates

The debug card template shows all parameter it receives.

The C card adds additional params for the template.

{{< cards template="debug" >}}
{{% card params="{"blub":"bla"}" title="C" %}}For the connoisseur of programming.{{% /card %}}
{{% card title="C++" %}}For the guys that can cope with syntax.{{% /card %}}
{{% card title="C#" %}}For guys that need two destructors.{{% /card %}}
{{< /cards >}}

{{ partial "shortcodes/cards.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "For the connoisseur of programming."
      "params" "{\"blub\":\"bla\"}"
      "title" "C"
    )
    (dict
      "content" "For the guys that can cope with syntax."
      "title" "C++"
    )
    (dict
      "content" "For guys that need two destructors."
      "title" "C#"
    )
  )
  "template" "debug"
)}}

All Parameter

{
  "action": "",
  "color": "",
  "content": "For the connoisseur of programming.",
  "href": "",
  "hrefattributes": {},
  "icon": "",
  "image": null,
  "imagealt": "",
  "imageattributes": {},
  "onclick": "",
  "page": "/shortcodes/cards",
  "params": {
    "blub": "bla"
  },
  "style": "filled",
  "template": "debug",
  "title": "C"
}

C++

All Parameter

{
  "action": "",
  "color": "",
  "content": "For the guys that can cope with syntax.",
  "href": "",
  "hrefattributes": {},
  "icon": "",
  "image": null,
  "imagealt": "",
  "imageattributes": {},
  "onclick": "",
  "page": "/shortcodes/cards",
  "params": null,
  "style": "filled",
  "template": "debug",
  "title": "C++"
}

All Parameter

{
  "action": "",
  "color": "",
  "content": "For guys that need two destructors.",
  "href": "",
  "hrefattributes": {},
  "icon": "",
  "image": null,
  "imagealt": "",
  "imageattributes": {},
  "onclick": "",
  "page": "/shortcodes/cards",
  "params": null,
  "style": "filled",
  "template": "debug",
  "title": "C#"
}

Card with Own Action

The card is written with a data-button-action attribute. Handle it in your assets/js/custom.js, which the theme loads on every page.

{{% card action="shout" title="Shout it out" %}}Click to greet the world{{% /card %}}

{{ partial "shortcodes/card.html" (dict
  "page" .
  "action" "shout"
  "content" "Click to greet the world"
  "title" "Shout it out"
)}}

document.addEventListener('click', function (event) {
  var button = event.target.closest('button[data-button-action="shout"]');
  if (button) {
    alert('Hello world!');
    button.blur();
  }
});