Brightspot CMS Developer Guide

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.

Previous Topic
Data modeling for themes
Next Topic
Theme fields
Was this topic helpful?
Thanks for your feedback.