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.

Sections

Figma Design

The .section class is used to create a container that ensures content does not exceed a maximum width of 1920px (Full HD), providing a consistent layout across different screen sizes.

The component does not add any paddings, so make sure you're using a .container element along with some of our spacing utility classes inside to ensure your content gets padded correctly across all viewports.

Title

This section demonstrates a foundational layout component with proper spacing and container styling. Sections help in organizing content into distinct visual blocks, improving readability and structure. The container ensures consistent horizontal padding and maximum width across different screen sizes. 

<section class="section palette-brand">
  <div class="container py-64">
    <h2>Title</h2>
    <p>
      This section demonstrates a foundational layout component with proper spacing and container
      styling. Sections help in organizing content into distinct visual blocks, improving
      readability and structure. The container ensures consistent horizontal padding and maximum
      width across different screen sizes.
    </p>
  </div>
</section>

In the example above, the .section class is making sure, the background-colored container will not be any wider than Full HD, while the inner .container class is making sure content itself keeps aliged with the rest of the pages content.

Inside the .section element you can use some helper classes to align elements either with the edges of the .section or the .container element.

NameDescriptionDefaultControl
Alignment
Element
To which element the content should be aligned to.
string
-
Alignment
Alignment of the content inside the .section element containing the alignment class.
string
-
Breakpoint
Breakpoint at which the alignment class is applied. The alignment class is applied from the specified breakpoint and up.
string
-
Content insertion
Nest in grid
Whether to nest the content inside our grid-system or not.
boolean
-