Horizontal rules rule

A few new dividers to use on Medium and elsewhere

Ah the humble <hr> 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 separators.

Lately though I’ve been noticing a few custom separators making inroads in various stories.

In HTML code you need to use the <hr> 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.

Here are a few I’ve seen floating around Medium. Right-click and save the image to use them yourself.

And feel free to reply with your own and I’ll add them here too.

The default Medium one:

Three grey dots. To use simple press ⌘ + Enter / Ctrl + Enter anywhere in your story. This one isn’t an image.

The New York Times one:

This simple green <hr> 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.

The Establishment one:

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.

A little green one:

Also from The Establishment. It’s a small and understated line and almost fluorescent green.

Three blue blips:

I came across these on this article from MEL Magazine. Three little rectangles slightly tilted. They also do a grey version.

The grey version:

Here it is again in grey. The rectangles are tilted the other way.

A bunch of underscores:

For those who want to just use plain text. I saw it first on this article.

____________________

Like a bolt of lightning:

From an article about Medium hacks comes this long blue horizontal rule with a little blue lighting bolt in the middle.

Just a symbol:

You can use any old symbol you want as a divider too.

A simple line:

Sometimes it’s best to keep it simple stupid.

Go full width:

Click to extend it out full width if you want like so.

Pretty in pink:

Rantt.com made a pretty pink one to match its branding. You can make one too, any colour you want.

An animated one:

Over at The Outline they have these nice animated horizontal rules. They use animated SVGs but I’ve made it into an animated GIF here for Medium. If anyone can get it to be a little less jumpy please let me know.

To infinity and beyond:

3x infinity from this Medium members only excerpt of a novel about Silicon Valley.

No sharp corners:

Here’s one from Arc which is a bar with rounded corners and a blue kinda shadow.

Pretty ribbons and bows:

The Establishment did another one. Like a green ribbon dancing across the page.

The comic sans equivalent:

Hand drawn is cool again.

…

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 my way!