Clever quote design and arrow use | The Markup

The Markup have recently been doing a great job of analysing some of the big names in the tech world and highlighting some less-than-stellar behaviour or situations. However, what's really caught my eye is their article design; it's beautiful 😍 I wanted to grab a few screenshots of one of their most recent articles (though these styles are used across the site):

Design of quote, highlighted from main article text through larger text and shifted into a side column.
There's something that's always attractive about a good three-column article layout.
Pullquote/statistic highlighted by larger text and moving into a right hand column.
The subtle differences between quotes and cited data are subtle but excellent; think I prefer the use of the citation within the border here.
Correction design, a simple box with an elegant border.
Corrections are very simple but they also jump out at the reader, plus it's always nice to see them at all.
Design of image annotation, offset to the side of the image but with key words highlighted in red and a bold red arrow arcing towards the image.
I adore these little arrows. I've been wanting to try something similar myself for a while so have been digging around the source code a bit.
Photo of Adam Goldstein offset slightly overlapping the text and with a small arrow pointing the description to the image.
Again, the arrows are subtle but really attention-grabbing and just look so nice.

As an FYI it looks like the layout is largely being done via absolute positioning. Arrows are ::before and ::after elements. I still find it a real shame that CSS Grid has yet to catch up to these layouts, but there are some interesting specs on the horizon. 🤞

Explore Other Notes

⬅ Newer

CSS animations within SVG

A very neat little trick. Embedding @keyframes within your SVG <style> element makes it animate when it loads, whether rendered as an image or a background (or, I assume, inlined). It can even …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>The Markup have recently been doing a great job of analysing some of the big names in the tech world and highlighting some less-than-stellar behaviour or situations. However, what's really caught my …</p> </body> </html>
  • Murray Adcock.
Journal permalink