The media object is a layout pattern where a visual element (icon, image, screenshot) sits on one side and descriptive text sits on the other. Nicole Sullivan coined the term in 2010 while working on OOCSS, but the pattern has been around since print design. On landing pages, it's everywhere: feature grids, benefit sections, testimonial blocks, team bios, step-by-step processes.
It works because it mirrors how we naturally process information: the visual catches attention and provides context, then the text delivers the detail. The pairing is faster to scan than a pure text block and more informative than a pure visual. It's the reason a feature section with icons and descriptions outperforms a plain bullet list almost every time.
Getting media objects right
The most common mistake is using generic icons that add no information. A gear icon next to "Customizable settings" or a lightning bolt next to "Fast performance" — these visuals are meaningless decoration. Effective media objects use visuals that actually communicate something the text doesn't. A small product screenshot showing the feature in action is worth ten generic icons.
On landing pages, alternating media object orientation (image-left/text-right, then image-right/text-left) creates visual rhythm that keeps the page from feeling monotonous. This zigzag pattern is one of the most reliable ways to maintain engagement through a features section without any design tricks.