Get to know SDX

If you just starting out using SDX for development, you're in the right place.

Check the Skillup Path to learn about Design Systems!

Start developing!

SDX consists of modern Web Components (such as <sdx-select />) and a CSS that sets default styles, like fonts and spacings, and provides additional classes (e.g. .row and .col).

SDX can be included by either NPM or CDN. The guide NPM vs CDN explains their pros and cons.

Please consider to contribute and make SDX better!

Supported Frameworks

All major frameworks are supported. But none is required. SDX also runs in plain index.html and VanillaJS. The tabs above explain the usage of SDX for each framework individually.

Supported languages

SDX is language sensitive. It reads <html lang="…"> and supports "en", "de", "fr" and "it". Fallback is "en". If needed, the lang attribute can also be set on individual components, e.g. <sdx-input lang="de">.

Non-Web Components

Some components, such as Table, BarChartHorizontal or Slider, aren’t yet converted into the Web Component format.

SDX | Swisscom Digital Experience

SDX is a set of foundation, components, and guidelines for designing and building UI at Swisscom