# Promo card

### Summary <a href="#promocardcomponent-summary" id="promocardcomponent-summary"></a>

The Promo card is a good way to highlight content and take users to that content. It consists of a title, image, date, summary text, and a link.

This article shows you how to add a Promo card component to a Manual list component.

Below is a promo card.

![](https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-68e767f8031d97fe19c710a68535bb906d9573c6%2Fimage.png?alt=media)

And this is what four promo cards in a row looks like.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-a9ea3987d5a48caa342ea8317a457eea6d564937%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### Step 1 - Add the Promo card <a href="#promocardcomponent-step1-addthepromocard" id="promocardcomponent-step1-addthepromocard"></a>

Within the Manual list component under List items, click on the dropdown and select Promo card as shown below.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-b7ae4ba662939fb0b63df8280f140cb23a103484%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

In the screenshot below you can see the Promo card fields, which are numbered and highlighted.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-d6ecea220b3b4f38b4e4b1bdd3451505dc5e6a97%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

1. Title - Add the card title.
2. Subtitle - Add a subtitled if desired.
3. Image - Add an image to the card if desired.
4. Summary - Add summary text to the card.
5. Link - Type in the link for the page the card will link to.
6. Topics - Add a topic if desired. If you'd like to add more than one topic, click on Add another item.
7. Theme - Choose the light or dark theme.

### Tip <a href="#promocardcomponent-tip" id="promocardcomponent-tip"></a>

You can configure the number of Promo cards in one row by adjusting the “Column count” under the “Appearance“ tab as shown below.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-ebefdc5ad5475cfae3bb84f40fdc9b33c1f5d683%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>