Elevation

Elevation suggests a conceptual hierarchy that makes use of box shadows to indicate visual hierarchy. It is up to the developer to maintain the actual Z-index and correspond this to the correct shadows

The elevation of an object in the atmosphere is visually rendered as box shadows. The amount of elevation is not the same as the Z-index, rather its relative elevation which aids in rendering the shadow.

Levels

  1. kx-shadow-2
    12px
  2. kx-shadow-3
    12px
  3. kx-shadow-4
    12px
  4. kx-shadow-5
    12px
  5. kx-shadow-6
    12px

Use elevation in HTML

Here is an example snippet. Notice the classes used on the kx-col-element.

<link rel="stylesheet" href="path-to-designsystem-css"/>

<div class="kx-p--xlarge kx-shadow-3">
    <h2>Responsive padding!</h2>
    <p>Try resizing your browsers</p>
</div>

Here is how it looks. The level of elevation is often seen in kx-cards using the default skin.

Elevated box

This box uses a subtle box-shadow

Use elevation in Scss

If you use Scss, we provide simple mixins that can be used directly in your stylesheet. Let’s use the same example from above:

@import 'path-to/fun_shadow'; // Functions for shadow
@import 'path-to/mix_shadow'; // Mixins for shadow

.foo {
    @include shadow(3);
}