Open In App

Blaze UI Example Email

Last Updated : 24 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a framework-free open-source UI toolkit that uses JavaScript components to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. This framework allows us to use various of its styles and properties to make a website more user-friendly.

In this article, we will create two email pages with different classes. This page is used to provide inbox, sent junk, bin, archive, and starred buttons which will help you to navigate through the main page.

Classes Used:

  • o-grid: This class is used to create the grid.
  • o-grid–no-gutter: This class can be used to turn off all the gutters for the specific container cells.
  • u-high: This class is used to give minimum elevation to an element.
  • o-grid__cell: This class is used to provide a grid with fixed cells
  • o-grid__cell–width-100: This class is used to provide a cell with a width of 100%.
  • c-nav: This class is used to provide a nav bar on the web page.
  • c-nav__item: This class is used to provide items in the nav bar.
  • c-nav__item–brand: This class is used to provide item brand into the navbar.
  • fa-inbox: This class is used to provide an icon of the index.
  • fas: This class is used to create icons on the web page.
  • u-pillar-box-small: It has smaller padding than medium.
  • c-badge: this class is used to create the badge.
  • c-badge–rounded: This class is used to create the rounded badge.
  • c-badge–info: This class is used to create the information badge.
  • c-badge–warning: This class is used to create the warning badge.
  • c-nav__item–active: This class is used to create the active nav item.
  • fa-dumpster: This class is used to create the icon of a dumpster.
  • fa-trash-alt: This class is used to create the trash icon.
  • fa-archive: This class is used to create the archive icon.

Example1: In this example, we will create the basic nav bar of the email page from where you can navigate through the page very easily.

HTML




<!DOCTYPE html>
  
<html>
  
<head>
    <link rel="stylesheet" href=
        "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
  
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js">
    </script>
</head>
  
<body>
  
    <div class="o-container o-container--medium">
        <center>
            <h1 style="color: green">
                GeeksforGeeks
            </h1>
  
            <h3>A computer science portal for geeks</h3>
        </center>
  
        <div class="o-grid o-grid--no-gutter u-high ">
            <nav class="o-grid__cell o-grid__cell--width-100 c-nav">
                <a href="#" class="c-nav__item c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-inbox"></i>
                    <span class="u-pillar-box-small">Inbox</span>
                    <span class="c-badge c-badge--rounded c-badge--info">
                        1,409
                    </span>
                </a>
                <a href="#" class="c-nav__item c-nav__item--active 
                                   c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-flag"></i>
                    <span class="u-pillar-box-small">starred</span>
                    <span class="c-badge c-badge--rounded c-badge--warning">
                        7
                    </span>
                </a>
                <a href="#" class="c-nav__item c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-paper-plane"></i>
                    <span class="u-pillar-box-small">Sent</span>
                </a>
                <a href="#" class="c-nav__item c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-dumpster"></i>
                    <span class="u-pillar-box-small">Junk</span>
                </a>
                <a href="#" class="c-nav__item c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-trash-alt"></i>
                    <span class="u-pillar-box-small">Bin</span>
                </a>
                <a href="#" class="c-nav__item c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-archive"></i>
                    <span class="u-pillar-box-small">Archive</span>
                </a>
            </nav>
        </div>
  
    </div>
</body>
  
</html>
 






                        










Output:


 


Example2: In this example, we will create a newsletter that will help you to keep an eye on world news.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


  


<html> 


  


<head> 


    <link rel="stylesheet" href= 


        "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 


  


    <script src= 


"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js"> 


    </script> 


</head> 


  


<body> 


  


    <div class="o-container o-container--medium"> 


        <center> 


            <h1 style="color: green"> 


                GeeksforGeeks 


            </h1> 


  


            <h3>A computer science portal for geeks</h3> 


        </center> 


  


  


        <div class="o-grid o-grid--no-gutter u-high "> 


            <nav class="o-grid__cell o-grid__cell--width-100 c-nav"> 


                <a href="#" class="c-nav__item c-nav__item--brand"> 


                    <i aria-hidden="" class="fas fa-inbox"></i> 


                    <span class="u-pillar-box-small">Inbox</span> 


                    <span class="c-badge c-badge--rounded c-badge--info"> 


                        1,409 


                    </span> 


                </a> 


                <a href="#" class="c-nav__item c-nav__item--active  


                    c-nav__item--brand"> 


                    <i aria-hidden="" class="fas fa-flag"></i> 


                    <span class="u-pillar-box-small">starred</span> 


                    <span class="c-badge c-badge--rounded c-badge--warning"> 


                        7 


                    </span> 


                </a> 


                <a href="#" class="c-nav__item c-nav__item--brand"> 


                    <i aria-hidden="" class="fas fa-paper-plane"></i> 


                    <span class="u-pillar-box-small">Sent</span> 


                </a> 


                <a href="#" class="c-nav__item c-nav__item--brand"> 


                    <i aria-hidden="" class="fas fa-dumpster"></i> 


                    <span class="u-pillar-box-small">Junk</span> 


                </a> 


                <a href="#" class="c-nav__item c-nav__item--brand"> 


                    <i aria-hidden="" class="fas fa-trash-alt"></i> 


                    <span class="u-pillar-box-small">Bin</span> 


                </a> 


            </nav> 


  


  


            <br><br> 


  


            <div class="o-grid__cell o-grid__cell--width-50 


                         u-pillar-box-medium"> 


                <div class="o-grid o-grid--no-gutter"> 


  


                    <div class="o-grid__cell o-grid__cell--width-15"> 


                        <div class="c-avatar"> 


                            <img class="c-avatar__img" alt="placeholder"


                                src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"


                                alt="GFG image"> 


                        </div> 


                    </div> 


  


                    <div class="o-grid__cell"> 


                        <h1 class="c-heading u-medium u-letter-box-small"> 


                            GeeksforGeeks</h1> 


                    </div> 


  


                </div> 


                <h2 class="c-heading u-xlarge u-letter-box-none"> 


                    GeeksforGeeks News</h2> 


                <section class="u-letter-box-small"> 


                    <p class="c-paragraph"> 


                        Geeks News is a one-stop platform where 


                        you can access all the latest news stories 


                        and enriching blogs from various domains 


                        including technology, finance, business, 


                        and more. 


                    </p> 


  


                </section> 


            </div> 


        </div> 


    </div> 


</body> 


  


</html>



















                        







                        










Output:


 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Blaze UI Counter Methods
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Angular PrimeNG TreeTable Filtering
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to check if an email address exists without sending an email ?
            

        
    
        
            

                Blaze UI Example Login
            

        
    
        
            

                Blaze UI Example Dashboard
            

        
    
        
            

                Blaze UI Example Chat
            

        
    
        
            

                Blaze UI Basket Example
            

        
    
        
            

                Blaze UI Objects Complete Reference
            

        
    
        
            

                Blaze UI Containers Nesting
            

        
    
        
            

                Blaze UI Basic Tabs
            

        
    
        
            

                Blaze UI Badges Colors
            

        
    
        
            

                Blaze UI Counter Methods
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        krishna_97                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox