Status
Documentation | PublishedElement can be used in production |
| PublishedElement can be used in production | |
| PublishedElement can be used in production |
Elevation
Elevation uses shadows and blurs for a layered effect that gives users a visual cue that an object or experience is “elevated” in priority or hierarchy.
Contents
What's newCopy link to this section
Copy link to this section
Elevation is a new foundation for the Dell Design System v2. The standards have been unified to create depth and shadow effects for components with differing spatial relationships.
Elevation valuesCopy link to this section
Copy link to this section
Each elevation level produces a three-dimensional appearance to an object with shadows and blur spans applied. As the elevation levels increase from 1 to 4, the elevation level’s shadow and blur span increases along the X-axis and Y-axis. This increase in elevation level allows the object to achieve a three-dimensional appearance of more depth along the Z-axis. There are three different options for elevation positioning: left shadows, bottom shadows, and right shadows. See light positioning guidance
The design system offers three shadow positions: left, bottom, and right. Each has four levels of elevation, shown here from lowest to highest.
A: Elevation levels 1 through 4, showing left shadow treatment
B: Elevation levels 1 through 4, showing bottom shadow treatment
C: Elevation levels 1 through 4, showing right shadow treatment
Elevation settingsCopy link to this section
Copy link to this section
While the UI kits will automatically contain the correct settings by level, it’s important to understand how those values are configured. Also note that when increasing elevation levels, the defined axes weight and blur increases.
X-axis: This is the offset of the drop shadow along the horizontal plane or X-axis, which controls the top and bottom shadow.
Y-axis: This is the offset of the drop shadow along the vertical plane or Y-axis, which controls the direction of the right and left shadows.
Blur: This adjusts the blur or feathering of the shadow color.
Spread: This adjusts the size of the shadow to represent the distance between the foreground and background.
Inner shadow: Inner shadows can be used to simulate depths to make something look sunken, for example. The shadow will be applied within the layer or object and is contained within the layer’s bounds.
Drop shadow: This shadow is applied to the outside of the layer, creating the illusion of three-dimensionality.
UsageCopy link to this section
Copy link to this section
Elevation is commonly used to create distance between objects, to set the direction of a light source, to make objects stand out against a background, and to give more dimension to elements.
To distinguish between two levels of elevation
If there are two different levels of elevation in an experience, raise the elevation level on the highest-priority item to eliminate confusion and differentiate between surfaces.
Different levels of elevation should be layered to show contrast between design elements. Here, the modal notification is given a higher visual priority through a higher elevation level than the cards behind it.
For overlapping experiences
Elevation is commonly used with notifications that require user interaction or when backgrounds are the same color but don’t offer enough contrast. Adding more depth to objects helps prioritize that action above others.
To highlight the priority of this notification, this example uses elevation to draw the user’s attention to that element and highlight its importance on the page.
To distance objects or highlight motion
For some components, elevation is used for hover states, such as an accordion hover.
Elevation can form a part of an element’s hover state in order to highlight a user’s interaction with it more clearly.
To show visual hierarchy
The higher an object is along the Z-axis, the more depth it will appear to have, helping users visually prioritize that element above others. Lowering the Z-axis value makes the object appear flatter.
Objects exist in a three-dimensional plane at different depths, represented here by the Y-axis. Each higher depth uses increased shadows to create four levels of elevation:
- Elevation Level 1 in this diagram will appear to have the least amount of depth on a page because it falls lower on the Z-axis.
- Elevation Level 2 is higher on the Z-axis, rising above Level 1.
- Elevation Level 3 will fall between the highest level and the lowest levels of elevation.
- Elevation Level 4 is the highest on the Z-axis and will appear to have the most depth and dimension on a page.
Light positionCopy link to this section
Copy link to this section
The elevation direction is dictated by the component’s position. Make sure to choose one light source direction per screen or experience for consistency.
Left shadow: Light is cast from the right side and the shadow appears on the left side.
Bottom shadow: Light is cast from the top and the shadow appears on the bottom.
Right shadow: Light is cast from the left side and the shadow appears on the right side.
Choosing elevationCopy link to this section
Copy link to this section
When deciding which elevation level to use, consider these best practices:
Narrow a user’s focus by increasing elevation
Users will focus more on objects that appear closer to the eye. If you want users to prioritize one action above others, increase the elevation level.
Choose an elevation that simulates real lighting
Ambient light requires a softer edge or less elevation, whereas more direct light would use a higher contrasting shadow or elevation level.
Don’t overuse elevation
Applying elevation to too many objects can lead to a poor experience that distracts the user. Use it sparingly.
Elevation color: light modeCopy link to this section
Copy link to this section
| Color | Use cases | Hex | RGBA |
|---|---|---|---|
| Shadow Light | #002A58 |
AccessibilityCopy link to this section
Copy link to this section
Don’t use a shadow for style only
Drop shadows or similar effects create confusion for sighted users when viewed alongside elevated elements, and should be avoided.
Storybook demosCopy link to this section
Copy link to this section
View the elevation demo and code in Vanilla.
View the elevation demo and code for Web Components.
View the elevation demo and code in React.