Xidipity 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 a 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 unicode symbol which represents an object, function, or process in the middle. This symbol can be replaced with another unicode symbol and styled as desired (see Horizontal Rule Toolbar).

 

As illustrated by the templates, the emblem rule is an extension of the horizontal rule and is built using “Flexbox CSS” technology which means they will scale to all of the various display sizes. 

 

Reference Information

 

chat_bubble_outline My intent for using Font Awesome icons in some examples and Google Icons in others is to demonstrate either icon set works. If you are unfamiliar with font awesome, I suggest reviewing the font awesome tutorial. In addition, I will be using and referring to the sandbox editor when making changes to the templates.

 

Use Case

Standard Rule – MD Icon Center

 


card_membership

 

Template

<div class="hr-emblem w-4/5 mx-auto">
  <hr class="center-emblem-item" />
  <div class="center-emblem-item px-3"><span style="color:#YOUR-COLOR"><i class="material-icons">MD-ICON</i></span></div>
  <hr class="center-emblem-item" />
</div>

 

Design Notes

This is a single line rule presented in the standard grey hue which spans 80% of the available space. A material design icon is placed in the center. Tailwind handles the width (w-4/5), margins left and right (mx-auto) and the padding to the left and right of the icon (px-3).

 

 Installation

  1. Highlight and copy the template to the clipboard
  2. Click on the line where rule will be placed
  3. Click the  embed button
  4. Paste clipboard into textbox
  5. Replace #YOUR-COLOR with desired color hex code
    I used “#388e3c” in the example
  6. Replace MD-ICON with desired MD icon
    I used “card_membership” in the example
  7. Click the “OK” button

 

Use Case

Single Line – Quarter Width MD Icon Center

 


card_membership

 

Template

<div class="hr-emblem w-1/4 mx-auto">
  <hr class="center-emblem-item" />
  <div class="center-emblem-item px-3"><span style="color:#YOUR-COLOR"><i class="material-icons">MD-ICON</i></span></div>
  <hr class="center-emblem-item" />
</div>

 

Design Notes

Everything about this rule is the same as the above with the exception the width is set to 25% of the available space (w-1/4).  To see other possible width options click here.

 

Use Case

Fancy Color Gradient Rule – MD Icon Centered

 


forum

 

Template

<div class="hr-emblem w-4/5 mx-auto">
  <hr class="center-emblem-item" style="background-image: linear-gradient(to right, #LIGHT-COLOR 0%,#DARK-COLOR 100%); border: 0; height: 1px;" />
  <div class="center-emblem-item px-3"><span style="color: #ICON-COLOR;"><i class="material-icons">MD-ICON-NAME</i></span></div>
  <hr class="center-emblem-item" style="background-image: linear-gradient(to left, #LIGHT-COLOR 0%,#DARK-COLOR 100%); border: 0; height: 1px;" />
</div>

 

Design Notes

This design is a modified single line rule with a material design icon placed in the center.

 

 Installation

  1. Highlight & copy the template to the clipboard
  2. Open the sandbox editor in a new tab / window
  3. Paste clipboard into the sandbox
  4. On line 2, replace “#LIGHT-COLOR” with your light gradient color
    I used “#ffccbc” in the example
  5. On line 2, replace “#DARK-COLOR” with your dark gradient color
    I used “#bf360c” in the example
  6. On line 3, replace “#ICON-COLOR” with your dark gradient color
    I used “#311b92″ in the example
  7. On line 3, replace “MD-ICON-NAME” with your MD icon name
    I used “forum” in the example
  8. On line 4, replace repeat steps 4 & 5
  9. Highlight & copy updated template to the clipboard
  10. Click on the line where rule will be placed
  11. Click the  embed button
  12. Paste clipboard into textbox
  13. Click the “OK” button

 

Use Case

Double Line Rule – Full Width FA Icon Centered

 



 

Template

