Listings are essentially a group of related items, each item giving an overview of information, and usually including a call to action to encourage clicking through to. They offer an easier way for users to browse through collections that may otherwise be overwhelming to go through.

Blog archive

Along with other types of articles. Post listings would normally be part of an archive, on their own page, possibly with multiple pages for older posts. They would be ordered by date, with the latest posts at the top.

A listing of blog posts could have a post’s title, date, and a short description. And a link to go to the full blog post. It can also include a thumbnail image.

Filtered products

Depending on the type of product and the number that an online store may have, the details for a product listing could vary. But usually a thumbnail, the title, and a price are most commonly shown.

Products also tend to include menus of categories and other potential filters that are shown at the top or on a sidebar on the left. For example, t-shirts could include themes for categories, and filter by sizes available, or colors.

Upcoming events

An event listing would include the date, a title, and a link with info for how to attend the event. Events would also be ordered by date, but usually highlighting future events at the top, with the latest upcoming one first.

For an event that takes place over a longer period of time, there may be an agenda, and can be considered its own type of listing, with an overview for each time slot.

And more

There are many more kinds of listings that a page can have: team members for an about page, related products, product reviews, search results, property listings, a business directory, restaurant menus, etc.

For working examples of listings that you can refer to when designing your site, download our starter theme.

And check out our design essentials series for more examples and tips on using standard web elements.

Setup your own listings as visually editable components for your team to build out and edit pages with the Blocks Edit editor.