No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Introduction - Inera Design System (IDS)

Inera Design System supports four different component frameworks.

Regardless of choice of framework, you will need our CSS.

Instructions on how to install can be found under Getting started/CSS in the menu.

CSS

Use our HTML structure together with our CSS, and do the rest yourself.

Web components

Use our web components, which are framework agnostic and can be used with any front-end tech-stack.

Get started with Web Components

React components

Get started with React components

Angular components

Get started with Angular components

Layouts

Content

Default content max-width is 80rem. This is the default value for header, footer, and container.

Use the CSS token --ids-layout-content-max-width if creating your own layout.

Text

Continuous texts should have max-width 40rem to ensure accessibility.

Use CSS class ids-text-max-width, or CSS token --ids-layout-text-max-width to get the correct max width for text.

Themes and modes

IDS supports several different themes and modes via CSS classes that you set on the HTML-tag of your app.

We also support two additional background colors. Use classes ids-bg-1 (background default) and ids-bg-2 (background alternative).

Themes

  • ids--1177
  • ids--1177-admin
  • ids--1177-pro
  • ids--inera
  • ids--inera-admin

Modes

Light mode and dark mode needs to be supported for accessibility.

  • ids--light
  • ids--dark

Fluid

Fluid will remove any max width for headers, footers, and global alert.

Containers will get a new max width of 120rem, or you can use the class ids-container-max-width for the page content.

  • ids--fluid