Afterpay Messaging

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:

1afterpay-placement {
2    font-family: Sans-Serif;
3}

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:

1afterpay-placement { 
2 --messaging-font-size: 10px; 
3 --logo-badge-width: 70px; /* Must be >= 64px */ 
4}

To ensure your customizations align with our brand guidelines see the following links:

Logo Types

BadgeLockup
Black on mint badgeWhite badge

Badge Themes

See the Examples page for implementations.

Badge Theme Name
Black on MintBlack on mint badge
Mint on Blackmint on black badge
Black on WhiteBlack on white badge
White on Blackwhite on black badge

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

1<afterpay-placement
2     data-locale="en_AU"
3     data-currency="AUD"
4     data-amount="120.00"
5     data-modal-theme="white">
6</afterpay-placement>

Accepted values are: white, mint

Accepted modal