2

I was wondering if anyone could tell me the name of this design element - I've seen it used for quotes, such as in Yahoo News Digest, but also in other places. It came up on github, and I'm not sure what it means there, but I know I've seen it used to differentiate importance on elements in a list before. They could be different elements too, but it seemed to me they were both being used to adjust margin to call attention to content.

design element that I dont know what to call

Improve this question
2
  • 4
    It's a vertical line... Pull quotes don't usually need a background of some kind, this is just an extra attention grabber.
    – Jongware
    Apr 1, 2015 at 22:43
  • Yeah, I don't think it has any actual name. Though I admit it's often commonly used to highlight text, especially blockquotes, in web articles or e-mails. Maybe something like an "indentation bar"?
    – gburning
    Apr 2, 2015 at 11:15

3 Answers 3

Reset to default
5

Its called a "rule." In this particular case a "vertical rule."

A "ruler" may be a tool, but a ruler is also someone who draws lines.

When people find out you are an artist, they always say they can't even draw a straight line. That's what rulers are for.

Google: ruling pens

Improve this answer
2
  • :) good point (and i have an old french-british set of ruling pens i am well fond of. For some jobs there is no way around :)
    – benteh
    Apr 2, 2015 at 21:56
  • This is the most technically correct answer (although the other answers bear looking at as well). Rule lines, both vertical or horizontal, are used to break up sections of content or to provide visual emphasis.
    – bemdesign
    Apr 3, 2015 at 3:15
0

It depends in where those vertical lines are located.

If it is for the quotes, so it will be "Left blockquote border", but if it is in a list for handling something, it will be "Reorder control" and it could be just lines or any symbol.

Improve this answer
0

Graphic Terminology: Left Side: Border | Right Side: Blockquote

Your two particular examples look to be handled by CSS and markup through browsers:

Left Side:

.somestyle{ border-left: 1px solid #000000;}

You can also wrap containers/elements/objects entirely:

.somestyle { border:1px solid #000000; }

.somestyle2 { 
 border-top: 1px solid #000000;  
 border-bottom: 1px solid #000000; 
 border-right: 1px solid #000000;
}

Right Side:

Typically considered a blockquote. Through browsers the styles of these vary. In simple form it is only an indent. Your image appears as if the style has a little more css applied.

.someblockquotestyle {   
 padding: 10px 20px; 
 margin: 0 0 20px; 
 font-size: 17.5px; 
 border-left: 5px solid #000000; 
}
Improve this answer
1
  • Well you can use a CSS border to construct it, doesn't necessarily means it's the name of this design element.
    – Luciano
    May 18, 2017 at 10:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.