Cards

Th' cards shortcode displays yer rrrambl'n 'n a grouped set o' cards.

• Python Example

  Th' AI native programm'n language.

  print("Hello World!")

• Terminal Example

  For guys who like t' tinker around.

  echo "Hello World!"

• C Example

  For th' connoisseur o' programm'n.

  printf("Hello World!");

Usage

{{< cards >}}
{{% card href="https://example.com" title="Python Example" %}}
Th' AI native programm'n language.

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

```bash
echo "Hello World!"
```
{{% /card %}}
{{% card title="C Example" %}}
For th' connoisseur o' programm'n.

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

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

Parameters

Card Parameters

Each card o' th' set be defined wit' th' card shortcode.

Single Card

If ye just want a single card, ye can call th' card shortcode standalone, without th' enclos'n 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 ye have advanced requirements t' display yer cards, ye can place a card layout partial into layouts/partials/card that will be used fer each single card.

For example, if ye want t' see debug output display'n th' parameter th' partial receives, ye could set template=debug which will cause th' partial layouts/partials/cards/debug.html t' be called. Th' debug card template be shipped wit' th' theme.

A card template will be called wit' all th' card parameters. href an' image be transformed into a form ready t' be consumed.

Examples

Lots o' Cards

If only an image be displayed, th' full card will be used. As no title be left t' name th' card, describe th' image wit' th' imagealt parameter.

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

Ye can also use image effects 'n yer `href`. This card will download th' image.
{{% /card %}}
{{% card title="Title an' Text" %}}Just a title an' a text. Ye can use any **Marrrkdown** 'n th' text{{% /card %}}
{{% card title="Title Only" %}}{{% /card %}}
{{% card image="/images/magic.gif" title="Image an' Title" %}}{{% /card %}}
{{% card image="/images/magic.gif" %}}Image an' a text{{% /card %}}
{{% card %}}
Text only

> [!note]
> Because this rrrambl'n contains source code th' copy-t'-clipboard button will only be us'ble if `href` an' `action` parameter be **not** set.

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

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

• Everyth'n

  Image, title, text an' href.

  Ye can also use image effects 'n yer href. This card will download th' image.

  
• Title an' Text

  Just a title an' a text. Ye can use any Marrrkdown 'n th' text
• Title Only
• Image an' Title

  
• Image an' a text

  

• Text only

  Avast

  Because this rrrambl'n contains source code th' copy-to-clipboard button will only be us'ble if href an' action parameter be not set.

  printf("Hello Code!");

• 

Lots o' Cards wit' Templates

Th' debug card template shows all parameter it receives.

Th' C card adds additional params fer th' template.

{{< cards template="debug" >}}
{{% card params="{"blub":"bla"}" title="C" %}}For th' connoisseur o' programm'n.{{% /card %}}
{{% card title="C++" %}}For th' guys that can cope wit' rules.{{% /card %}}
{{% card title="C#" %}}For guys that need two destructors.{{% /card %}}
{{< /cards >}}

{{ partial "shortcodes/cards.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "For th' connoisseur o' programm'n."
      "params" "{\"blub\":\"bla\"}"
      "title" "C"
    )
    (dict
      "content" "For th' guys that can cope wit' rules."
      "title" "C++"
    )
    (dict
      "content" "For guys that need two destructors."
      "title" "C#"
    )
  )
  "template" "debug"
)}}

• C

  All Parameter

  {
    "action": "",
    "color": "",
    "content": "For th' connoisseur o' programm'n.",
    "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 th' guys that can cope wit' rules.",
    "href": "",
    "hrefattributes": {},
    "icon": "",
    "image": null,
    "imagealt": "",
    "imageattributes": {},
    "onclick": "",
    "page": "/shortcodes/cards",
    "params": null,
    "style": "filled",
    "template": "debug",
    "title": "C++"
  }

• 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 wit' Own Act'n

Th' card be written wit' a data-button-action attribute. Handle it 'n yer assets/js/custom.js, which th' theme loads on every plank.

{{% card action="shout" title="Shout it out" %}}Click t' greet th' world{{% /card %}}

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

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