Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

No Preview

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

Please check the Storybook config.
Try reloading the page.

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:

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.
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.
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.

Flex

Use the flex utility classes to change the display of elements within a .d-flex parent.

Flex utilities work alongside the display: flex css property that can be added to any HTML element using the classes d-flex or d-{breakpoint}-flex.

Flex direction

Flex direction is used on a flex container element to set the direction of its children.

The available values for flex-direction are the following: row, row-reverse, column, column-reverse.

Usage

To set the direction of elements within a flex container, simply add a .flex-{value} class to the container.

If you want to set it from a specific breakpoint: (sm, md, lg, xl): flex-{breakpoint}-{value}

Content

<div class="d-flex flex-row">
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
</div>

row

First content

Second content

Class: .flex-row

row-reverse

First content

Second content

Class: .flex-row-reverse

column

First content

Second content

Class: .flex-column

column-reverse

First content

Second content

Class: .flex-column-reverse

Align items

Align items is used on a flex container element to set the horizontal alignement (vertical alignment if set to flex-direction: column) of its children.

The available values for align-items are the following: start, end, center, baseline, stretch.

Usage

To set the alignment of elements within a flex container, simply add a .align-items-{value} class to the container.

If you want to set it from a specific breakpoint: (sm, md, lg, xl): align-items-{breakpoint}-{value}

Small content

Big content

<div class="d-flex align-items-end">
  <div class="p-8">Small content</div>
  <div class="px-8 py-48">Big content</div>
</div>

start

Small content

Big content

Class: .align-items-start

end

Small content

Big content

Class: .align-items-end

center

Small content

Big content

Class: .align-items-center

baseline

Small content

Big content

Class: .align-items-baseline

stretch

Small content

Big content

Class: .align-items-stretch

Justify content

Justify content is used on a flex container element to set the vertical alignment (horizontal alignment if set to flex-direction: column).

The available values for justify-content are the following: start, end, center, between, around, evenly.

Usage

To set the alignment of elements within a flex container, simply add a .justify-content-{value} class to the container.

If you want to set it from a specific breakpoint: (sm, md, lg, xl): justify-content-{breakpoint}-{value}

Content

<div class="d-flex justify-content-between">
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
</div>

start

Content

Class: .justify-content-start

end

Content

Class: .justify-content-end

center

Content

Class: .justify-content-center

between

Content

Class: .justify-content-between

around

Content

Class: .justify-content-around

evenly

Content

Class: .justify-content-evenly

Align self

Align self is used on a child of a flex container element to set its horizontal alignement (vertical alignment if parent is set to flex-direction: column).

The available values for align-self are the following: start, end, center, baseline, stretch.

Usage

To set the alignment of the child element within a flex container, simply add a .align-self-{value} class to the child.

If you want to set it from a specific breakpoint: (sm, md, lg, xl): align-self-{breakpoint}-{value}

Content

<div class="d-flex">
  <div class="px-8 py-48">Content</div>
  <div class="align-self-end p-8">Content</div>
  <div class="px-8 py-48">Content</div>
</div>

start

Content

Content with align-self

Content

Class: .align-self-start

end

Content

Content with align-self

Content

Class: .align-self-end

center

Content

Content with align-self

Content

Class: .align-self-center

baseline

Content

Content with align-self

Content

Class: .align-self-baseline

stretch

Content

Content with align-self

Content

Class: .align-self-stretch

Grow / Shrink

The grow and shrink utilities are used on children of a flex container to tell the child element to fill the available space. The available values are the following: grow-{0|1}, shrink-{0|1}.

Usage

To set the grow/shrink of a child element within a flex container, simply add a .flex-{grow|shrink-{0|1} class to the child.

If you want to set it from a specific breakpoint: (sm, md, lg, xl): flex-{breakpoint}-{grow|shrink}-{0|1}

I'm growing

I'm shrinking

<div class="d-flex">
  <div class="flex-grow-1 p-8">I'm growing</div>
  <div class="flex-shrink-1 p-8">I'm shrinking</div>
</div>

Grow

0

I'm not growing

Content

Class: .flex-grow-0

1

I'm growing

Content

Class: .flex-grow-1

Shrink

0

This is an example of content that demonstrates the flex-shrink property in action. When space becomes limited, elements with different flex-shrink values will behave differently, with some reducing in size faster than others based on their assigned values.

I don't shrink

Class: .flex-shrink-0

1

I shrink

Class: .flex-shrink-1

Align content

Align content is used on a flex container to set the horizontal alignment of the element's children together.

Note that align-content will only work if there are more than one row of elements of children.

The available values for align-content are the following: start, end, center, between, around, stretch.

Usage

To set the alignment of the child elements within a flex container, simply add a .align-content-{value} class to the flex container.

If you want to set it from a specific breakpoint: (sm, md, lg, xl): align-content-{breakpoint}-{value}

Content

<div style="height: 14rem" class="d-flex flex-wrap align-content-around">
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
</div>

start

Content

Class: .align-content-start

end

Content

Class: .align-content-end

center

Content

Class: .align-content-center

between

Content

Class: .align-content-between

around

Content

Class: .align-content-around

stretch

Content

Class: .align-content-stretch

Order

Order is used on a child element of a .d-flex parent. It's used to reorder the elements within the parent.

The available values for order are the following: 0, 1, 2, 3, 4, 5, first, last.

Usage

To set the alignment of a specific element within a flex container, simply add a .order-{value} class to the child element.

If you want to set it from a specific breakpoint: (sm, md, lg, xl): order-{breakpoint}-{value}

First element, positioned last

Second element

Last element, positioned first

<div class="d-flex">
  <div class="p-8 order-3">First element, positioned last</div>
  <div class="p-8 order-2">Second element</div>
  <div class="p-8 order-1">Last element, positioned first</div>
</div>

Wrap

Flex wrap is used on a flex parent container to define the wrapping of its children.

The available values for wrap are the following: wrap, nowrap, wrap-reverse.

Usage

To set the alignment of a specific element within a flex container, simply add a .flex-{value} class to the child element.

If you want to set it from a specific breakpoint: (sm, md, lg, xl): flex-{breakpoint}-{value}

Content

<div class="d-flex flex-wrap">
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
  <div class="p-8">Content</div>
</div>

wrap

Content 1

Content 2

Content 3

Content 4

Content 5

Content 6

Content 7

Content 8

Class: .flex-wrap

nowrap

Content 1

Content 2

Content 3

Content 4

Content 5

Content 6

Content 7

Content 8

Class: .flex-nowrap

wrap-reverse

Content 1

Content 2

Content 3

Content 4

Content 5

Content 6

Content 7

Content 8

Class: .flex-wrap-reverse

Fill

The fill utility is used on children of a flex container to force them to take all of the available space (divide equally if content is smaller than container, or divide depending on child's contents) The fill value is the following: fill.

Usage

To have children elements of a flex container fill the space, simply add a .flex-fill class to the child.

If you want to set it from a specific breakpoint: (sm, md, lg, xl): flex-{breakpoint}-fill

Same content, same width

<div class="d-flex">
  <div class="p-8 flex-fill">Same content, same width</div>
  <div class="p-8 flex-fill">Same content, same width</div>
  <div class="p-8 flex-fill">Same content, same width</div>
</div>

Content

Element with more content than the others

Content

<div class="d-flex">
  <div class="p-8 flex-fill">Content</div>
  <div class="p-8 flex-fill">Element with more content than the others</div>
  <div class="p-8 flex-fill">Content</div>
</div>