Emblem Rule

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.

 

The goal of this post is to demonstrate the flexibility of this element by walking through a couple of use cases.  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. 

 

A complete selection of font awesome icons may be viewed “here” and the Zidipity color palette may be viewed “here”.

 

Use Case

Standard Rule – Icon Center

 


 

 

Design Notes

 

<div class=”hr-emblem w-4/5 mx-auto”> <hr class=”center-emblem-item” /> <div class=”center-emblem-item icon-red-dark fa-heartbeat px-3″></div> <hr class=”center-emblem-item” /> </div>

 

This is a single line rule presented in a grey hue shaded to 400 which spans 80% of the available space which includes a centered icon. The font awesome icon “fa-heartbeat” is centered and displayed in a red hue shaded to 700. Padding to the left and right of the icon is set to 12 pixels using the Tailwind class “px-3”.

 

Single Line – Quarter Width Small Icon Center

 


 

 

Design Notes

 

<div class=”hr-emblem w-1/4 mx-auto”> <hr class=”center-emblem-item” /> <div class=”center-emblem-item icon-sm icon-red-dark fa-heartbeat px-3″></div> <hr class=”center-emblem-item” /> </div>

 

This rule mimics the “Standard Rule – Icon Center” with the icon reduced to 14 pixels using the Tailwind class “icon-sm” and the width reduced to one quarter of the available width using the Tailwind class “w-1/4”. Although not illustrated, other available icon sizes through Tailwind include extra small, large, extra large, 2× large, and 3× large.

 

Double Line Rule – Icon Centered

 


 

 

Design Notes

 

<div class=”hr-emblem”> <hr class=”center-emblem-item double” /> <div class=”center-emblem-item icon-red-dark fa-heartbeat px-3″></div> <hr class=”center-emblem-item double” /> </div>

 

This is a full width double line rule full width rule with the icon centered.

 

Color Single Line – Icon Centered

 


 

 

Design Notes

 

<div class=”hr-emblem”> <hr class=”center-emblem-item border-pink-lightest” /> <div class=”center-emblem-item icon-red-dark fa-heartbeat px-3″></div> <hr class=”center-emblem-item border-pink-lightest” /> </div>

 

This is a full width single line rule with a line colored by the Tailwind “border-pink-lightest” class and the icon centered.

 

Color Double Line – Icon Centered

 


 

 

Design Notes

 

<div class=”hr-emblem”> <hr class=”center-emblem-item double” style=”border-top-color: #F06292; border-bottom-color: #F06292;” /> <div class=”center-emblem-item icon-red-dark fa-heartbeat px-3″></div> <hr class=”center-emblem-item double” style=”border-top-color: #F06292; border-bottom-color: #F06292;” /> </div>

 

This is a full width double line rule with the lines colored by a custom color “#F06292” and centered icon. Although not illustrated, the double line can be displayed with different color lines.

 

Single Line – Icon & Color Title Center

 


Your Health

 

Design Notes

 

<div class=”hr-emblem”> <hr class=”center-emblem-item” /> <div class=”center-emblem-item icon-red-dark fa-heartbeat px-3″><span class=”text-blue-dark pl-2″>Your Health</span></div> <hr class=”center-emblem-item” /> </div>

 

This rule mimics the “Standard Rule – Icon Center” with the icon and title centered. Padding to the left of the icon and to the right of the title is set to 12 pixels using the Tailwind class “px-3”. The Tailwind “pl-2” pads the text with 8 pixels to the left and the Tailwind class “text-blue-dark” sets the text color to blue. 

 

Single Line – Title Center

 


Your Health

 

Design Notes

 

<div class=”hr-emblem”> <hr class=”center-emblem-item” /> <div class=”center-emblem-item”><span class=”font-light px-3″ style=”color: #000000;”>Your Health</span></div> <hr class=”center-emblem-item” /> </div>

 

This rule mimics the “Standard Rule – Icon Center” with the title centered. Padding to the left and right of the title is set to 12 pixels using the Tailwind class “px-3” and weight of the font is set to a weight of 300 using the Tailwind class “font-light”. The color of the title is set to black using the editor text color picker “A ”.

 

Single Line – Title Left

 

Your Health

 

Design Notes

 

<div class=”hr-emblem”> <div class=”left-emblem-item”><span class=”font-light uppercase tracking-wide pr-3″ style=”color: #000000;”>Your Health</span></div> <hr class=”left-emblem-item” /> </div>

 

This rule mimics the “Single Line – Title Center” design with the title placed left, text is presented in upper case by using the Tailwind class “uppercase”, and extra spacing added to the lettering by using the Tailwind class “tracking-wide”. Padding to the right of the title is set to 12 pixels using the Tailwind class “pr-3”.

 

Single Line – Title Right

 


Your Health

 

Design Notes

 

<div class=”hr-emblem”> <hr class=”right-emblem-item” /> <div class=”right-emblem-item”><span class=”font-light uppercase tracking-wide pl-3″ style=”color: #000000;”>Your Health</span></div> </div>

 

This rule mimics the “Single Line – Title Left” design with the title is placed right. Padding to the left of the title is set to 12 pixels using the Tailwind class “pl-3”.

 

Installation

  • Highlight the code of the desired use case
  • Copy to clipboard
  • Place cursor at the beginning of the line where the rule is needed
  • Click the editor “Insert ” menu dropdown
  • Select “ Media”
  • Select the “Embed” tab
  • Paste clipboard content into the text box

    Try Sandbox Editor

  • Make adjustments
  • Click the “OK” button

 

Leave a Reply

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