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.

showLineNumbers

1
{
2
  "styles": {
3
    "/core/promo/Promo.hbs": {
4
      "templates": [
5
        {
6
          "displayName": "Fancy Promo",
7
          "example": "/core/promo/FancyPromo.json"
8
        }
9
      ]
10
    }
11
  }
12
}

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