Blaze UI Elevation

Last Updated : 25 Apr, 2022

Blaze UI is a framework-free open-source UI toolkit. It provides a great foundation for building scalable websites faster. Blaze UI comes with a lot of pre-styled components and many utilities so that developers don’t have to build everything from scratch. All of its components rely solely on native browser features so it can be used without any library or framework.

In this article, we will be seeing Blaze UI elevation. The elevation component is used for giving box shadows to any element. There are three classes provided by Blaze UI to give consistent box shadows.

Blaze UI Elevation classes:

u-high: This class is used to give minimum elevation to an element.
u-higher: This class is used to give medium elevation to an element.
u-highest: This class is used to give maximum elevation to an element.

Syntax:

<div class="u-highest"> ... </div>

Example: This example shows the side-by-side comparison of all three elevation classes mentioned above.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Blaze UI - Elevation</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <style> 
        body { 
            font-family: sans-serif; 
            text-align: center; 
        } 
  
        .wrapper { 
            display: flex; 
  
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
      
    <h3>Elevation - Blaze UI</h3> 
  
    <div class="u-window-box-super"> 
        <div class="o-grid"> 
            <div class="o-grid__cell"> 
                <p>Default Image</p> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152.png"
                    alt="gfg_logo" /> 
            </div> 
            <div class="o-grid__cell"> 
                <p>Image with <b>u-high</b> class</p> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152.png"
                    alt="gfg_logo" class="u-high" /> 
            </div> 
            <div class="o-grid__cell"> 
                <p>Image with <b>u-higher</b> class</p> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152.png"
                    alt="gfg_logo" class="u-higher" /> 
            </div> 
            <div class="o-grid__cell"> 
                <p>Image with <b>u-highest</b> class</p> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152.png"
                    alt="gfg_logo" class="u-highest" /> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>