> This page is for version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.clearpay.co.uk/v-2/llms.txt
> - v1: https://developers.clearpay.co.uk/v-1/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.clearpay.co.uk/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.clearpay.co.uk/_mcp/server.

# Style Messaging

## Fonts

Clearpay Messaging inherits the Font Family that is used to style other paragraph elements on the page. If you would like to use a different font, you may specify it in a CSS rule that targets `afterpay-placement`:

```css
afterpay-placement {
	font-family: Sans-Serif;
}
```

## Adjust the Size of Clearpay Messaging

Change the size of the Clearpay Messaging by adding the attribute `data-size` to the `<afterpay-placement>` tag

Accepted values are: **xs**, **sm**, **md** (default), and **lg**

\


> **Warning**
>
> The `data-size` attribute changes both the badge and font size. To change the size of *only* the Clearpay badge, assign a value to the CSS variable `--logo-badge-width`

**`CSS`**

```css CSS
afterpay-placement { 
   --logo-badge-width: 80px;
}
```

## Logo Types

| Badge                                                      | Lockup                                                                            |
| :--------------------------------------------------------- | :-------------------------------------------------------------------------------- |
| ![](/_fern-img/b6177d647c60fbcee9244978940f259cf923a2541932eddc9d905ddb4c9b548b.webp) | ![](https://static.afterpay.com/integration/product-page/logo-clearpay-black.png) |

## Badge Themes

See the [Examples](/examples) page for implementations

| Badge Theme Name |                                                             |
| :--------------- | :---------------------------------------------------------- |
| Black on Mint    | ![](/_fern-img/b6177d647c60fbcee9244978940f259cf923a2541932eddc9d905ddb4c9b548b.webp)  |
| Mint on Black    | ![](/_fern-img/87c6e30e968377b7635dc2c159c97729593e151182dc6542dd857bfa7e5329ac.webp)  |
| Black on White   | ![](/_fern-img/7702d677f17d3e779e17654b8e7d926a9347e73fcd2bf9be1ab97ccf195ab03f.webp) |
| White on Black   | ![](/_fern-img/f60a17f1932b23ad1bb13da211f361d0fb84422e2e39ff40b186b13e39617912.webp) |

## Modal Themes

Add the attribute `data-modal-theme` to the `<afterpay-placement>` tag to use an alternate background color on the Afterpay Modal.

```html
<afterpay-placement
     data-locale="en_GB"
     data-currency="GBP"
     data-amount="120.00"
     data-modal-theme="white">
</afterpay-placement>
```

Accepted values are: `white`, `mint`