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:

1
afterpay-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:

1
afterpay-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:

• Marketing Resources Centre - Brand Collaboration

• Marketing resources - Brand Tools - Brand guidelines

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.

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