BI Web components

All components can be seen at designsystem.bi.no.

Get started

NPM

Install the web-components and the required CSS tokens and fonts: npm i bi-web-components @bi-digital/css

Import all components:

import { defineCustomElements } from 'bi-web-components/loader';
defineCustomElements();

Or just specific components:

import { defineCustomElement } from 'bi-web-components/dist/components/bi-button.js';
defineCustomElement();

Then add the styles, either in a CSS-file:

@import '@bi-digital/css';

Or in jsx/tsx:

import '@bi-digital/css';

The fonts and tokens from the @bi-digital/css package is required.

How can I include only the fonts and tokens?

The @bi-digital/css package allows you to only import the styles that you want. For example:

@import '@bi-digital/css/dist/fonts.css';
@import '@bi-digital/css/dist/tokens.css';

CDN

In your head-section in your html, import the following script:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/bi-web-components@latest/dist/bi-web-components/bi-web-components.esm.js"
></script>

This will make all components available in your project, lazy-loaded so that only the components used are downloaded. We recommend replacing latest with a specific version to avoid errors when the library is updated.

You also have to download our css-library @bi-digital/css:

<link type="stylesheet" src="https://cdn.jsdelivr.net/npm/@bi-digital/css@latest/dist/index.min.css" />

The fonts and tokens from the @bi-digital/css package is required.