Divider Component

Although Bissetii automatically sections the contents using the headers, web HTML does provide a horizontal “Divider” line (<hr/>) commonly used for internal ad-hoc sectioning. Bissetii also support said “Divider” line seemlessly.

This component is available starting from v1.11.0.

Sass Styling Parts

The Sass script responsible for styling divider is located in:

assets/css/bissetii/modules/core/_Divider.scss

The symbol is always set with a rounded/elliptic white background for consistency when divider is used between light and dark environments.

The font colors are consistent with the typography colors.

Javascript Parts

This component does not depend on any Javascript.

HTML Parts

The standard HTML for divider is always the <hr/> horizontal line. The priority is more of the line being applied in both white and dark backgrounds.

Basic Divider

The basic divider is the normal <hr/> line. Here is an example separating 2 long paragraphs.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>

<hr/>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>

This will render as follows in both light and dark background:

Customize Symbol

Starting from version v1.12.0, symbol is no longer included to keep the Sass simple enough to support AMP.