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

# Cards

> Create shoppable widgets that showcase a single image or video on your website.

<Note>
  Related articles: [Galleries](/ugc/showcase/galleries), [Posts](/ugc/manage/posts), [UGC popup](/ugc/showcase/ugc-popup), [Labels](/general/labels)
</Note>

Cards are single-post widgets that display one specific piece of content on your website. Use them to add a shoppable image or video anywhere on your site.

Navigate to [UGC -> On-site widgets](https://app.cevoid.com/on-site-widgets) to manage your cards.

<Tip>
  Use [Galleries](/ugc/showcase/galleries) to showcase multiple posts in a single widget.
</Tip>

<img src="https://mintcdn.com/cevoid-2927d6c4/0Rigxc8Daa96Lp_3/images/ugc/showcase/cards/card.png?fit=max&auto=format&n=0Rigxc8Daa96Lp_3&q=85&s=8b1d3c30e5c05a24caedb3922503e7a6" alt="Card" width="1440" height="1000" data-path="images/ugc/showcase/cards/card.png" />

***

## How cards work

Cards display a single, specific post that you select. Unlike galleries, cards show static content and don't update automatically. When visitors click on the card, a [popup](/ugc/showcase/ugc-popup) opens with the full post, creator information, caption, and shoppable product tags.

**Key features:**

* **Static content**: Cards display the exact post you select
* **Photo or video**: Display either images or videos
* **Shoppable experience**: Product tags link directly to your product pages
* **Customizable design**: Adjust the look for each card
* **Localized**: Adjusts language, links, currency, and prices based on the market
* **Responsive design**: Adapts to different screen sizes and devices

***

## Create a card

1. Navigate to [UGC -> On-site widgets](https://app.cevoid.com/on-site-widgets)
2. Click **New widget**
3. Select **Card**
4. Click the *Content* tab
5. Choose the post you want to display
6. Optional: Click **More** and rename your card
7. Click **Save changes**

<Tip>
  You can also create a card directly from the Library by opening a post and clicking **Create Card**.
</Tip>

***

## Design and customize cards

Each card can be customized to fit the page it's embedded on.

<Note>
  Styling changes apply on the next page view after clicking **Save changes**.
</Note>

<Tip>
  Cards automatically inherit typography and fonts from your website once embedded.
</Tip>

1. Navigate to [UGC -> On-site widgets](https://app.cevoid.com/on-site-widgets)
2. Select your card
3. Click the *Design* tab
4. Apply your changes
5. Click **Save changes**

***

### Card size

Control how the card fills its container.

| Option                                | Description                                                           |
| ------------------------------------- | --------------------------------------------------------------------- |
| **Fill parent width, dynamic height** | Default. Card fills available width and adjusts height automatically. |
| **Fixed width, dynamic height**       | Set a specific width for the card.                                    |
| **Fixed aspect ratio**                | Maintain a specific aspect ratio.                                     |
| **Cover parent element size**         | Use when placing the card over a server-side hosted image.            |

***

### Corner roundness

Adjust the corner radius in pixels to match your site's design.

***

### Username display

Show the creator's username on the card for social proof.

<img src="https://mintcdn.com/cevoid-2927d6c4/TejB7Wyg7R5Jv-RM/images/ugc/showcase/cards/card-username.png?fit=max&auto=format&n=TejB7Wyg7R5Jv-RM&q=85&s=6cc1dd23766dd64853a2c84d327fad6e" alt="Card with username" width="1440" height="1000" data-path="images/ugc/showcase/cards/card-username.png" />

| Setting         | Options                                           |
| --------------- | ------------------------------------------------- |
| *Show username* | Yes or No                                         |
| *Position*      | Top left, Top right, Bottom left, or Bottom right |
| *Icon*          | Social media icon, @-sign, or None                |

<Tip>
  Show the username for UGC posts to highlight real customers. Hide it for brand-created content.
</Tip>

***

### Caption

Add text below the card. You can include dynamic values:

* **Username**: The creator's username
* **Product**: Names of tagged products with clickable links
* **Original caption**: The post's original caption

<img src="https://mintcdn.com/cevoid-2927d6c4/N1ZKHzOudLctNEmw/images/ugc/showcase/cards/card-caption.png?fit=max&auto=format&n=N1ZKHzOudLctNEmw&q=85&s=c9f89fea0c0e9cb3c05447a33812c009" alt="Card with caption" width="1440" height="1000" data-path="images/ugc/showcase/cards/card-caption.png" />

***

### Product hotspots

Hotspots highlight tagged products on the image. The product name and price display when visitors hover over each hotspot.

<img src="https://mintcdn.com/cevoid-2927d6c4/8vDUmYqU19kLwCJc/images/ugc/showcase/cards/card-hotspots.png?fit=max&auto=format&n=8vDUmYqU19kLwCJc&q=85&s=343f05ca8ed7d2fe2375d404aaa0a351" alt="Card with hotspots" width="1440" height="1000" data-path="images/ugc/showcase/cards/card-hotspots.png" />

| Setting                    | Options                                                                         |
| -------------------------- | ------------------------------------------------------------------------------- |
| *Display product hotspots* | Yes or No                                                                       |
| *Highlight product*        | Select one product to always display (only available when hotspots are enabled) |

When you highlight a product, its name and price are always visible without requiring visitors to hover.

<img src="https://mintcdn.com/cevoid-2927d6c4/8vDUmYqU19kLwCJc/images/ugc/showcase/cards/card-highlight-product.png?fit=max&auto=format&n=8vDUmYqU19kLwCJc&q=85&s=20f0aebbb6f1c0efe75d731f1a26405a" alt="Card with highlighted product" width="1440" height="1000" data-path="images/ugc/showcase/cards/card-highlight-product.png" />

***

### Hover effect

Add a hover effect when visitors mouse over the card. Only available when hotspots are disabled.

| Setting                    | Options                                       |
| -------------------------- | --------------------------------------------- |
| *Hover effect*             | None, Zoom, Overlay center, or Overlay bottom |
| *Hover background color*   | Color picker                                  |
| *Hover background opacity* | Opacity value                                 |
| *Hover text*               | Custom text (default: "Shop the look")        |
| *Hover text color*         | Color picker                                  |

***

### Click behavior

Control what happens when visitors click the card.

| Option                | Description                                                                   |
| --------------------- | ----------------------------------------------------------------------------- |
| **Open post popup**   | Default. Opens the full post in a popup.                                      |
| **Link to product**   | Links to the first tagged product.                                            |
| **Link to Instagram** | Links to the creator's Instagram profile.                                     |
| **Custom link**       | Add any URL.                                                                  |
| **Do nothing**        | Disables click. Useful when you want visitors to only interact with hotspots. |

***

### Popup settings

Customize how the popup appears when visitors click the card. See [UGC popup](/ugc/showcase/ugc-popup) for all popup settings.

***

## Change the post in a card

Cards display static content, but you can change which post is shown at any time.

1. Navigate to [UGC -> On-site widgets](https://app.cevoid.com/on-site-widgets) and select the card
2. Click the *Content* tab
3. Select a new post
4. Click **Save changes**

<Note>
  Unlike galleries, cards don't automatically update. You must manually change the post when you want to display different content.
</Note>

***

## Embed cards on your website

<Tip>
  Developers building a custom storefront or CMS block should use the [UGC Widgets developer docs](../../developer-docs/ugc-widgets).
</Tip>

<Tabs>
  <Tab title="General implementation">
    Embed cards on any HTML-based website using Cevoid's script and a div element.

    1. Add Cevoid's script to your website's `<head>` or `<footer>` (you only need to do this once):

       ```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
       <script type="module" src="https://gallery.cevoid.com/index.js" defer></script>
       ```
    2. Navigate to [UGC -> On-site widgets](https://app.cevoid.com/on-site-widgets) and select your card
    3. Click **Embed card**
    4. Copy the div code
    5. Paste where you want the card on your website
    6. Save and publish your changes
  </Tab>

  <Tab title="CMS block">
    If your development team has built a Cevoid card block in your CMS:

    1. Navigate to [UGC -> On-site widgets](https://app.cevoid.com/on-site-widgets) and select your card
    2. Click **Embed card**
    3. Copy the Card ID
    4. In your CMS, add a Cevoid card block and paste the ID
  </Tab>
</Tabs>