Layer

Layer is the the surface on which content and components live. It is used as a strong visual indicator that something belongs together, which is known as the common regions principle. Whenever using proximity to communicate relatedness of elements is not enough, putting the related elements on a layer can be used.

Raised layers should only be used to create focal points. Focal points are areas of interest or importance that should catch the users attention. Putting content inside a raised layer puts it on a higher level of dominance and will thus be noticed sooner by the user then other content that is perceived less dominant.

Example

<Layer.Base>
  <Spacings.Inset scale="big">
    <Spacings.Inline scale="medium">
      <Spacings.Inset>Base</Spacings.Inset>
      <Layer.Flat>
        <Spacings.Inset>Flat</Spacings.Inset>
      </Layer.Flat>
      <Layer.Raised>
        <Spacings.Inset>Raised</Spacings.Inset>
      </Layer.Raised>
      <Layer.Overlay>
        <Spacings.Inset>Overlay</Spacings.Inset>
      </Layer.Overlay>
    </Spacings.Inline>
  </Spacings.Inset>
</Layer.Base>

Base

Flat

Raised

Overlay

Layer types

Layer type	Usage	Background Color
`Base`	Background	Gray
`Flat`	Background of primary content	White
`Raised`	Cards	White (Default), Brand
`Overlay`	Dropdowns, Nav, Modals	White (Default), Brand

Background Colors

As listed in the table above all layers come with a default background color. For the Raised and Overlay layers one can change to background color to the brand color using the backgroundColor prop. This is useful for UI elements like toolbars that should contrast to surrounding interface elements.

Additionally, if you are using the Raised layer for a sticky bar at the bottom of a mobile device, you can invert the shadow with the invertShadow prop.