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.

 

Default Horizontal Rule

The default horizontal rule, that is to say the rule applied from the “insert ” drop down menu is a grey single line at a shade to 400 which spans 80% of the available space. From a Vertical Rhythm perspective, it occupies the space of one line as illustrated below.

 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Default Single Line

Snippet

 

<hr />

 

Full Width Horizontal Rule

The full width single line rule mimics the default is the same as the standard rule but spans 100% of the available space.

 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Full Width Single Line

Snippet

 

<hr style=”width:100%” />

 

Gradient Horizontal Rule

The gradient single line rule mimics the default rule with the line feathered on the left and right.

 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Gradient Line

Snippet

 

<hr class=”gradient” />

 

Color Horizontal Rule

The color single line rule mimics the default rule with the line presented in a different color. The color is defined using the Tailwind class “border-pink-light”.

 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Color Line

Template

 

<hr class=”border-pink-light” />

 

Double Horizontal Rule

The double line rule mimics the default rule with a double line.

 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Double Line

Snippet

 

<hr class=”double” />

 

Color Double Line

The double color line rule mimics the double line rule with the lines presented in a different color. The colors defined in the template demonstrate the use of custom colors.

 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Double Color Line

Template

 

<hr class=”double” style=”border-top-color:#E91E63; border-bottom-color:#E91E63;” />

 

Horizontal Rule

Installation

  1. Highlight the desired snippet/template code
  2. Copy to clipboard
  3. Place cursor at the beginning of the line where the rule is needed
  4. Click the editor “Insert ” menu dropdown
  5. Select “ Media”
  6. Select the “Embed” tab
  7. Paste clipboard content into the text box
  8. To replace the color (border-pink-light), choose a new palette code

    ex: Blue @ shade of 800 =  border-blue-darker

  9. Click the “OK” button

 

Leave a Reply

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