Customization

Customization Attributes

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

custom-styles

This attribute can be used to customize the look of the Croissant Buyback Badge. You can customize select CSS properties via a JSON object. For an overview of the properties and types available, see below:

type BuybackBadgeStyles = {
  primaryColor?: string; // sets foreground color of logo, links, etc., defaults to "blue"
  secondaryColor?: string; // sets background color, defaults to "#d9d9d9"
  defaultFontFamily?: string; // sets font family, defaults to `Work Sans`
  defaultFontSize?: number; // will set the font size in pixels, defaults to 12
  smallFontSize?: number; // will set the font size in pixels, defaults to 10
  	// Applies when the badge has 2 lines of text
};

Example (default styles):

<croissant-buyback-badge custom-styles= "{
    primaryColor: 'blue',
    secondaryColor: '#d9d9d9',
    defaultFontFamily: 'var(--croissant-font-family--main)',
    defaultFontSize: 12,
    smallFontSize: 10,
}"></croissant-buyback-badge

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>