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.

Background

The background utilities are deprecated and will be removed in a future version.

Use the background utility classes to set the background of an element to any predefined color.

Background utilities also set the text color by defining the following CSS variables:

  • --post-contrast-color and --post-contrast-color-rgb
  • --post-contrast-color-inverted and --post-contrast-color-inverted-rgb

To set a background on an element, simply add a .bg-{colorname} class to it.

Content
<div class="bg-yellow p-3">Content</div>

yellow

Text
Class
.bg-yellow

white

Text
Class
.bg-white

light

Text
Class
.bg-light

gray

Text
Class
.bg-gray

dark

Text
Class
.bg-dark

black

Text
Class
.bg-black

primary

Text
Class
.bg-primary

secondary

Text
Class
.bg-secondary

success

Text
Class
.bg-success

warning

Text
Class
.bg-warning

error

Text
Class
.bg-error

info

Text
Class
.bg-info

success-background

Text
Class
.bg-success-background

warning-background

Text
Class
.bg-warning-background

error-background

Text
Class
.bg-error-background

nightblue

Text
Class
.bg-nightblue

nightblue-bright

Text
Class
.bg-nightblue-bright

petrol

Text
Class
.bg-petrol

petrol-bright

Text
Class
.bg-petrol-bright

coral

Text
Class
.bg-coral

coral-bright

Text
Class
.bg-coral-bright

olive

Text
Class
.bg-olive

olive-bright

Text
Class
.bg-olive-bright

purple

Text
Class
.bg-purple

purple-bright

Text
Class
.bg-purple-bright

aubergine

Text
Class
.bg-aubergine

aubergine-bright

Text
Class
.bg-aubergine-bright

It is possible to nest backgrounds.

Text color and inverted text color CSS variables are set for each background to always ensure the best possible contrast.

Content in .bg-gray container.
Content in .bg-dark container.
Content in .bg-light container. 
<div class="bg-gray p-3">
  Content in
  <code>.bg-gray</code>
  container.
  <div class="bg-dark p-3">
    Content in
    <code>.bg-dark</code>
    container.
    <div class="bg-light p-3">
      Content in
      <code>.bg-light</code>
      container.
    </div>
  </div>
</div>

Change the background opacity simply by setting the CSS variable --post-bg-opacity.

Low background opacity is not recommended as it can lead to poor contrast. It is then your responsibility to ensure that the contrast ratio between foreground and background is at least 4.5:1. More information on that topic is available on our accessibility docs.

Container with default opacity (1).
Container with opacity 0.8.
Container with opacity 0.6.
Container with opacity 0.4.
Container with opacity 0.2.
<div class="bg-aubergine p-3">Container with default opacity (1).</div>
<div class="bg-aubergine p-3" style="--post-bg-opacity: 0.8">Container with opacity 0.8.</div>
<div class="bg-aubergine p-3" style="--post-bg-opacity: 0.6">Container with opacity 0.6.</div>
<div class="bg-aubergine p-3" style="--post-bg-opacity: 0.4">Container with opacity 0.4.</div>
<div class="bg-aubergine p-3" style="--post-bg-opacity: 0.2">Container with opacity 0.2.</div>