<div class="hr-emblem">
  <hr class="center-emblem-item double" style="background-color: #BG-COLOR; border-top-color: #BD-TOP; border-bottom-color: #BD-BOTTOM;" />
  <div class="center-emblem-item px-3"><span style="color: #ICON-COLOR; font-size: FONT-SIZE;">FA-ITAG</span></div>
  <hr class="center-emblem-item double" style="background-color: #BG-COLOR; border-top-color: #BD-TOP; border-bottom-color: #BD-BOTTOM;" />
</div>

 

Design Notes

This is a twist on the double line rule presented with a background color between the bars which spans 100% of the available space. A font awesome icon is placed in the center.

 

 Installation

  1. Highlight & copy the template to the clipboard
  2. Open the sandbox editor in a new tab / window
  3. Paste clipboard into the sandbox
  4. On line 2 & 4, replace “#BG-COLOR” with your background color
    I used “#b0bec5″ in the example
  5. On line 2 & 4, replace “#BD-TOP” with your border top color
    I used “#eceff1″ in the example
  6. On line 2 & 4, replace “#BD-BOTTOM” with your border bottom color
    I used “#eceff1 in the example
  7. On line 3, replace “#ICON-COLOR” with your icon color
    I used “#263238 in the example
  8. On line 3, replace “FONT-SIZE” with your font size
    I used “1.5em in the example
  9. On line 3, replace “FA-ITAG” with your FA iTag code
    I used “<i class=”fas fa-award”></i>” in the example
  10. On line 3, add “&#x200B;” between tags
    I used “<i class=”fas fa-award”>&#x200B;</i>” in the example
  11. Highlight & copy updated template to the clipboard
  12. Click on the line where rule will be placed
  13. Click the  embed button
  14. Paste clipboard into textbox
  15. Click the “OK” button

 

 

Use Case

Single Line – Color FA Icon & Title Center

 


Your Health

 

Template

<div class="hr-emblem">
  <hr class="center-emblem-item" />
  <div class="center-emblem-item px-3 TXT-SIZE"><span style="color: #ICON-COLOR;">FA-ITAG</span><span class="FONT-FAMILY pl-2" style="color: #TXT-COLOR;">Your Health</span></div>
  <hr class="center-emblem-item" />
</div>

 

Design Notes

This is a popular option which includes a font awesome icon and a title. All modifications are to line 3.

 

 Installation

  1. Highlight & copy the template to the clipboard
  2. Open the sandbox editor in a new tab / window
  3. Paste clipboard into the sandbox
  4. Replace “TXT-SIZE” with your Tailwind font size
    I used “text-lg in the example
  5. Replace “#ICON-COLOR” with your color
    I used “#c2185b” in the example
  6. Replace “FA-ITAG” with font awesome iTags
    I used “<i class=”fas fa-heartbeat”></i> in the example
  7. Add “&#x200B;” between iTags
    I used “<i class=”fas fa-heartbeat”>&#x200B;</i>” in the example
  8. Replace “FONT-FAMILY” with your Tailwind font family
    I used “font-serif in the example
  9. Replace “TXT-COLOR” with your font size
    I used “#e0451c in the example
  10. Highlight & copy updated template to the clipboard
  11. Click on the line where rule will be placed
  12. Click the  embed button
  13. Paste clipboard into textbox
  14. Click the “OK” button

 

Other Variations

Text Only Centered

 


Your Health

 

Template

<div class="hr-emblem">
  <hr class="center-emblem-item" />
  <div class="center-emblem-item px-3 TXT-SIZE"><span class="FONT-FAMILY pl-2" style="color: #TXT-COLOR;">Your Health</span></div>
  <hr class="center-emblem-item" />
</div>

 

Text Only Left

 

Your Health

 

Template

<div class="hr-emblem">
  <div class="left-emblem-item px-3 TXT-SIZE"><span class="FONT-FAMILY pl-2" style="color: #TXT-COLOR;">Your Health</span></div>
  <hr class="left-emblem-item" />
</div>

 

Text Only Right

 


Your Health

 

Template

<div class="hr-emblem">
<hr class="right-emblem-item" /> <div class="right-emblem-item px-3 TXT-SIZE"><span class="FONT-FAMILY pl-2" style="color: #TXT-COLOR;">Your Health</span></div> </div>

 

 

Leave a Reply

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