> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.komo.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML Card

> Create interactive HTML-based content cards.

## What is it?

An HTML Card is like a mini web page that requires multiple file types to create the ad feature and ad display.

## How do I build one?

* [Step 1: Add an HTML card to your Hub](#step-1-add-an-html-card-to-your-hub)
* [Step 2: Add your HTML code to your card](#step-2-add-your-html-code-to-your-card)
* [Step 3: Publish your card](#step-3-publish-your-card)

### Step 1: Add an HTML card to your Hub

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/html-card-step-1-add-an-step-2.gif?s=16015a0729dc41ea580b8e5940670f8f" alt="HTML Card: step 2 — Step 1: Add an HTML card to your Hub" width="2000" height="1100" data-path="images/html-card-step-1-add-an-step-2.gif" />

* Navigate to your **Engagement Hub**.
* Once there, click **Add content,** from here select **Embeds** and then **HTML.**
* You will then see your new card has been added to your Hub.

### Step 2: Add your HTML code to your card

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/html-card-step-2-add-your-step-2.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=0a72aeed60f87a331974d7958aec637e" alt="HTML Card: step 2 — Step 2: Add your HTML code to your card" width="2866" height="1480" data-path="images/html-card-step-2-add-your-step-2.webp" />

* Clicking on the **HTML** will open the editing module.
* **(1)** Paste your **HTML code** here and a preview will appear below. Anything placed in your HTML code is hosted in your iFrame.
* **(2)** Enter the **HTML height** of how you want to display it on the card.
* **(3)** You can add an **author** tag by displaying the brand or person who's responsible for the card content.
* **(4)** Add a **description** to the card.

### Step 3: Publish your card

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/html-card-step-3-publish-your-step-3.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=cd35cc42f9b822f814f3ee92a2409507" alt="HTML Card: step 3 — Step 3: Publish your card" width="2876" height="1590" data-path="images/html-card-step-3-publish-your-step-3.webp" />

**Once you've completed all of these steps and are happy with all the aspects, it's time to get your card live!**

* **(1)** **Publish** your card manually and instantly for the world to see.
* **(2)** **Schedule** your card to be published and unpublished at set dates and times.
* **(3)** Click on **...** to **Preview** and interact with the card on the front end from a user's perspective before publishing it. See how to test your card [here](/getting-started/hub-setup/card-testing/index).