Installation

Edit on GitHub

@volvo-cars/css is delivered as CSS files hosted on the shared volvocars.com CDN. File names include content-based hashes, so only changed files are purged from the cache when a new version is released.

We provide a package that automatically creates and injects the correct <link> tags into the <head> of your application.

This guide assumes you are using React with Next.js. See alternative methods below for other setups.

Quick start

Install the package
Terminal window
```
yarn add @volvo-cars/css
```

Add the CSS links to your <head>

In your _document.tsx (or equivalent entry point):

import { links } from '@volvo-cars/css/links';

<Head>
  {links().map((link) => (
    <link key={link.rel + link.href} {...link} />
  ))}
</Head>;

That’s it — you’re ready to use design system classes and tokens throughout your application.

Alternative installation methods

HTML string output (no JSX)

The array returned by links() stringifies to HTML <link> tags:

import { links } from '@volvo-cars/css/links';

const html = `<html><head>${links()}</head><body>...`;

Client-side JavaScript

import { links } from '@volvo-cars/css/links';

const fragment = document.createDocumentFragment();
for (const link of links()) {
  fragment.append(Object.assign(document.createElement('link'), link));
}
document.head.append(fragment);

Micro-frontends (partial install)

For micro-frontend components you may want to exclude some link tags using the filter option:

import { links } from '@volvo-cars/css/links';

links({
  filter: {
    // Excludes all `<link rel=preload>` tags
    preload: false,
    // Excludes font-face CSS
    fonts: false,
    // Excludes tokens.css
    tokens: false,
  },
});

Self-hosted (not on volvocars.com)

If your bundler supports it, you can import the CSS files directly from the npm package. They will be served from your own domain. Do not do this if your application is hosted on www.volvocars.com — use the CDN instead.

import '@volvo-cars/css/font-face.css';
import '@volvo-cars/css/tokens.css';
import '@volvo-cars/css/styles_all-media.css';

EDLS users

@volvo-cars/edls-css extends @volvo-cars/css for teams building enterprise applications and complex UIs. It follows the same structure as the main package and depends on it.

Install the EDLS package
Terminal window
```
yarn add @volvo-cars/edls-css
```

Import the styles in your entry point

import '@volvo-cars/edls-css/tokens.css';
import '@volvo-cars/edls-css/styles_all-media.css';

Verify your setup

After installation, confirm everything is working by adding a simple element to your page:

<div class="bg-secondary p-24 border">
  <h2>Hello, Design System</h2>
  <p>
    If this has a grey background with a border and comfortable padding, you're
    all set.
  </p>
</div>

What’s next

CSS architecture — Understand how global styles, utility classes, and component-scoped CSS work together.
Colors — Learn about the colour system and available tokens.
VS Code extension — Get IntelliSense for class names and tokens.
Linting — Set up ESLint and Stylelint for design system compliance.