Styles API Reference
Typography
Font Family Primary
The main font for the component, applies to all content except for the destination cards in the main directory view.
You may use any font available on your website.
Custom Property: --font-family-primaryDefault Value: 'Lexend', sans-serif
Font Family Secondary
The font used on the destination card components in the main directory view.
Custom Property: --font-family-secondary
Default Value: 'Lato', sans-serif
Card Header Font Size
The font size for destination card headers.
Custom Property: --card-header-font-size
Default Value: 0.625rem
Card Footer Font Size
The font size for destination card footers.
Custom Property: --card-footer-font-size
Default Value: 0.625rem
Title Text Colour
The text colour for titles.
Custom Property: --title-text-colour
Default Value: #000
Body Text Colour
The text colour for body text.
Custm Property: --body-text-colour
Default Value: #5a5a5a
Card Header Text Colour
he text colour for destination card headers.
Custom Property: --card-header-text-colour
Card Footer Text Colour
The text colour for destination card footers.
Custom Property: --card-footer-text-colour
Default Value: #828282
Image Fallback Text Colour
The text colour for destination names, which are displayed in place of logos if a logo is not present for a destination.
Custom Property: --image-fallback-text-colour
Default Value: #404040
Form Component Text Colour
Text colour for form components in the search & filter bar.
Custom Property: --form-component-text-colour
Default Value: #8a8a8a
Theme Colours
Primary Colour
Primary theme colour. Used for 'coming soon' card header background.
Custom Property: --primary-colour
Default Value: #2d9cdb
Secondary Colour
Secondary theme colour. Used for card header background.
Custom Property: --secondary-colour
Default Value: #828282
Success Colour
Success theme colour. Used for card header with status 'open'.
Custom Property: --success-colour
Default Value: #27ae60
Danger Colour
Danger theme colour. Used for card header with status 'closed' and status closed on destination view.
Custom Property: --danger-colour
Default Value: #eb5757
Borders
Border Radius
Border radius for cards, buttons.
Custom Property: --border-radius
Default Value: 0.625rem
Border Width
Border width.
Custom Property: --border-width
Default Value: 1px
Dividers
Category Divider Colour
Colour for dividers in the category sidebar.
Custom Property: --category-divider-colour
Default Value: #e0e0e0
Destination Divider Colour
Colour for dividers in the destination view (when multiple instances of the destination shown).
Custom Property: --destination-divider-colour
Default Value: #000
Cards
Card Border Colour
Border colour for destination cards.
Custom Property: --card-border-colour
Default Value: #e5e5e5
Card Footer Background Colour
Background colour for card footer backgrounds.
Custom Property: --card-footer-background-colour
Default Value: #f2f2f2
Form Components
Form Component Border Colour
Colour for the borders of form components in the search & filter bar.
Custom Property: --form-component-border-colour
Default Value: #c4c4c4