---
title: Usage
position: 2
seo_title: Guidelines for Using Elevation
seo_description: Learn more about the recommendations and best practices for
  using elevation in the Telerik and Kendo UI themes. Apply the do's and don'ts to achieve
  emphasis, consistency, and size-proportional shadows.
---
## Usage Guidelines

Industry-wise, elevation implementation follows some basic principles and established standards.

### Emphasis

The use of elevation on primary, interactive, or floating elements is crucial as it visually differentiates these components from the rest of the user interface and signals their importance and functionality. Not only does this intuitively guide users through their interactions, but it also reinforces the visual hierarchy, making the interface more user-friendly and efficient.

<DosDonts>
<Do description="Apply strong elevation levels to primary actions to emphasize their importance, signal interactivity, or indicate floating behavior.">![A primary Telerik and Kendo UI Button using a well-balanced elevation level](images/foundation-elevation-usage-emphasis-do.png "Use well-balanced elevation levels when working with the Telerik and Kendo UI components.")</Do>
<Dont description="Avoid neglecting elevation levels for primary floating elements, as they need to stand out visually from other UI components.">![A primary Telerik and Kendo UI Button incorrectly using no elevation](images/foundation-elevation-usage-emphasis-dont.png "Don't skip setting the correct elevation for primary actions when working with the Telerik and Kendo UI components.")</Dont>
</DosDonts>


### Consistency

It is crucial to maintain identical elevation levels for identical elements to ensure a coherent visual structure across the user interface. This consistency helps users quickly comprehend the hierarchy and functionality of elements, improving the overall user experience by reducing cognitive load and confusion.

<DosDonts>
<Do description="Maintain consistent elevation levels on identical elements to ensure visual harmony and uphold consistency across the interface.">![Telerik and Kendo UI components with consistent elevation levels](images/foundation-elevation-usage-consistency-do.png "Use consistent elevation levels for identical elements when working with the Telerik and Kendo UI components.")</Do>
<Dont description="Avoid applying different elevation levels to identical elements, as it can create confusion about their hierarchy and interactivity.">![Telerik and Kendo UI components with inconsistent elevation levels](images/foundation-elevation-usage-consistency-dont.png "Don't apply different elevation levels for identical components when working with the Telerik and Kendo UI components.")</Dont>
</DosDonts>


### Size-Proportional Shadows

Applying strong elevation levels to larger components like cards and dialogs helps to emphasize their significance and draw user attention, creating a clear visual hierarchy. Conversely, using lighter elevation on smaller elements like buttons and chips maintains a clean and uncluttered interface, enhancing overall usability and aesthetic balance.

<DosDonts>
<Do description="Apply strong elevation to large components like cards and dialogs to highlight their importance.">![Telerik and Kendo UI Buttons with proportional elevation levels](images/foundation-elevation-usage-size-proportional-shadows-do.png "Use the Telerik and Kendo UI components with size-proportional elevation levels.")</Do>
<Dont description="Avoid strong elevation on small elements like buttons and chips, unless a floating effect is required, such as with Floating Action Buttons (FABs).">![Telerik and Kendo UI Buttons with disproportionately high elevation levels](images/foundation-elevation-usage-size-proportional-shadows-dont.png "Don't use the Telerik and Kendo UI components with disproportionately high elevation levels.")</Dont>
</DosDonts>