Emblem Rule Tutorial

There are times when implementing the horizontal rule does not produce the desired look. The Xidipity emblem rule solves this problem by embellishing the horizontal rule with icons and/or titles. The design permits changes to the line width, style, and color and titles and icons may be centered, left or right justified.

The emblem rule is an Xidipity enhancement of the horizontal rule which permits the addition of icons and/or text. This post is not an exhaustive list of the options available but should certainly open the door to the possibilities. I should also note a standard and wide emblem rule is included in the horizontal rule toolbar button. This rule is a single line and includes a centered unicode section symbol “§”.

 

References

 

Double line

Tags: emblem-rule / double line / full width / large icon center

Display

 


 

Display Source

<p>&nbsp;</p>
<!-- Template: emblem rule / double line / full width / large icon center -->
<div style="width: 100%;">
<hr class="double" style="background-color: #eceff1; z-index: 0; width: 100%;" />
<div style="width: 46px; background-color: #fff; margin: -32px auto 0 auto; z-index: 1; text-align: center; font-size: 150%"><i class="fas fa-bus-alt" style="color: #212121;">​</i></div>
</div>
<!-- End Template -->
<p>&nbsp;</p>

 

Template

GitHub Gist

emblem-rule / double line / full width / large icon center

 

Gradient line

Tags: emblem rule / gradient line / standard width / large icon center

Display

 


 

Display Source

<p>&nbsp;</p>
<!-- Template: emblem rule / gradient line / standard width / large icon center -->
<div style="width: 100%;">
<hr class="gradient" style="z-index: 0;" />
<div style="width: 46px; background-color: #fff; margin: -29px auto 0 auto; z-index: 1; text-align: center; font-size: 150%"><i class="fab fa-app-store-ios" style="color: #1976d2;">​</i></div>
</div>
<!-- End Template -->
<p>&nbsp;</p>

 

Template

GitHub Gist

emblem rule / gradient line / standard width / large icon center

 

Icon & text centered

Tags: emblem rule / single line / full width / icon & text / center

Display

 


Weather Events

 

Display Source

<p>&nbsp;</p>
<!-- Template: emblem rule / single line / full width / icon & text / center -->
<div style="width: 100%;">
<hr style="z-index: 0; width:100%;" />
<div style="width: 200px; background-color: #fff; margin: -25px auto 0 auto; z-index: 1; text-align: center; color: #1976d2;"><span style="font-weight: 400;">Weather</span> <i class="fas fa-sun" style="color: #ff9800;">​</i> <span style="font-weight: 400;">Events</span></div>
</div>
<!-- End Template -->
<p>&nbsp;</p>

 

Template

GitHub Gist

emblem rule / single line / full width / icon & text / center

 

Icon & text left

Tags: emblem rule / single line / full width / icon & text / left

Display

 


Weather Events

 

Display Source

<p>&nbsp;</p>
<!-- Template: emblem rule / single line / full width / icon & text / left -->
<div style="width: 100%;">
<hr style="z-index: 0; width:100%;" />
<div style="width: 200px; background-color: #fff; margin: -25px auto 0 0; z-index: 1; text-align: left; color: #1976d2;"><span style="font-weight: 400;">Weather</span> <i class="fas fa-sun" style="color: #ff9800;">​</i> <span style="font-weight: 400;">Events</span></div>
</div>
<!-- End Template -->
<p>&nbsp;</p>

 

Template

GitHub Gist

emblem rule / single line / full width / icon & text / left

 

Icon & text right

Tags: emblem rule / single line / full width / icon & text / right

Display

 


Weather Events

 

Display Source

<p>&nbsp;</p>
<!-- Template: emblem rule / single line / full width / icon & text / right -->
<div style="width: 100%;">
<hr style="z-index: 0; width:100%;" />
<div style="width: 200px; background-color: #fff; margin: -25px 0 0 auto; z-index: 1; text-align: right; color: #1976d2;"><span style="font-weight: 400;">Weather</span> <i class="fas fa-sun" style="color: #ff9800;">​</i> <span style="font-weight: 400;">Events</span></div>
</div>
<!-- End Template -->
<p>&nbsp;</p>

 

Template

GitHub Gist

emblem rule / single line / full width / icon & text / right

 

Narrow width

Tags:emblem rule / single line / narrow width / icon center

Display

 


 

Display Source

<p>&nbsp;</p>
<!-- Template: emblem rule / single line / narrow width / icon center -->
<div style="width: 100%;">
<hr style="z-index: 0; width: 25%;" />
<div style="width: 40px; background-color: #fff; margin: -25px auto 0 auto; z-index: 1; text-align: center;"><i class="fas fa-cogs" style="color: #ffb300;">​</i></div>
</div>
<!-- End Template -->
<p>&nbsp;</p>

 

Template

GitHub Gist

emblem rule / single line / narrow width / icon center

 

Standard width

Tags: emblem rule / single line / standard width / icon center

Display

 


 

Display Source

<p>&nbsp;</p>
<!-- Template: emblem rule / single line / standard width / icon center -->
<div style="width: 100%;">
<hr style="z-index: 0;" />
<div style="width: 40px; background-color: #fff; margin: -25px auto 0 auto; z-index: 1; text-align: center;"><i class="fas fa-ribbon" style="color: #ad1457;">​</i></div>
</div>
<!-- End Template -->
<p>&nbsp;</p>

 

Template

GitHub Gist

emblem rule / single line / standard width / icon center

 

Design Notes

In order for these templates to work they must be configured. Typically this means the colors must be defined by replacing the “#HEX-CODE” marker with the color of your choice from the color palette and the font awesome icon class marker “FA-ICON-CLASS” with the font awesome class code of the selected icon from the library.

 

Customizations

The icon in text and icon rules is optional and may be deleted by removing the following statement.

 

<i class=FA-ICON-CLASS style=color: #HEX-CODE;>&#x200B;</i>“.

 

Want to change the color of the horizontal line? No problem, add the following to the style tag.

 

“border-color: #HEX-CODE;”

 

The hex-code is the desired color (ie. blue (700) = #0288d1;).  This solution does not apply to the gradient rule.

 

Installation

An optional interim installation step is to configure your emblem rule in the sandbox editor and then copy and paste the completed product to the embed tool. Although this is optional, I will write the instructions assuming the sandbox editor is used.

  1. Highlight & copy the template to the clipboard
  2. Paste clipboard into the sandbox editor
  3. On line 5, replace “#HEX-CODE” with your color code
  4. On line 5, replace “FA-ICON-CLASS” with the font awesome class
  5. On line 5, replace “TEXT” with your content (text & icon rule)
  6. Click on the line where rule will be placed
  7. Click the ( save_alt ) embed button
  8. Paste clipboard into textbox
  9. Click the “OK” button

 

 

Puzzled by the design? Although there are many ways to style the horizontal rule, the above permits a high level of customization, is responsive, and displays well on all media formats including print.

 

 

Leave a Reply

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