List Section Patterns for Web Design

A list section is a page region whose primary job is to present a set of comparable items so someone can scan, compare, and choose. It is not a hero and not a long essay. It is the inventory: services, clients, topics, events, news, people, properties, investments, press mentions, or past work. The collection shows how elastic that job is. Some lists are almost pure type: stacked words that double as navigation, or client names dropped into a sentence. Others become tables—schedules with times and venues, investment rows with stage tags, press clips with logos and dates. Grids add photographs when the item is a person, a building, or a story that needs a face. Topics can sit in circles as filters rather than as a vertical stack. What stays constant is comparison. If two items cannot be read against each other in a glance, the section is probably a gallery or a feature, not a list.

10 published examples

Nicelydone MCP sponsor preview
Nicelydone MCP
220k real SaaS screens, connected through MCP
Readymag sponsor preview
Readymag
Create websites with Readymag

Get weekly top sections delivered to your inbox, every monday. No spam, only inspiration.Unsubscribe anytime.

How to design a List section

I tend to ask one question in review: can you name an item without reading the whole row? If the title, date, or name is not the first thing the eye hits, the list is competing with itself. Ruled rows work when metadata is the point—round, year, outlet, time. They fail when every row also wants a paragraph; the line height blows up and the scan rhythm dies. Grids help when the item is visual, but equal-height cards punish uneven titles. Hiro’s news cards already show the problem: some headlines wrap four lines, others two, and the “Read more” footer becomes the only stable landmark. Stacked display type, like Ryden’s service index, is a list only if the labels stay few and the secondary language stays quiet. Past five or six items, monument type becomes a wall. Inline client rolls are honest about incompleteness—“to name a few”—but they hide count and order. They are the wrong tool when the roster is the product. A useful test: cover the images. If the remaining type still ranks the set, the structure is doing the work. If not, you designed a mood board.

List design questions

When should a list be a table instead of a card grid?

Use a table or ruled row when people compare the same fields across items—time, stage, year, outlet. Cards win when the item needs a picture or a variable-length story. If you find yourself repeating the same three labels on every card, you already wanted columns.

How many items belong above a “see all” link?

Enough to prove the set has range, not enough to stall the page. Social Impact Capital shows a handful of named investments plus a count. That works when the rest of the page still has a job. A full roster belongs on its own view once scrolling past the list starts to feel like work.

Do list items need the same amount of text?

Same fields, not the same word count. Shared slots—name, one line, one meta—keep the scan even. Optional blurbs should collapse or truncate so a short item does not look unfinished next to a long one. Uneven cards are fine if the title still sits on a common baseline.

Unlock premium section designs

Go Pro to get instant access to 10 premium section designs + exclusive features

Related section categories

Curating the internet’s finest.