Horizontal Rule

The horizontal rule has been a part of the web for over twenty years and from the very beginning web developers have been applying different styles to it. Xidipity continues this tradition with its support for six variation of this core design element.

Lines are possibly the most basic element of visual composition and they serve many purposes. They can divide content, they can direct the viewer’s eye, they can define spaces, and they can make a statement as to the feel or the interpretation of the design. Horizontal lines indicate stability in a calming way and they suggest balance, harmony, and in some cases finality or a sense of cadence (ending).

 

The horizontal rule has been a part of the web for over twenty years and from the very beginning web developers have been applying different styles to it. Xidipity supports the standard horizontal rule and the enhanced emblem rule which will be discussed separately.

 

Standard Horizontal Rule

Single (Default)

The default horizontal rule is a single grey rule which spans 80% of the available space. 

 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Single

 

Single Wide

The default horizontal rule is a single grey rule which spans 100% of the available space. 

 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Single Wide

 

Double

The double rule is a double grey rule which spans 80% of the available space. 

 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Double

 

 

Double Wide

The double rule is a double grey rule which spans 100% of the available space. 

 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Double Wide

 

Gradient

The gradient rule is a single line rule feathered on the left and right which spans 80% of the available space. 

 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Gradient

 

Gradient Wide

The gradient rule is a single line rule feathered on the left and right which spans 100% of the available space. 

 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Gradient Wide

 

Emblem

The gradient rule is a single line rule which spans 80% of the available space and includes a unicode symbol which represents an object, function, or process in the middle. 

 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


§

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Emblem

 

Emblem Wide

The gradient rule is a single line rule which spans 100% of the available space and includes a unicode symbol which represents an object, function, or process in the middle. 

 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


§

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Emblem Wide

 

new_releases The symbol of the emblem rule may be changed to any other unicode symbol and styled as desired (fyi – emoji’s are also unicode symbols).

 

 Installation

  1. Place cursor on the line where the rule will be placed
  2. Click the (▼) Horizontal Rule toolbar button
  3. Select desired rule

 

Leave a Reply

Your email address will not be published. Required fields are marked *