# 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://323979841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWEe3RjtDQ7wNsLsA20hR%2Fuploads%2FGboa5B2JqCLUTVZrXutw%2Fimage.png?alt=media&#x26;token=a68f596d-5729-4a0c-bef2-3d86ee6c0280" 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://323979841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWEe3RjtDQ7wNsLsA20hR%2Fuploads%2Fdi4bEAlgTkR0octjsELE%2Fimage.png?alt=media&#x26;token=2692eb41-42ef-44de-8093-72ae25274ef1" 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://323979841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWEe3RjtDQ7wNsLsA20hR%2Fuploads%2FBLmeNugAnqCiArFJOQYl%2Fimage.png?alt=media&#x26;token=f51a272a-4e1f-4241-abef-b7cf5aae7dab" 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://323979841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWEe3RjtDQ7wNsLsA20hR%2Fuploads%2FbH6KmNbBNE9E7cVmLaZF%2Fimage.png?alt=media&#x26;token=fb4f125b-c6e0-42d6-bf4c-e0c063712503" 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://content.gitbook.com/content/WEe3RjtDQ7wNsLsA20hR/blobs/LPzehoTHxQhuIUX2YDWk/image.png" 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://323979841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWEe3RjtDQ7wNsLsA20hR%2Fuploads%2FNICwdfTthVp4vADqqhkw%2Fimage.png?alt=media&#x26;token=49e5fd75-7a21-445b-9017-093634d3e34f" alt="Custom card preview" width="525"><figcaption></figcaption></figure>