Item Listing and Details

Introduction

A listing page helps users browse, compare, filter, and choose from many items. A detail page helps users evaluate one item and decide what to do next.

These two page types usually work as a pair. The listing page helps users find an item, and the detail page gives them enough information to act.

Listing Page vs Detail Page

User Goals

Before designing the layout, decide what users need to accomplish. The page structure should support those goals directly.

• Find a specific item quickly.
• Compare several options.
• Narrow choices with filter controls.
• Change order with sort controls.
• Understand one item deeply on a detail page.
• Take a clear next action.

Listing Page Anatomy

• Clear page title and short description.
• Result count, such as 24 projects or 8 articles.
• filter controls for narrowing the set.
• sort controls for changing item order.
• Item cards, rows, or table entries.
• pagination, load more, or infinite scroll when there are many items.
• Empty state when no items match.
• Selected filter summary and reset action.

Detail Page Anatomy

• Title or item name.
• Media, gallery, or featured image.
• Short summary or value proposition.
• Key details, specs, tags, metadata, or attributes.
• Primary call to action.
• Supporting content such as description, process, reviews, or requirements.
• Related items, next item, or back link.
• Breadcrumbs when the site hierarchy is deep.

Choosing a Listing Layout

Semantic Item Card Markup

Use a list for a group of related items. Each item can contain an article with a clear heading, image, summary, and link.

<ul class="item-grid">
  <li>
    <article class="item-card">
      <img
        src="portfolio-dashboard.webp"
        width="640"
        height="420"
        alt="Dashboard project with charts and activity cards"
      >
      <h2>
        <a href="portfolio-dashboard.html">Portfolio Dashboard</a>
      </h2>
      <p>A responsive dashboard interface for tracking project progress.</p>
      <p class="item-meta">UI Design � Responsive Layout</p>
    </article>
  </li>
</ul>

Grid Layout CSS

A responsive grid works well for visual browsing. Use gap for spacing and stable image dimensions to avoid layout shift.

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.item-card img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
}

List Layout Markup

A list layout is better when the summary, metadata, or comparison details matter more than the image grid.

<ul class="item-list">
  <li>
    <article class="item-row">
      <img
        src="course-card.webp"
        width="240"
        height="160"
        alt="Course landing page with pricing cards"
      >
      <div>
        <h2><a href="course-landing-page.html">Course Landing Page</a></h2>
        <p>Landing page design with pricing, testimonials, and enrollment CTA.</p>
        <p class="item-meta">Landing Page � HTML � CSS</p>
      </div>
    </article>
  </li>
</ul>

List Layout CSS

.item-list {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.item-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1rem;
  align-items: start;
}

.item-row img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

Filter and Sort Controls

Filters and sorting controls should use real form controls with labels. This keeps the interface understandable and keyboard accessible.

<form class="listing-controls" aria-label="Project filters">
  <label for="category">Category</label>
  <select id="category" name="category">
    <option value="">All categories</option>
    <option value="web">Web design</option>
    <option value="app">App design</option>
  </select>

  <fieldset>
    <legend>Features</legend>
    <label><input type="checkbox" name="feature" value="responsive"> Responsive</label>
    <label><input type="checkbox" name="feature" value="animation"> Animation</label>
  </fieldset>

  <label for="sort">Sort by</label>
  <select id="sort" name="sort">
    <option value="newest">Newest</option>
    <option value="name">Name</option>
  </select>
</form>

Pagination

Use nav with aria-label for pagination. Mark the current page with aria-current="page".

<nav class="pagination" aria-label="Pagination">
  <a href="?page=1">Previous</a>
  <a href="?page=1">1</a>
  <a href="?page=2" aria-current="page">2</a>
  <a href="?page=3">3</a>
  <a href="?page=3">Next</a>
</nav>

Empty State

An empty state explains what happened and gives users a way to recover. This is especially important when filters return no results.

<section class="empty-state" aria-live="polite">
  <h2>No projects match these filters</h2>
  <p>Try removing a filter or viewing all projects.</p>
  <a href="/work/">Reset filters</a>
</section>

Detail Page Structure

A detail page should answer the user's biggest questions first, then provide supporting information and a clear next step.

<article class="project-detail">
  <a href="/work/">Back to all projects</a>
  <h1>Portfolio Dashboard</h1>
  <p>A responsive dashboard interface for tracking project progress.</p>

  <img
    src="portfolio-dashboard-large.webp"
    width="1200"
    height="800"
    alt="Portfolio dashboard interface with charts and project cards"
  >

  <dl>
    <div>
      <dt>Role</dt>
      <dd>UX design and front-end development</dd>
    </div>
    <div>
      <dt>Tools</dt>
      <dd>HTML, CSS, JavaScript</dd>
    </div>
  </dl>

  <a href="/contact/">Start a project</a>
</article>

Accessibility Guidance

• Make card links clear. The link text should identify the item, not just say View more.
• Avoid putting buttons, selects, or other interactive controls inside one giant card link.
• Use labels for every filter and sort control.
• Use aria-current="page" for the current pagination link.
• Use meaningful alt text for informative images and empty alt="" for decorative images.
• Preserve logical heading order, such as h1 for the page title and h2 for item titles.

Advanced Layout Note

Masonry layouts can look interesting, but they can also create confusing reading order and uneven keyboard flow. Treat Masonry or Isotope-style layouts as advanced patterns and test them carefully.

Common Mistakes