Style Messaging
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
Updated 12 months ago