Components

Accessible and feature-rich front-end framework for quick and easy web development at Länsförsäkringar.

Our components, or LFUI, can be described as the lego blocks which form the foundation of all digital interfaces we create at Länsförsäkringar.

The design is in sync with our visual identity, and standardised ways of using these components together can be found in the patterns-section.

For further information on how our components are presented, see the Anatomy of a component page.

Ready to get going? Get started.

Components presentation

The different components are categorised based on the use case, with visual examples for each component on the category pages so that you easily can find the component you need.

The anatomy of a component page

Each component is presented on a page that all have the same structure:

Leading introduction paragraph
Working examples of the components, including all different versions and options
Detailed guides on how to use the component
- Design: how and when to use is
- Code: how to implement
- Copy (where applicable): how to write copy for it.

The design tab includes general guidelines along with introductions to the different variations and modifiers.

Variations are distinctly different ways of using a component (e.g. buttons are divided into three variations on the web: primary, secondary and log in).
Modifiers are ways of styling the variations in different ways. These stylings can be either specific to a variation or general for all variations (for example, primary buttons on the web have both specific modifiers and general modifiers which they share with all buttons).

Having small touches of colour makes it more colourful than having the whole thing in colour.
Dieter Rams