<p>Published on <a href="https://blog.prototypr.io/horizontal-rules-rule-94cef309072?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Joshua Byrd <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ck06jYJ7qBIiev5wxtt43w.jpeg"></p>
<h4>A few new dividers to use on Medium and elsewhere</h4>
<p>Ah the humble &lt;hr&gt; is a thing of beauty. Since the dawn of the World Wide Web the horizontal rule has helped us separate content. In fact Medium actually calls them <a href="https://help.medium.com/hc/en-us/articles/215677307-Separator">separators</a>.</p>
<p>Lately though I’ve been noticing a few custom separators making inroads in various stories.</p>
<p>In HTML code you need to use the &lt;hr&gt; tag and style it with CSS or just use the ugly default. On your Medium articles you can use images as horizontal rules by inserting them where you want them in your story.</p>
<p>Here are a few I’ve seen floating around Medium. Right-click and save the image to use them yourself.</p>
<p>And feel free to reply with your own and I’ll add them here too.</p>
<h4>The default Medium one:</h4>
<p>Three grey dots. To use simple press ⌘ + Enter / Ctrl + Enter anywhere in your story. This one isn’t an image.</p>
<h4>The New York Times one:</h4>
<p>This simple green &lt;hr&gt; seems to be getting quite popular across Medium. I saw it first on a New York Times article but I’m not 100% sure if that is its origin.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/700/1*McWlzYj-5UzIHihPYYkm3g.png"></p>
<h4>The Establishment one:</h4>
<p>Medium green as well. This separator is styled as though someone slashed through the screen with a knife into an alien. After you insert the image click and then click one of the other layout buttons to expand.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*takSiK6G_fcfTM-VpvQ6sA.png"></p>
<h4>A little green one:</h4>
<p>Also from The Establishment. It’s a small and understated line and almost fluorescent green.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/80/1*qxsdl-ti3Pe_JeSviJ_7OA.jpeg"></p>
<h4>Three blue blips:</h4>
<p>I came across these on <a href="https://melmagazine.com/8-men-on-what-it-was-like-when-their-partner-had-an-abortion-42d8d5ab7a2e">this article</a> from MEL Magazine. Three little rectangles slightly tilted. They also do a grey version.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/150/1*oUelXxT3vuxH_-pdR-L5fw.png"></p>
<h4>The grey version:</h4>
<p>Here it is again in grey. The rectangles are tilted the other way.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/150/1*TjqIgh0W3-mhTL1LVlqq-Q.png"></p>
<h4>A bunch of underscores:</h4>
<p>For those who want to just use plain text. I saw it first <a href="https://medium.com/@L.Pauker/that-ship-has-sailed-f4f581ffe540">on this article</a>.</p>
<p>____________________</p>
<h4>Like a bolt of lightning:</h4>
<p>From <a href="https://medium.com/sleighdogs-stories/5-medium-hacks-tips-tricks-b439d5ef65bb">an article about Medium hacks</a> comes this long blue horizontal rule with a little blue lighting bolt in the middle.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XTutWavX97CfthO16KR3ag.png"></p>
<h4>Just a symbol:</h4>
<p>You can use any old symbol you want as a divider too.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/200/1*sq7KnBwyAUHN2RImZbwjgA.png"></p>
<h4>A simple line:</h4>
<p>Sometimes it’s best to keep it simple stupid.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*IH10jlQEJ7GW1_oq8s7WPw.png"></p>
<h4>Go full width:</h4>
<p>Click to extend it out full width if you want like so.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Pui8Qco3znI5_2dVV94k-Q.png"></p>
<h4>Pretty in pink:</h4>
<p><a href="https://rantt.com/">Rantt.com</a> made a pretty pink one to match its branding. You can make one too, any colour you want.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/716/1*Uv3yLYcnsg1UilGdUcOErA.png"></p>
<p>…</p>
<p><em>Well, that’s it. Go ahead and hold down that applause button for a bit if you want. Also if anyone has any good animated gif horizontal rules please send them </em><a href="http://twitter.com/phocks"><em>my way</em></a><em>!</em></p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=94cef309072" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/horizontal-rules-rule-94cef309072">Horizontal rules rule</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Horizontal rules rule

A few new dividers to use on Medium and elsewhere

Top Stories