Blaze UI Panels

Last Updated : 27 Apr, 2022

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= "https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css" /> </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= "https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css" /> </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

Blaze UI Images

tarunsinghwap7

Improve

Article Tags :

Blaze UI Panels

Similar Reads

Blaze UI Objects

Blaze UI Components

Blaze UI Utilities