Elevation is a core component that renders shadow, using the library's shadow system.

• Usage
• Props
• See Also

The shadow effect is generated using the value prop.

import { Elevation, Surface, Text, View } from '@wp-g2/components';
import { ui } from '@wp-g2/styles';

function Example() {
	return (
		<View css={[ui.padding(5)]}>
			<Surface css={[ui.padding(5)]}>
				<Text>Into The Unknown</Text>
				<Elevation value={5} />
			</Surface>
		</View>
	);
}

Type: number

Renders the active (interaction) shadow value.

Type: string,number

Renders the border-radius of the shadow.

Type: number

Renders the focus (interaction) shadow value.

Type: number

Renders the hover (interaction) shadow value.

Type: boolean

Determines if hover, active, and focus shadow values should be automatically calculated and rendered.

Type: number

Dimensional offsets (margin) for the shadow.

Type: number

Size of the shadow, based on the Style system's elevation system. The value determines the strength of the shadow, which sense of depth. In the example below, isInteractive is activated to give a better sense of depth.

• Surface
• View