Spectre Divider
The Spectre Divider is used to create a divider between similar kinds of components if you design login and Signup on the page but want to divide them side by side vertically or horizontally, then we can do that.
Spectre Divider Class:
- divider: This class is used to divide the contents.
- divider-vert: This class is used to create a vertical divider between contents.
Spectre Divider attribute:
- data-content: This attribute holds the text value you want to show on the divider line.
Syntax:
<div class="divider">
....
</div>
- Element with text:
<div class="divider text-center" data-content="OR"> .... </div>
The below examples illustrate the Spectre Divider.
Example 1: In this article, we will see without text and with the text divider.
HTML
<!DOCTYPE html><html><head> <link rel="stylesheet" href= <link rel="stylesheet" href= <link rel="stylesheet" href=</head><body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>Spectre Divider Class</strong> <br> </center> <strong>Spectre CSS:</strong> <div class="divider"></div> <p> Spectre is a lightweight, responsive, and modern CSS framework, which provides the extensible with faster development. It facilitates the responsive layout system based on the flexbox property, along with providing the basic elements & typography stylings. It solves many problems that we had once like the cross-browser compatibility issue. In the current scenario, the websites are perfect for all the browsers (IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and Phones). </p> <br> <strong>Can Spectre Replace Bootstrap</strong> <p> Spectre is much more lighter than the Bootstrap but there are few drawback in this frameworks. There are few classes used in bootstrap that can not be done in spectre. If you can avoid those things then yes it can other wise not. </p> <!-- divider element with text --> <div class="divider text-center" data-content="OR"></div> <strong>Can Spectre Replace Tailwind</strong> <p> In my opinion, no, Spectre can not replace the Tailwind. Tailwind CSS is the future of designing of websites. </p></body></html> |
Output:
Example 2: In this example, we will see the divider-vert class.
HTML
<!DOCTYPE html><html><head> <link rel="stylesheet" href= <link rel="stylesheet" href= <link rel="stylesheet" href=</head><body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>Spectre Divider Class</strong> <br> </center> <!-- vertical divider element with text --> <div class="columns"> <div class="column"> <strong>Can Spectre Replace Bootstrap</strong> <p> Spectre is much more lighter than the Bootstrap but there are few drawback in this frameworks. There are few classes used in bootstrap that can not be done in spectre. If you can avoid those things then yes it can other wise not. </p> </div> <div class="divider-vert" data-content="OR"> </div> <div class="column"> <strong>Can Spectre Replace Tailwind</strong> <p> In my opinion no, Spectre can not replace the Tailwind. Tailwind CSS is the future of designing of websites. </p> </div> </div></body></html> |
Output:
Reference: https://picturepan2.github.io/spectre/utilities/divider.html
Please Login to comment...