Commentary

The divider component is a container that separates two articles or paragraphs. The divider can be vertically or horizontally oriented.

Typical uses are to offer options to actions. As an example, login using a third party service such as Google or login with email and password. Another example is to offer payment via PayPal or credit card.

Usage

Classes:
.divider-box Defines a vertically oriented divider box.
.divider Styles child horizontal divider for vertical box.
.divider-box-horz Defines an optional horizontally oriented divider box.
.divider-vert Styles child vertical divider for horizontal box.
data-content Attribute that holds text to overlay onto the divider.
Dependencies:
File: divider.css
Variables: --bg-main-comp, --border-main-darker, --gap-col, --margin-form, --padding-normal, --pad-vert, --text-light

Examples

Common Vertically Stacked Divider

First Paragraph

Second paragraph


                <div class="divider-box">
                    <p class="has-text-centered">First Paragraph</p>
                    <div class="divider" data-content="Horizontal Divider"></div>
                    <p class="has-text-centered">Second paragraph</p>
                </div>

Horizontally Aligned Divider

First Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.

Second Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.


                <div class="divider-box-horz">
                    <article class="has-text-end">
                        <h2>First Panel</h2>
                        <p>Lorem ipsum dolor ...</p>
                    </article>

                    <div class="divider-vert" data-content="Vertical Divider"></div>

                    <article>
                        <h2>Second Panel</h2>
                        <p>Lorem ipsum dolor ...</p>
                    </article>
                </div>