# BI Web components

All components can be seen at [designsystem.bi.no](https://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:

```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.

<details>
<summary>How can I include only the fonts and tokens?</summary>

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

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

</details>

### CDN

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

```html
<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`:

```html
<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.