# 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://2090754335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLgk0Bukp3MlddTFYiGbP%2Fuploads%2FA1QKJPGr4pBVDHUAoXQm%2Fspotlight-post-cards.webp?alt=media&#x26;token=5ac04973-b1ab-4089-b076-1bc0b7fbbe72" alt="Post cards" width="563"><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://2090754335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLgk0Bukp3MlddTFYiGbP%2Fuploads%2FYhbhowdK7elbY0qJoMAD%2Fpost-card.webp?alt=media&#x26;token=2ca7d9db-836f-4d29-acb6-4adaf71593b5" alt="Post card preview" width="563"><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://2090754335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLgk0Bukp3MlddTFYiGbP%2Fuploads%2Fi1oGFqxk5KXmbdyzdHh4%2Fcta-card-download.webp?alt=media&#x26;token=a0a5f13e-5699-431c-9087-d9da581cec7b" alt="Download card preview" width="563"><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://2090754335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLgk0Bukp3MlddTFYiGbP%2Fuploads%2FL50FucAT0JgUmkWu5E75%2Fcta-card-product.webp?alt=media&#x26;token=df5e693e-c81a-4100-a8d5-475ea52d5661" alt="Product card preview" width="563"><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/Lgk0Bukp3MlddTFYiGbP/blobs/Vq52X4pkSr8MJXJ9fHvT/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://2090754335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLgk0Bukp3MlddTFYiGbP%2Fuploads%2FFC710p09utk1KoXmueZG%2Fcta-card-custom.webp?alt=media&#x26;token=3834c103-382a-4a12-be9f-21ee4caf2555" alt="Custom card preview" width="563"><figcaption></figcaption></figure>