background

These are a couple of classes that another background to your elements. Look for the special cases of -floating, -floating-shadow-s, -floating-shadow-m and -dimmed below.

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

Use the floating background to add a depth effect WITHOUT a box shadow.

Open on blank page
<div class="frontend-kit__example-wrapper -floating"></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

.-floating-shadow-s {

  @include box-shadow;
}

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

.-dimmed {

  @include background-dimmed;
}