Fabric Elements

The home of the web component, or custom elements, implementation of Fabric, FINN's design system.

Installation

All the Fabric Elements code is provided as a single package and each component can be imported from this package.

Install from NPM

The Fabric Elements package can be installed from NPM.

npm install @fabric-ds/elements

Install from Eik

The same package is also available via our Eik CDN server

https://assets.finn.no/pkg/@fabric-ds/elements/v1/index.js

Using Components

Once installed, components can be used in your HTML markup.

Eiendom Bolig til salgs Oslo Eiendom Bolig til salgs Oslo

Importing from the NPM package

👉 This is the most common method and should be used in most cases When importing from NPM you will need to ensure you have build tooling in place. If you are working with Podium podlets or layouts which is the most common use case at Finn, you likely already have Eik in place with Rollup or Esbuild in which case no further action should be needed. Example import '@fabric-ds/elements';

Importing directly from Eik

👉 This is great for prototyping (can also be used in production)

It is also possible to import components directly from the URL on our Eik server. While not common, it should be possible to write Elements code without the need for a build setup. You might find this useful for rapid prototyping something on a hack day for example!

Example import 'https://assets.finn.no/pkg/@fabric-ds/elements/v0/index.js';