Open In App

Blaze UI Panels

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

A panel is a very useful component for any layout as it provides a manageable scrollable space within the existing structure of our web page. The panel size can be increased or decreased just by just setting its height. In this article, we will see about Panels in Blaze UI.

Blaze UI Panels classes:

  • o-panel-container: This class creates a container for panels on the web page.
  • o-panel: This class is used to create a panel within your web page.

Syntax:

<div class="o-panel-container" style="...">
  <div class="o-panel">
       ....
  </div>
</div>

Example 1: Below example demonstrates the panel in Blaze UI.

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" />
    <link rel="stylesheet" href=
</head>
 
<body>
    <div class="u-centered">
        <h2 style="color:green">GeeksforGeeks</h2>
        <h3>Panel in Blaze UI</h3>
    </div>
    <div class="o-panel-container o-container
        o-container--xlarge" style="height: 100px">
        <div class="o-panel">
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
            You can also learn various things
            like programming languages,
            algorithms, data structures, etc.
            You can also ask questions to other
            geeks and get help from them.
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
            You can also learn various things
            like programming languages, algorithms,
            data structures, etc. You can
            also ask questions to other geeks and
            get help from them. GeeksforGeeks
            is a portal for geeks. It is a place
            where you can learn, share and get
            help from other geeks. Find various
            things on the portal like Jobs,
            Hackathons, Programming Competitions,
            Coding Questions, etc. You can
            also learn various things like
            programming languages, algorithms, data
            structures, etc.
        </div>
    </div>
</body>
 
</html>


Output:

 

Example 2: Another example demonstrating panel in Blaze UI.

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" />
    <link rel="stylesheet" href=
</head>
 
<body>
    <div class="u-centered">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
         
        <h3>Panel in Blaze UI</h3>
    </div>
 
    <div class="o-panel-container o-container
        o-container--small" style="height:200px">
        <div class="o-panel">
            GeeksforGeeks is a portal for geeks.
            It is a place where you can learn,
            share and get help from other geeks.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
            You can also learn various things
            like programming languages, algorithms,
            data structures, etc. You can also
            ask questions to other geeks and get
            help from them. GeeksforGeeks is
            a portal for geeks. It is a place
            where you can learn, share and get
            help from other geeks. Find
            various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions,
            etc. You can also learn various things
            like programming languages,
            algorithms, data structures, etc. You can
            also ask questions to other geeks
            and get help from them.
            Find various things on the portal
            like Jobs, Hackathons, Programming
            Competitions, Coding Questions, etc.
            You can also learn various things
            like programming languages,
            algorithms, data structures, etc.
            GeeksforGeeks is a portal for geeks.
            It is a portal for geeks.
        </div>
    </div>
</body>
 
</html>


Output:

 

Reference: https://www.blazeui.com/objects/panels



Last Updated : 27 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads