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:

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

🚧

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

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

Logo Types

Badge	Lockup

Badge Themes

See the Examples page for implementations

Badge Theme Name
Black on Mint
Mint on Black
Black on White
White on Black

Modal Themes

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

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

Accepted values are: white, mint