Style variations

Style variations provide different versions of a component. Style variations may be defined in the global configuration file or in a configuration file colocated with the component. A variation may be selected by editors in Brightspot, or a developer can use them to provide a default rendering strategy using Contextual rendering.

The following example registers FancyPromo as a style variation for the Promo component.

{
  "styles": {
    "/core/promo/Promo.hbs": {
      "templates": [
        {
          "displayName": "Fancy Promo",
          "example": "/core/promo/FancyPromo.json"
        }
      ]
    }
  }
}

In this scenario, FancyPromo usually points to a dedicated template for rendering. It may include different styling or behaviors than the original Promo component.