Styling an Embedded Operator Widget

Part Theming

Specific parts of the Operators Widget can have their default styles overridden through the ::part pseudo-element.

There are three main styling blocks:

• The widget's filtering carousel, which has four selectable parts:
  • filter__btn-tag: the rounded, selectable filter buttons in the filter carousel
  • filter__btn-prev: the left arrow button to scroll left through the filter carousel
  • filter__btn-next: the right arrow button to scroll right through the carousel
  • filter__btn-subtag: the additional filters button
• The widget's Card, which has six selectable parts:
  • card__surface: container which holds the Card's contents
  • card__hero: container which holds the hero image
  • card__title: the tourism business' name
  • card__description: the short description of the business
  • card__btn-details: button on bottom left of the Card
  • card__btn-book: button on bottom right of the Card if a custom booking link is provided by the Operator
• The widget's details side pane, which has two selectable parts:
  • details__main: container which holds all Operator information, underneath the image carousel
  • details__btn-contact: the three contact buttons for the Operator – website, phone and email

You may define your styles containing these overrides in any manner, but ensure they are present on your embedding website. Our embedding widget is called the  whereabouts-operators-widget, so the CSS syntax will be as follows:

whereabouts-operators-widget::part(-part-name-here-) {
    background-color: red;
    ...
}

Global Theming

You may override the default fonts in the widget, by passing in a  data-font-family-override prop to the Operators widget. If you are using an external font, ensure that it is properly loaded on your embedding website.

<whereabouts-operators-widget
    data-font-family-override="Comic Sans MS"
    .....
></whereabouts-operators-widget>