> ## Documentation Index
> Fetch the complete documentation index at: https://docs.olonjs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tag Detail — topic identity and description page header

> The Tag Detail section renders a tag's name and description. Use it first on individual tag pages to give readers context before the post list.

The `tag-detail` section renders the identity block for a single tag: its display name and prose description. Use it as the opening section on your `tags/[slug]` dynamic route pages to give readers context about the topic before listing the posts assigned to it.

The `item` field holds a `$ref` pointer to `collection:current`, which OlonJS resolves at render time to the tag matching the current URL slug.

## Data fields

<ParamField body="item" type="Tag" required>
  A collection reference that resolves to the current route's `Tag` object. In your page JSON, set this to `{ "$ref": "collection:current" }`. OlonJS replaces the pointer at render time with the matching tag entry.

  After resolution, `item` carries all tag content fields:

  <Expandable title="Tag fields">
    <ParamField body="name" type="string" required>
      Human-readable display name of the tag — for example `"Writing"`. Rendered as the page heading.
    </ParamField>

    <ParamField body="description" type="string" required>
      Prose description of the topic. Rendered as an introductory paragraph beneath the tag name.
    </ParamField>

    <ParamField body="accent" type="&#x22;primary&#x22; | &#x22;accent&#x22; | &#x22;muted&#x22;">
      Optional color accent used to style the tag chip and heading decoration. When omitted, the theme default applies.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="backLabel" type="string">
  Optional label for the back-navigation link rendered above the tag heading — for example `"All topics"`. When omitted, no back link is rendered.
</ParamField>

## Settings fields

<ParamField body="paddingTop" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied above the section. Use `"xl"` to clear the navigation bar on the first section of the page.
</ParamField>

<ParamField body="paddingBottom" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied below the section.
</ParamField>

## JSON example

The following example is taken from `tags/[slug].json`:

```json theme={null}
{
  "id": "tag-detail-head",
  "type": "tag-detail",
  "data": {
    "backLabel": "All topics",
    "item": { "$ref": "collection:current" }
  },
  "settings": {
    "paddingTop": "xl"
  }
}
```

At render time, OlonJS resolves `collection:current` to the tag whose `id` matches the URL slug — for example, visiting `/tags/writing` causes `item` to be replaced with the full tag object for that entry.

## Typical page usage

Place `tag-detail` as the first section on your `tags/[slug]` page, followed immediately by the [Tag Posts](/reference/sections/tag-posts) section. Together they form the standard two-section layout for a topic archive page.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.