Blaze UI Divider Attributes

Last Updated : 27 Apr, 2022

Blaze UI is a user interface toolkit that provides a strong foundation and many components to building maintainable and scalable websites efficiently. All the features of Blaze UI rely on native browser features so it does not require an additional framework or library to work.

In this article, we will be seeing Blaze UI Divider Attributes. The Divider component is used when we want to visually separate sections on a webpage. 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.

Blaze UI Divider Attributes:

type: There is only one attribute for the Divider component named type.

Syntax:

<blaze-divider type="dashed | dotted">Dashed</blaze-divider>

Example 1: This example shows the dashed type divider to visually separate sections.

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 - Divider Attributes</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
    <style> 
        body { 
            font-family: sans-serif; 
        } 
    </style> 
</head> 
<body> 
    <div class="u-centered"> 
        <h2 style="color: green;">GeeksforGeeks</h2> 
        <h3>Divider Attributes - Blaze UI</h3> 
    </div> 
    <div class="u-window-box-super"> 
        <h3>What is GeeksforGeeks?</h3> 
        <p>GeeksforGeeks is a computer science portal  
            for geeks. Here one can read articles  
            on various topics like Data Structures,  
            Algorithms, Java, Android, Flutter, etc. 
        </p> 
        <blaze-divider type="dashed"> 
            Dashed Divider 
        </blaze-divider> 
        <h3>Does GeeksforGeeks offer courses?</h3> 
        <p>Yes, GeeksforGeeks offers self-paced as  
            well as live courses. You can enroll in  
            these courses by going to the courses page  
            and select the one you like. There are  
            plenty of free courses too. 
        </p> 
    </div> 
</body> 
</html>

Output:

Example 2: This example shows the default divider and dotted divider.

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 - Divider Attributes</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
    <style> 
        body { 
            font-family: sans-serif; 
        } 
    </style> 
</head> 
<body> 
    <div class="u-centered"> 
        <h2 style="color: green;">GeeksforGeeks</h2> 
        <h3>Divider Attributes - Blaze UI</h3> 
    </div> 
    <div class="u-window-box-super"> 
        <h3>What is GeeksforGeeks?</h3> 
        <p>GeeksforGeeks is a computer science portal  
            for geeks. Here one can read articles on  
            various topics like Data Structures,  
            Algorithms, Java, Android, Flutter, etc. 
        </p> 
        <blaze-divider>Default Divider</blaze-divider> 
        <h3>Does GeeksforGeeks offer courses?</h3> 
        <p>Yes, GeeksforGeeks offers self-paced as  
            well as live courses. You can enroll in  
            these courses by going to the courses  
            page and select the one you like. There  
            are plenty of free courses too. 
        </p> 
        <blaze-divider type="dotted"> 
            Dotted Divider 
        </blaze-divider> 
    </div> 
</body> 
</html>