<?xml version="1.0" encoding="utf-8"?>

Use indented dividers for lists with images

Use indented dividers for lists with images Bad Practice
Use indented dividers for lists with images Best Practice

There are two types of popular dividers — full-bleed and indented. Full-bleed dividers extend across the entire width of the screen, creating a clear and strong line of separation. In contrast, indented dividers occupy only part of the screen's width, often aligning with the text or other content, providing a subtler division.

For lists that include images or icons, use indented dividers.[1] This is because images inherently have defined boundaries or edges that visually separate them from other elements. Adding a full-bleed divider in such cases can be redundant and may even clutter the design.

Improve your UX & Product skills with interactive courses that actually work