Tag Detail — topic identity and description page header

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

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:

Show Tag fields

string

required

Human-readable display name of the tag — for example "Writing". Rendered as the page heading.

string

required

Prose description of the topic. Rendered as an introductory paragraph beneath the tag name.

"primary" | "accent" | "muted"

Optional color accent used to style the tag chip and heading decoration. When omitted, the theme default applies.

string

Optional label for the back-navigation link rendered above the tag heading — for example "All topics". When omitted, no back link is rendered.

Settings fields

"none" | "sm" | "md" | "lg" | "xl"

Vertical padding applied above the section. Use "xl" to clear the navigation bar on the first section of the page.

"none" | "sm" | "md" | "lg" | "xl"

Vertical padding applied below the section.

JSON example

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

{
  "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 section. Together they form the standard two-section layout for a topic archive page.

Section Components

APIs & Routes

Tag Detail — topic identity and description page header

Data fields

Settings fields

JSON example

Typical page usage

​Data fields

​Settings fields

​JSON example

​Typical page usage

Data fields

Settings fields

JSON example

Typical page usage