Caution: The Jack Henry design system is currently in an alpha state. Designs, code, and documentation may change at any time without warning. The system is presented for testing purposes only.

Elevation

Elevation defines how elements interact with other spatially and creates opportunities for rich layering of content and intuitive interactions.

Shadow

Shadows can be used to visually define a component from its surrounding and establish its spatial relationship within the overall layout.

There are four levels of shadow available to allow for a variety of spatial relationships within a given layout.

100
200
300
400

Z-index

Z-index is used to set the layer order of elements. This is critical for elements and components that visually “sit on top” of others within a view such as a dialog and its overlay or a slide-out drawer. While properly setting the z-index ensures certain components are not obscured, it does not necessarily establish the perceived visual depth between surfaces that shadow does.

Values are available from 0 to 1000 in increments of 100. A value of -100 is available when elements need to be positioned below the base level of 0.