LFDS is Länsförsäkringar's design system core components distributed as composable Web Components.
You can import the design system using a script tag. Many CDN's distribute packages published to npm, for example jsDelivr. You should define the exact version you want to use to avoid breaking changes.
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@lansforsakringar/core-components@VERSION"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lansforsakringar/core-components@VERSION/index.css">The design system is published on NPM and can be installed as a package.
npm install @lansforsakringar/core-componentsWhen using a bundler like Vite or Webpack, you have two options for importing and registering the components.
By importing the bare module, components will load lazily as they are rendered on the page, making sure that no unused code is loaded.
import '@lansforsakringar/core-components'If you have more specific needs, e.g. your own lazy loading behavior, you can import the individual components and register them as custom elements.
import {
LfdsButton,
defineCustomElement,
} from '@lansforsakringar/core-components/lfds-button.js'
defineCustomElement(LfdsButton)You'll also need to import the global styles in your application. If you are using build tools like Vite or Webpack, you can import the CSS file directly in your JavaScript.
import "@lansforsakringar/core-components/index.css"Or in your CSS if you are using a CSS preprocessor like PostCSS.
@import "@lansforsakringar/core-components";The design system make use of static assets e.g. images, fonts etc. These files are included in the distributed packages and need to be served by the consuming application.
The design systems needs to be configured so that it knowns where you are serving the assets from. This is done by wrapping your application (or parts of) with the <lfds-config> element, setting the assetPath attribute to the public path where assets are served.
<!doctype html>
<html>
<head>
<script type="module" src="/my-app.js"></script>
</head>
<body>
<lfds-config assetPath="/lfds-assets">
<!-- Your application goes here -->
</lfds-config>
</body>
</html>For convenience, the design system provides a Vite plugin that can be used to serve these assets.
// vite.config.js
import { lfdsVite } from '@lansforsakringar/core-components/plugin'
export default {
plugins: [lfdsVite({ assetDir: 'lfds-assets' })],
}On build, the assets will be copied over to the provided assetDir relative to the Vite out directory.
Just like with the script tag, assets can be served from a CDN. All assets are configured to be served from the /assets path relative to the package.
<lfds-config
assetPath="https://cdn.jsdelivr.net/npm/@lansforsakringar/core-components@VERSION/assets">
<!-- Your application goes here -->
</lfds-config>If you are not using Vite or want to serve the assets in a different way, you can copy the assets from the package to your public folder.
cp -r node_modules/@lansforsakringar/core-components/dist/core-components/assets public/lfds-assets