BI Web components

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

Get started

$3

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

Import all components:

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

Or just specific components:

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

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

`css
@import '@bi-digital/css';
`

Or in jsx/tsx:

`ts
import '@bi-digital/css';
`

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

$3

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

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

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:

`html

`

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