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.
The elements that get you up and running in a matter of days, from pre-built content types, to modules, to landing pages.

Content types
Landing pages
Everything you need to manage and administer content within Brightspot CMS.

Admin configurations
A guide for installing, supporting and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
A guide for configuring different integrations to support a multitude of use cases.

Google Analytics
Apple News