Style Messaging
Fonts
Afterpay 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 Afterpay Messaging
The
data-size
attribute changes both the badge and font size. To change the size of only the Afterpay badge, assign a value to the CSS variable--logo-badge-width
afterpay-placement {
--logo-badge-width: 80px;
}
Change the size of the Afterpay Messaging by adding the attribute data-size
to the <afterpay-placement>
tag
Accepted values are: xs, sm, md (default), and lg
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_AU"
data-currency="AUD"
data-amount="120.00"
data-modal-theme="white">
</afterpay-placement>
Accepted values are: white
, mint


Updated over 1 year ago