# 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://787168730-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJoVhnsLwgc7ylgaqw6Gd%2Fuploads%2Fr8ozZ0IpXujfUKD1TGXh%2Fimage.png?alt=media&#x26;token=42303ff8-2425-4547-b2f5-1be202a34574" 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://787168730-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJoVhnsLwgc7ylgaqw6Gd%2Fuploads%2FDUm6Vt00WhdsPT8AFzg4%2Fimage.png?alt=media&#x26;token=b78e9018-d58b-45f1-8512-ee12567b5d25" 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://787168730-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJoVhnsLwgc7ylgaqw6Gd%2Fuploads%2FIpN26MRqo8JipfWqloPD%2Fimage.png?alt=media&#x26;token=9920fd5e-e54d-4291-ae8e-4540c8f3e8d2" 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://787168730-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJoVhnsLwgc7ylgaqw6Gd%2Fuploads%2FNBhnGpRzHSuws6Y2PhYq%2Fimage.png?alt=media&#x26;token=4397052f-1fde-4748-be02-bf46f9fb57a1" 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/JoVhnsLwgc7ylgaqw6Gd/blobs/GsfigmT2MXW6LRsZLhsD/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://787168730-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJoVhnsLwgc7ylgaqw6Gd%2Fuploads%2FaA1SyptiE1RcB13z8gnH%2Fimage.png?alt=media&#x26;token=d76519f2-61a9-4dd6-9496-c001a25de907" alt="Custom card preview" width="525"><figcaption></figcaption></figure>