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
Use the data-size
attribute to change the font-size of the messaging and also to scale the brand logo.
Accepted values for the data-size
attribute are: xs, sm, md (default), and lg. That is extra small, small, medium and large.
To scale the messaging elements beyond these standard options provided by the data-size
attribute, use the following custom CSS properties:
-
--logo-badge-width
- To change the size of the brand logo only (badge) -
--messaging-font-size
- To set the font-size of the textual part of the messaging to a custom value
See the code example below:
afterpay-placement {
--messaging-font-size: 10px;
--logo-badge-width: 70px; /* Must be >= 64px */
}
To ensure your customizations align with our brand guidelines see the following links:
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 23 days ago