> ## Documentation Index > Fetch the complete documentation index at: https://docs.mzizi.dev/llms.txt > Use this file to discover all available pages before exploring further. # Resource detail pattern > Single-item pages — breadcrumb, header, content body, a sidebar that becomes a stack on mobile, and related items. For pages that show one item in depth — an event, an article, a location, a profile. It complements the [resource index](/patterns/resource-index). ## Anatomy 1. **Breadcrumb** — navigation context 2. **Header** — title, metadata, primary action 3. **Content body** 4. **Sidebar** — related information and actions, on desktop 5. **Related items** — at the bottom ## Layout ```tsx theme={null} Events Harare Jazz Festival
Music

Harare Jazz Festival

Annual jazz celebration featuring artists from across Southern Africa.

{/* content body */}
``` ## Header variants ### With status and actions ```tsx theme={null}

Event title

Created 3 days ago

``` ### With an image ```tsx theme={null}
{title}

{title}

``` `AspectRatio` reserves the space before the image loads, which is what stops the heading jumping down the page on a slow connection. ## Sidebar ```tsx theme={null} ``` ## On mobile The sidebar moves below the content. Put `
` first in the DOM so it is also first in the reading and tab order, not only visually. ```tsx theme={null}
{/* always first */}
``` For a critical sidebar action, repeat it as a sticky bottom bar: ```tsx theme={null}
``` If you do this, make sure the page has bottom padding to match — otherwise the bar covers the last of the content permanently. ## Related items ```tsx theme={null}

Related events

{relatedItems.map((item) => ( {item.title}

{item.description}

 ))}
``` ## Back navigation Always give a way back to the index. A breadcrumb is context; this is an action. ```tsx theme={null} ```