Skip to main content

Subthemes: Web

Subthemes allow a brand’s tokens to be overriden for certain contexts

OverviewWebSwiftKotlin

Using subthemes in HTML​

The easiest way to get started with using subthemes on web is by adding a data-theme-* attribute to your HTML. Subthemes are kebab cased.

<section data-theme-sponsored-content>
  <h2>Everything is subthemed in this section, including the section itself</h2>
  <div>
    <DefaultTeaser title="Chameleons: Color-Changing Communicators." />
    <DefaultTeaser title="360-Degree Vision: A Chameleon Specialty." />
    <DefaultTeaser title="Chameleons: Rapid, Long-Tongue Insect Catchers." />
  </div>
</section>

<section>
  <h2>In this section, only the last teaser is subthemed</h2>
  <div>
    <DefaultTeaser title="Chameleons: Color-Changing Communicators." />
    <DefaultTeaser title="360-Degree Vision: A Chameleon Specialty." />
    <DefaultTeaser
      data-theme-sponsored-content
      title="Chameleons: Rapid, Long-Tongue Insect Catchers."
    />
  </div>
</section>

Other ways to get subtheme token values.​

We also provide subtheme token files in js, json and scss formats. But beware, in the HTML/CSS example above, the CSS engine does the heavy lifting. You will have to create your own way of using the correct token values at the correct time.

We only offer these files to be complete. You probably won't need them, but your mileage may vary.