> For the complete documentation index, see [llms.txt](https://awecommerce.gitbook.io/awe-color-swatches/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://awecommerce.gitbook.io/awe-color-swatches/getting-started/design/card.md).

# Card

Size, text and colors of image cards with the value name below.

The **Card** design is used by **Auto card** and **Custom card** — an image tile with the value name written below it.

To get started:\
**Design** → **Card** → **Custom**. Pick the **Product page** or **Collection page** tab.

***

## 1. **Size**

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-b83a77845df39f507c8cb91177a68a9dea02e9b5%2Fdesign-card-01-size.png?alt=media" alt="Card size, text and corners"><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="200"></th><th></th></tr></thead><tbody><tr><td><strong>Width size</strong> / <strong>Height size</strong></td><td><ul><li>40–200 px each.</li><li>Default: 80 × 80 px on the product page, 40 × 40 px on the collection page.</li></ul></td></tr><tr><td><strong>Text size</strong></td><td><ul><li>8–20 px (default 12).</li></ul></td></tr><tr><td><strong>Corner radius</strong></td><td><ul><li>0–40 px (default 8). Cards are always rectangles — round the corners here.</li></ul></td></tr><tr><td><strong>Border thickness</strong></td><td><ul><li>0–8 px (default 1).</li></ul></td></tr></tbody></table>

## 2. **Layout**

* **Alignment**: **Left** (default), **Center** or **Right**.
* **Spacing**: 0–40 px (default 8).

## 3. **Compact display**

Only on the **Collection page** tab — see [Compact display on collection cards](/awe-color-swatches/getting-started/design/compact-display-on-collection-cards.md).

## 4. **Color**

Each color has 3 states — **Default**, **Hover** and **Selected**:

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-26e815c785a94823abb6c7526f48f7e96f36ac98%2Fdesign-card-02-color.png?alt=media" alt="Card border, background and text colors"><figcaption></figcaption></figure>

* **Border color** (default `#CECECE` / `#000000` / `#000000`)
* **Background color** (default white in every state, so the image isn't tinted)
* **Text color** (default `#000000`)

***

💬 If you have any related questions, please contact us via **Live chat** in the app.