Theming

To apply a custom theme to the components: you can simply set the following css variables. We've included the default values below.

Theme Configuration

--vi-font-family: ui-sans-serif, system-ui, sans-serif;
--vi-multi-offer-header-font-size:  0.95rem;
--vi-primary-color: #FF6B00;
--vi-primary-contrast-color: #FFF1E3;
--vi-neutral-color: #F4F6F6;
--vi-neutral-contrast-color: #000000;
--vi-font-xs: 0.75rem;
--vi-font-sm: 0.8rem;
--vi-font-md: 0.9rem;
--vi-font-lg: 1.05rem;
--vi-font-xl: 1.25rem;
--vi-secondary-color: #FF6B00;
--vi-secondary-contrast-color: #FFF1E3;
--vi-bg-color: #ffffff;
--vi-success-color: #FF6B00;
--vi-success-bg-color: #EFEFEE;
--vi-success-border-color: #918F8F;
--vi-danger-color: #C71414;
--vi-danger-bg-color: #FDEDED;
--vi-danger-border-color: #C71414;
--vi-warning-color: #fbbf24;
--vi-warning-bg-color: #fffbeb;
--vi-warning-border-color: #fbbf24;
--vi-tag-color: #FF6B00;
--vi-tag-contrast-color: #ffffff;
--vi-tag-display: block;
--vi-link-color: #000000;
--vi-checkmark-scale: 1;
--vi-border-color: #949293;
--vi-border-radius: 10px;
--vi-radio-color: #000000;
--vi-radio-border: 1px solid #000000;
--vi-promotional-header-font-family: var(--vi-font-family);
--vi-promotional-header-font-weight: 700;
--vi-promotional-header-font-size: var(--vi-font-xl);
--vi-promotional-header-color: #000000;
--vi-promotional-description-color: #000000;
--vi-promotional-description-font-family: var(--vi-font-family);
--vi-promotional-description-font-weight: 400;
--vi-promotional-description-font-size: var(--vi-font-md);
--vi-container-padding: 24px 16px 16px 16px;
--vi-action-border-radius: 4px;
--vi-action-spacing: 8px;
--vi-action-accept-text-color: #FF6B00;
--vi-action-accept-radio-color: #FF6B00;
--vi-action-accept-bg-color: #EFEFEE;
--vi-action-accept-border-color: #918F8F;
--vi-action-accept-font-weight: 700;
--vi-action-decline-text-color: #000000;
--vi-action-decline-radio-color: #000000;
--vi-action-decline-bg-color: #EFEFEE;
--vi-action-decline-border-color: #918F8F;
--vi-action-decline-font-weight: 400;
--vi-action-radio-scale: 1; 
--vi-action-checkbox-scale: 1; 
--vi-action-padding: 12px 18px;
--vi-action-required-label-font-weight: 700;
--vi-action-checklist-item-padding: 10px 12px;
--vi-action-header-font-family: inherit;
--vi-action-header-font-weight: 400;
--vi-action-header-font-size: var(--vi-font-sm);
--vi-descriptors-checkmark-accept-color: #FF6B00;
--vi-descriptors-checkmark-decline-color: #000000;
--vi-descriptors-spacing-x: 15px;
--vi-descriptors-spacing-y: 10px;
--vi-offer-display-spacing: 10px;
--vi-offer-content-spacing: 30px;
--vi-offer-header-spacing: 10px;
--vi-package-display-spacing: 10px;
--vi-error-font-family: inherit;
--vi-error-font-weight: 400;
--vi-error-font-size: var(--vi-font-md);
--vi-tab-navigation-button-border: 2px solid var(--vi-primary-color, #FF6B00);
--vi-tab-navigation-button-background: var(--vi-primary-color, #FF6B00);
--vi-tab-navigation-button-color: var(--vi-primary-contrast-color, #FFF1E3);

Theme Playground

Live Editor

<div style={{ background: "white", padding: "8px" }}> <style>{` :root { --vi-font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif; --vi-tag-color: #1970c2; --vi-accept-color: #1970c2; } `} </style> <registration-cancellation client-id="test_RGMDV4FV4BNK4TSPT7DOQVC3P9HKEXTQ" customer-email-address="test01@verticalinsure.com" customer-state="MN" insurable-amount="50000" event-start-date={new Date(new Date().getTime() + 86400000).toISOString().substring(0, 10)} event-end-date={new Date(new Date().getTime() + 86400000).toISOString().substring(0, 10)} participant-first-name="John" participant-last-name="Doe" ></registration-cancellation> </div>

<div style={{ background: "white", padding: "8px" }}>
  <style>{`
    :root {
      --vi-font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif;
      --vi-tag-color: #1970c2;
      --vi-accept-color: #1970c2;
    }
`}
</style>
  <registration-cancellation
    client-id="test_RGMDV4FV4BNK4TSPT7DOQVC3P9HKEXTQ" 
    customer-email-address="test01@verticalinsure.com"
    customer-state="MN"
    insurable-amount="50000"
    event-start-date={new Date(new Date().getTime() + 86400000).toISOString().substring(0, 10)}
    event-end-date={new Date(new Date().getTime() + 86400000).toISOString().substring(0, 10)}
    participant-first-name="John"
    participant-last-name="Doe" 
  ></registration-cancellation>
</div>

Result

Loading...