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.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

Responsive Design

Responsive design and development ensures that a website or an application provides an optimal viewing experience across different devices, from large desktop computers to mobile phones. Nowadays, users access the web on a variety of screen sizes and resolutions, so it's crucial for websites to adapt seamlessly to any screen.

Grids should use percentage-based widths for elements rather than fixed pixel values, which allows content to adapt to the user's screen size. For more details, read our grid system docs.

This content has a percentage-width of 100%, which will take the full width of its container, no matter the screen size.
This content has a fixed width of 2000px, which might work on desktop but on smaller screens, an unnecessary scrollbar will appear.

Media queries are CSS rules that apply specific styles based on a device's width or height. Our design system defines breakpoints from mobile to large desktop and comes with a full range of responsive helper classes and mixins. For more details on that, read our breakpoint docs.

Breakpoints are used to adapt the display of contents in a webpage depending on the screen size to maintain usability.

I'm responsive

This card is responsive. On larger screens, the button is at the right of this content because there is enough space for it. On tablet, the button moves under the content to improve readability. On mobile, each card spans the whole width of the screen.

I'm responsive

This card is responsive. On larger screens, the button is at the right of this content because there is enough space for it. On tablet, the button moves under the content to improve readability. On mobile, each card spans the whole width of the screen.

I'm not responsive

This card is not responsive. The button is always at the right of this content, not matter the screen size. On mobile or tablet, this text is harder to read.

I'm not responsive

This card is not responsive. The button is always at the right of this content, not matter the screen size. On mobile or tablet, this text is harder to read.

In the design system, responsive typography is achieved by using CSS variables that adjust font sizes based on the viewport size. This allows for dynamic scaling of text accross devices. By using the correct semantic elements (such as headings, paragraphs, etc.), content adapts to maintain a consistent and responsive layout. For more details, read our typography docs.

Responsive images use the srcset attribute to load different image sizes based on screen size and resolution, which optimizes loading times and data usage. This overall will improve a website's performance as it reduces unnecessary bandwidth use on mobile devices. More informations on srcset can be found on the mdn web docs.

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="Example of a responsive image">

All components in our design system are fully responsive. From the header, which seamlessly transitions between mobile and desktop versions, to smaller components with dynamic spacing and font sizes that adjust based on the viewport, our system ensures your website delivers an optimized, responsive experience across all devices.