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.
|
|
This will render as follows in both light and dark background:
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.
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.
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.
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.
Customize Symbol
Starting from version v1.12.0
, symbol is no longer included to keep the Sass
simple enough to support AMP.