Styling

The booking widget can easily be styled using CSS variables. Put the updated variable values in your own CSS files, or add it as an inline style tag in the head section of your page.

note

Font family, link color and most general styles are not set in the widget. For those elements, the styles defined on the page where the widget is included will be used.

Example code#

The following example sets the primary and secondary color in a style tag to be put in the head section of your page.

<style>
#cliento-booking {
--cb-color-primary: #5f56fc;
--cb-color-secondary: #51136b;
}
</style>

Color variables#

The variables in the table below can be used to control the colors in the booking widget.

Variable nameDefault value
--cb-color-primary#5f56fc
--cb-color-primary-hover#4b42e8
--cb-color-secondary#51136b
--cb-color-neutral-10#0f0e28
--cb-color-neutral-20#484765
--cb-color-neutral-40#746f88
--cb-color-neutral-50#908faf
--cb-color-neutral-60#c8c7d6
--cb-color-neutral-70#ddddea
--cb-color-neutral-80#f3f2f9
--cb-color-neutral-90#f8f8fc
--cb-color-neutral-100#fff
--cb-color-success-10#0d7436
--cb-color-success-30#4db376
--cb-color-success-40#6cdf9f
--cb-color-success-50#8ae8af
--cb-color-success-100#f2fcf6
--cb-color-error-20#c72e41
--cb-color-error-40#ff4d62
--cb-color-error-100#fff2f4
--cb-color-warning-40#e39600
--cb-color-warning-50#ffb500
--cb-color-warning-100#fff4d9
--cb-textvar(--cb-color-neutral-20)
--cb-text-mutedvar(--cb-color-neutral-50)
--cb-input-focus#5f56fc40
--cb-input-focus-bordervar(--cb-color-neutral-60)
--cb-alt-button-bgvar(--cb-color-success-100)
--cb-alt-button-bg-hovervar(--cb-color-success-50)
--cb-alt-button-bg-activevar(--cb-color-success-40)
--cb-alt-button-bordervar(--cb-color-success-40)
--cb-alt-button-labelvar(--cb-color-success-30)
--cb-alt-button-label-emphasisedvar(--cb-color-success-10)

Sizes and spacing#

The variables in the table below can be used to control font sizes and spacing in the booking widget.

Variable nameDefault value
--cb-font-size-heading-large26px
--cb-font-size-heading-medium22px
--cb-font-size-heading-small20px
--cb-font-size-large18px
--cb-font-size-medium16px
--cb-font-size-small14px
--cb-font-size-tiny13px
--cb-border-radius-medium16px
--cb-border-radius-small8px
--cb-gutters-desktop48px
--cb-gutters-tablet24px
--cb-gutters-mobile12px
--cb-spacing-xlarge32px
--cb-spacing-large24px
--cb-spacing-medium16px
--cb-spacing-small8px
--cb-icon-xlarge32px
--cb-icon-large28px
--cb-icon-medium20px
--cb-icon-small16px
--cb-aside-width360px
--cb-nav-item-size22px