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


Did this page help you?