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.

Sizing

Sizing utility classes are used to influence the height and width of elements to which they are applied.

Height & Width

Height and width can be set using our utility classes h-{size} and w-{size}, max-height and max-width can be set with max-h-{size} and max-w-{size} and min-height and min-width can be set with min-h-{size} and min-w-{size}.

The design system offers classes for percentage based sizing with the suffixes bellow. They allow you to set a height / width as a percentage of the parent element.

  • *-auto
  • *-quarter
  • *-third
  • *-half
  • *-two-thirds
  • *-three-quarters
  • *-full
<div class="content h-full w-quarter"></div>
NameDescriptionDefaultControl
Height
height
Set the height of the rectangle
string
-
max-height
Set the max-height of the rectangle
string
-
min-height
Set the min-height of the rectangle
string
-
Width
width
Set the width of the rectangle
string
-
max-width
Set the max-width of the rectangle
string
-
min-width
Set the min-width of the rectangle
string
-

Additional pixel-based sizing classes allow precise height h-{size} and width w-{size} definitions in pixels (e.g., w-12 for 12px width and h-24 for 24px height).

See all available sizes in the example bellow.

<div class="content h-80 w-104"></div>
NameDescriptionDefaultControl
Height
height
Set the height of the rectangle
string
-
max-height
Set the max-height of the rectangle
string
-
min-height
Set the min-height of the rectangle
string
-
Width
width
Set the width of the rectangle
string
-
max-width
Set the max-width of the rectangle
string
-
min-width
Set the min-width of the rectangle
string
-

For width and height, the design system provides additionally .w-{breakpoint}-{size} classes (e.g. w-md-full, h-md-56) so that you can set different sizes for specific breakpoints.

See Full-width button for a practical example.

There is the possibility to set the width and height as a percentage relative to the viewport. Available percentages: 25, 33, 50, 66, 75, 100.

  • min-vh-100
  • min-vw-100
  • vh-100
  • vw-100