Published on | Prototyping: From UX to Front End — Medium Joshua Byrd

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.

…

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!

Horizontal rules rule was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Horizontal rules rule

Cool stuff, every week

More Articles