Reset

Because the styleguide is used side-by-side with existing component styles, a reset is applied at the root of each CDS component. This reset is necessary because the current website styles apply a lot of styles directly to HTML elements, which would otherwise leak into CDS components.

Wrap every CDS component with .tng-root:

<div class="tng-root">…</div>

Revert reset

When a legacy component is placed inside a tng-root container, the CDS reset will strip its expected styles. To restore the legacy styles for that component, wrap its root element with the tng-legacy-apply class.

<div class="tng-root">
  <!-- CDS components render normally -->
  <div class="tng-legacy-apply">
    <!-- Legacy component with legacy styles restored -->
  </div>
</div>

This is useful when you need to embed an existing legacy component within a new CDS layout and want it to retain its original styling.