Extract UI Items

Yellow Arrow

User Interface Discussion

The yellow arrow adds contrast to the page, as well as goes over the outline for the textbox.

It seems like they used a ::after and attached the arrow image to the element through css using the "background" property.

Programmer Textbox

User Interface Discussion

The textbook looks like its from a progamming / text editing application compared to standard text.

The UI item was created by implementing a unique font and background and having the element float off to the right.

Progammer Text

User Interface Discussion

Adds emphasis to the article as well as breaks up the text.

They used a unique class on the text to be able to apply a different font, as well as a darkened background / box shadow to the text.

Vertical Line

User Interface Discussion

Provides an interesting way to implement a quote into the article.

It seems that they simply used the "blockquote" element directly in HTML to be able to make the text appear next to the line, then gave that line a little bit of margin.