Blaze UI Divider
Last Updated :
13 Jun, 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.
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>
</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
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
Reference: https://www.blazeui.com/components/divider/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...