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