Customization

Custom CSS

CSS classes and variables can be used to customize the look and branding for the Buyback Badge.

The simplest and easiest way to customize the Buyback Badge is to use the Croissant Design Tokens.

Customization Attributes

All of these attributes are optional. Use them to change the Buyback Badge style.

has-background-color

Type: Boolean

Default is false. Set this attribute true in order to display a background color on the Buyback Badge.

Note: This attribute only has an effect if the has-subtext attribute is false. If the has-subtext attribute is true, the Buyback Badge will always display a background color.

Example:

<croissant-buyback-badge has-background-color="true"></croissant-buyback-badge>

has-learn-more-link

Type: Boolean

Default is false. If set to true, the Buyback Badge will include a "Learn More" button that opens the Croissant Information Modal.

Note: If the has-subtext attribute has been set to true, then the "Learn More" button will only appear when the Buyback Badge container width is under 440px.

Example:

<croissant-buyback-badge has-learn-more-link="true"></croissant-buyback-badge>

has-subtext

Type: Boolean

Default is false. Set this attribute to true in order to use the larger version of the Buyback Badge, which includes a second line of subtext.

Example:

<croissant-buyback-badge has-subtext="true"></croissant-buyback-badge>

logo-size

Type: Number

Supported sizes: 15 | 16

Default is 16. Use this to bump the logo to a smaller size, if needed.

<croissant-buyback-badge logo-size="15"></croissant-buyback-badge>