Layouts · Content display
Feed
Also called: News feed, Activity feed, Social feed, Content stream
Full pieces of content stacked one after another. Each has the author, text, images and interactions like likes and comments, and users read right in the feed while scrolling down to load more.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstShow the posts as a feed: one column, max width 600px, centered. Each post has the avatar, username and relative time (like "3 min ago") at the top, then the text (collapsed if it's longer than 6 lines) and a photo grid of up to 9 images, and like, comment and share buttons with counts at the bottom. Leave 8px between posts. Automatically load more when the user scrolls to the bottom, and when there's new content, show "N new posts" at the top.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Feed is what you need.
Use Feed when
- Each item is complete content that can be read directly, and items vary in length and format
- Content keeps updating, sorted by time or by recommendation, and users mainly scroll through it
- Users need to like, comment and interact without leaving the list
Pick something else when
Items are just entry points, each with only a title and one or two bits of info
Use insteadList ViewUsers need to filter, sort and compare records column by column
Use insteadData TableThe content is mostly images and users want to see many at once
You need to highlight the stages and time points of one thing in order
Use insteadTimeline
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Long posts aren't collapsed, so a single post takes up several screens
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
The like button waits for the API response before changing color, so it feels laggy
- 03
Admin data that needs filtering and bulk handling shown as a feed
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
Content blocks stacked in a single column. Each block has three parts, an author row, the text and images, and a row of interaction buttons, with spacing between blocks.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A feed is the layout you see on the home page of X (Twitter), Facebook or LinkedIn. Content is laid out from top to bottom, one after another, and each item is a complete "post": the avatar, username and post time at the top, the text and images in the middle, and like, comment and share buttons at the bottom. Users don't need to click in; they can read the whole post and interact with it right in the feed.
Items vary in length. Some are a single sentence, others have a photo grid or a video, so item heights all differ. The data is usually sorted by time or by a recommendation algorithm and keeps loading with infinite scroll, and the top may show a hint like "5 new posts".
The difference from a List View is that each item is the full content, not just an entry point. The difference from a Masonry Layout is that there's only one column, it's read in order, and text plays a bigger role. The difference from a Timeline is that a feed focuses on each piece of content itself, with time as secondary info, while a timeline focuses on the stages of one thing in order.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-feed- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026