background

There are 3 primary backgrounds: -primary, -secondary and contrast. Each of which can be elevated using the utility classes -floating-shadows and floating-shadow-m. The -dimmed can be used to add a backdrop.

The frontend-kit-example_… classes throughout this documentation are not part of the element in question and serve only demonstrative purposes.
table of content

component variations

primary

This class is useful if you need to reset a background color.

Open on blank page
<div class="frontend-kit__example-wrapper -primary"></div>

secondary

Open on blank page
<div class="frontend-kit__example-wrapper -secondary"></div>

contrast

Open on blank page
<div class="frontend-kit__example-wrapper -contrast"></div>

floating shadow s

Use the floating shadow s background to add a depth effect, using a box shadow of 0.5rem. See Box for a usage example.

Open on blank page
<div class="frontend-kit__example-wrapper -floating-shadow-s"></div>

floating shadow m

Use the floating shadow m background to add a depth effect, using a box shadow of 1rem. See Box for a usage example.

Open on blank page
<div class="frontend-kit__example-wrapper -floating-shadow-m"></div>

dimmed

Use the dimmed background below some content to make it easier to focus visually. See Modal Box for a usage example.

Open on blank page
demo background text for dimmed background
demo background text for dimmed background
demo background text for dimmed background
demo background text for dimmed background
demo background text for dimmed background
demo background text for dimmed background
demo background text for dimmed background
demo background text for dimmed background
demo background text for dimmed background
demo background text for dimmed background
demo background text for dimmed background
demo background text for dimmed background
<div style="position:relative">
  demo background text for dimmed background
  <br />
  demo background text for dimmed background
  <br />
  demo background text for dimmed background
  <br />
  demo background text for dimmed background
  <br />
  demo background text for dimmed background
  <br />
  demo background text for dimmed background
  <br />
  demo background text for dimmed background
  <br />
  demo background text for dimmed background
  <br />
  demo background text for dimmed background
  <br />
  demo background text for dimmed background
  <br />
  demo background text for dimmed background
  <br />
  demo background text for dimmed background
  <br />
  <div style="position:absolute;top:0">
    <div class="frontend-kit__example-wrapper -dimmed"></div>
  </div>
</div>

additional content

styles SCSS

@use "../../styles/helpers.scss";

.-floating-shadow-s {

  @include helpers.box-shadow;
}

.-floating-shadow-m {
  box-shadow: 0 0 1rem 0.1rem var(--shadow-fill);
}

.-dimmed {

  @include helpers.background-dimmed;
}