EverWeb Widgets HTML5

Content Break Widget

Theme or Content Break


HTML5 Theme/Content Break

The <hr> in HTML4 was used to create a horizontal rule to divide content sections in a page.
Now that the section element has been introduced, the <hr> element in HTML5 defines a thematic or content break which is a lot more meaningful.
The widget creates an <hr> with a difference. The line can be single, double or triple, and the top/bottom colors can be different from the center one to create a "gutter" effect.
An example of a single line is shown above with the widget settings to the right.
With the top and bottom line heights set to zero the line is created at the "Middle" height and the color is the one set for "Center".

Widget Settings

Content Break Widget
Single Line Break
Double Line Break
Double Line Break

Double Line Break

The double line shown above is created by giving height to the "Top" and "Middle" although "Middle" and "Bottom" could also be used.
Note that it is easier to adjust the position of the widget on the page if the actual widget box is given a little more height than necessary. Thin lines can be difficult to select and it is easier to drag across them than to point and click.


Triple Line Break

The triple line shown above use all three heights as shown in the screenshot to the right.
This can also be used to create a diving line with a gutter effect on one or both sides by choosing appropriate colors.
It can also create a double line effect as shown below.

Triple Line Break
Triple Line Break

Vertical Separation

Although content can be separated vertically using the Vertical Line widget, it is not the best way to do it.
If related content is being separated the auto column or column wrap widgets are a better solution.
To separate different content types, the appropriate HTML5 element should be used for each using the box shadow function to provide visual separation if required.
Sidebar content should be enclosed in one of the Aside element widgets. There are three of these in the Layout section for text, text wrap image and an aside with heading, full width image, caption and descriptive text.

Get The Widget