Skip to content
Related Articles

Related Articles

Blaze UI Divider

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Jun, 2022
View Discussion
Improve Article
Save Article

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.

Blaze UI Divider is a pure CSS divider that allows the creation of multiple designs of dividers with some content inside the divider. Dividers are used to divide the sections of the page visually.

  • Blaze UI Divider Attributes: The Divider component has only one attribute, the type attribute. The type attribute accepts a value of the typed string which can be dashed or dotted. When the type attribute is not specified, there will be a default type divider which will be a simple straight line.

Syntax: Create a divider as follows:

<blaze-divider type="dashed">
    GeeksforGeeks
</blaze-divider>

Example 1: We have three types of dividers in this example.

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=
    <script type="module"
            src=
    </script>
    <script nomodule=""
            src=
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
 
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
         
        <strong>Blaze UI Divider</strong>
        <br /><br />
        <blaze-divider type="solid">
            Welcome to GeeksforGeeks.
            This is solid divider.
        </blaze-divider>
        <blaze-divider type="dashed">
            Welcome to GeeksforGeeks.
            This is dashed divider.
        </blaze-divider>
        <blaze-divider type="dotted">
            Welcome to GeeksforGeeks.
            This is dotted divider.
        </blaze-divider>
    </center>
</body>
 
</html>


Output:

Blaze UI Divider

Blaze UI Divider

Example 2: In the following example, we are going to change the divider type using buttons.

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=
    <script type="module"
            src=
    </script>
    <script nomodule=""
            src=
    </script>
    </script>
</head>
 
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
         
        <strong>Blaze UI Divider</strong>
        <br /><br />
         
        <blaze-divider id="divider"
                       type="solid">
            Welcome to GeeksforGeeks.
        </blaze-divider>
         
        <button class="c-button c-button--success"
            onclick="changeType('solid')">
            Solid
        </button>
         
        <button class="c-button c-button--success"
            onclick="changeType('dashed')">
            Dashed
        </button>
         
        <button class="c-button c-button--success"
            onclick="changeType('dotted')">
            Dotted
        </button>
    </center>
 
    <script>
        function changeType(type) {
            $('#divider').attr('type', type)
        }
    </script>
</body>
 
</html>


Output:

Blaze UI Divider

Blaze UI Divider

Reference: https://www.blazeui.com/components/divider/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!