Components
Editorial list items
Link readers to a story or local item using image, title, context and optional supporting copy.
On this page
Purpose and placement
Link readers to a story or local item using image, title, context and optional supporting copy.
Anatomy
| Part | Behavior |
|---|---|
| Media | Native aspect ratio for standard items; smaller image for compact items. |
| Copy | Eyebrow, heading, description, details and optional footer. |
| Link | Whole-item destination without nested interactive controls. |
Configuration and contract
| Input or decision | Implementation |
|---|---|
| Required | href, title, imageUrl or null, imageAlt, eyebrow. |
| Optional | description, details, footer and imageFallback. |
| Variants | standard / compact; headingLevel h2 / h3. |
States and feedback
- Standard and compact, each captured in both themes.
- Absent image uses the fallback treatment.
- Long titles wrap; secondary metadata remains subordinate.
Usage rules
- Use compact for supporting rails and dense discovery lists; standard for primary archives.
- Do not insert an extra button or bookmark inside the whole-item link.
- Provide specific image alt text or mark genuinely decorative imagery appropriately.
Accessibility and verification
The heading and link form one navigable item. Verify fallback images, focus outline and meaningful link text at narrow widths.
Composition example
<PublicContentListItem
href="/stories/story-slug" title={story.title}
imageUrl={story.heroImageUrl} imageAlt={story.heroImageAlt}
eyebrow={topic.name} description={story.excerpt}
headingLevel="h3" variant="compact"
/>Source references
| File | Responsibility |
|---|---|
| components/public-content-list-item.tsx | Audited Townwell implementation; use this file when extending this interface. |
| components/story-archive-list.tsx | Audited Townwell implementation; use this file when extending this interface. |
Examples from the app
Actual Boise Today and Townwell UI with synthetic editorial, business, review, media metadata and analytics. Existing Boise imagery; no live data changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision ce8bc72b96da · Documentation v0.1