bi-web-components
TypeScript icon, indicating that this package has built-in type declarations

0.2.9 • Public • Published

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.

/bi-web-components/

    Package Sidebar

    Install

    npm i bi-web-components

    Weekly Downloads

    298

    Version

    0.2.9

    License

    MIT

    Unpacked Size

    4.83 MB

    Total Files

    857

    Last publish

    Collaborators

    • olros
    • gunhild.b.mundal
    • illya.ushakov
    • andreas.norstein.bi
    • jacob.theisen