Porsche Design System

Normalize

Table of Contents

Setup

The Porsche Design System provides recommended normalize styles that include CSS reset styles and base typography definitions.

Setup#

When you import the main package CSS file, the normalize styles are already included:

/* Replace {js|angular|react|vue} with your framework, e.g. components-react */
@import '@porsche-design-system/components-{js|angular|react|vue}';

If you only need the normalize styles without any other styles, you can import them separately:

@import '@porsche-design-system/components-{js|angular|react|vue}/normalize.css';

Below is the content of the stylesheet file for reference only. Don't copy this into your project — use the import statement above instead:

/* @porsche-design-system/components-{js|angular|react|vue}/normalize.css */

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(
    --p-font-porsche-next,
    "Porsche Next",
    "Arial Narrow",
    Arial,
    "Heiti SC",
    SimHei,
    sans-serif
  );
  line-height: var(--p-leading-normal, calc(6px + 2.125ex));
  letter-spacing: normal;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}