Emblem Rules

Table of Contents

 


 

Double line / icon / centered

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

Display

 


 

Display Source

<!-- Template: emblem rule / double line / full width / large icon center -->
<p>&nbsp;</p>
<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>
<p>&nbsp;</p>
<!-- End Template -->

 

Template

GitHub Gist

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

 

Gradient line / icon / center

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

Display

 


 

Display Source

<!-- Template: emblem rule / gradient line / standard width / large icon center -->
<p>&nbsp;</p>
<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>
<p>&nbsp;</p>
<!-- End Template -->

 

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

<!-- Template: emblem rule / single line / full width / icon & text / center -->
<p>&nbsp;</p>
<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>
<p>&nbsp;</p>
<!-- End Template -->

 

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

<!-- Template: emblem rule / single line / full width / icon & text / left -->
<p>&nbsp;</p>
<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>
<p>&nbsp;</p>
<!-- End Template -->

 

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

<!-- Template: emblem rule / single line / full width / icon & text / right -->
<p>&nbsp;</p>
<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>
<p>&nbsp;</p>
<!-- End Template -->

 

Template

GitHub Gist

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

 

Narrow width / icon / centered

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

Display

 


 

Display Source

<!-- Template: emblem rule / single line / narrow width / icon center -->
<p>&nbsp;</p>
<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>
<p>&nbsp;</p>
<!-- End Template -->

 

Template

GitHub Gist

emblem rule / single line / narrow width / icon center

 

Standard width / icon / centered

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

Display

 


 

Display Source

<!-- Template: emblem rule / single line / standard width / icon center -->
<p>&nbsp;</p>
<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>
<p>&nbsp;</p>
<!-- End Template -->

 

Template

GitHub Gist

emblem rule / single line / standard width / icon center