> For the complete documentation index, see [llms.txt](https://docs.probloggertemplates.com/guides/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.probloggertemplates.com/guides/hypermag/getting-started/post-cards.md).

# Post Cards

This function is available for posts and pages and allows you to add recommended posts, downloads, products and even custom calls to action.

Shortcode: `{getCard} $type={Card Type} $title={Card Title} $info={Card Info} $button={Button Text} $icon={Icon Code}` 

Card Type: `post`, `download`, `product`, `custom` 

Card Title: Attribute compatible with all card types, being optional for the `post` type.

**Example:**

<figure><img src="https://3541635086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtjauJ2SCTA4KF9vk4mp7%2Fuploads%2Fn4tRbZkiNivcpTP1FFpf%2Fimage.png?alt=media&amp;token=96ee6923-9f68-4f8b-85cc-d64d9b3aeabc" alt="Post cards" width="525"><figcaption></figcaption></figure>

The cards are highly flexible, being able to support specific and unique attributes or even optional attributes.

### Post Type&#x20;

Shortcode: `{getCard} $type={post} $title={Card Title}`&#x20;

Card Link: For this card to work properly, a link to a post must be provided.

**Card Demo:**

<figure><img src="https://3541635086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtjauJ2SCTA4KF9vk4mp7%2Fuploads%2Fcx3uyfKXPKqkxEpqZoPO%2Fimage.png?alt=media&amp;token=a0da1a90-bb0b-4189-9b0d-e0b7b7e98f2a" alt="Post card preview" width="525"><figcaption></figcaption></figure>

### Download Card&#x20;

Shortcode: `{getCard} $type={download} $title={Card Title} $info={Card Info} $button={Button Text}`

Card Link: Add any link whether internal or external.

**Card Demo:**

<figure><img src="https://3541635086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtjauJ2SCTA4KF9vk4mp7%2Fuploads%2FgZbvAdvYc7eyTkmgOsfa%2Fimage.png?alt=media&amp;token=5450b08c-43c7-461c-8907-ab00facd8e97" alt="Download card preview" width="525"><figcaption></figcaption></figure>

Product Card Shortcode: `{getCard} $type={product} $title={Card Title} $info={Card Info} $button={Button Text}`&#x20;

Card Link: Add any link whether internal or external.

**Card Demo:**

<figure><img src="https://3541635086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtjauJ2SCTA4KF9vk4mp7%2Fuploads%2F5CmzlUkflzw3XQmBUDxh%2Fimage.png?alt=media&amp;token=279b3441-9437-496f-be69-cd75638cfd5a" alt="Product card preview" width="525"><figcaption></figcaption></figure>

Custom Card Shortcode: `{getCard} $type={custom} $title={Card Title} $info={Card Info} $button={Button Text} $icon={Icon Code}`&#x20;

Card Link: Add any link whether internal or external.

Icon Code: This template uses **Bootstrap Icons** as the main icon source, so you can choose from thousands of awesome icons to use on your card.

{% stepper %}
{% step %}
Go to the [Bootstrap Icons Gallery](https://icons.getbootstrap.com/).

{% endstep %}

{% step %}
Search for the desired icon, then click on the icon to access the info page.

{% endstep %}

{% step %}
Copy the **HTML Code** available in the **Code Point** section as illustrated in the image below.

<img src="https://3541635086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtjauJ2SCTA4KF9vk4mp7%2Fuploads%2FgF1DN9akfsOY0ewI3P6i%2Fimage.png?alt=media&amp;token=445fa5e6-1d78-4d5d-be2d-fbd6f266ca36" alt="Bootstrap icon" data-size="original">
{% endstep %}
{% endstepper %}

{% hint style="info" %}
INFO:  When editing the shortcode the icon attribute should look like `$icon={&#xF4B1;}`
{% endhint %}

**Card Demo:**

<figure><img src="https://3541635086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtjauJ2SCTA4KF9vk4mp7%2Fuploads%2FtWxa4LEU8E0XjquXL91q%2Fimage.png?alt=media&amp;token=5e82d5b4-2f60-47a3-8f96-63081f239929" alt="Custom card preview" width="525"><figcaption></figcaption></figure>