Skip to main content
The tags-list section renders a grid of topic cards sourced from your tags collection. Each card links to the corresponding tag page, where the inverse relation between tags and posts is resolved at render time. Use tags-list on the home page to give visitors a topic-first entry point, on the tags index page as the primary content, and on the posts archive page as a secondary navigation aid.

​
Data fields

​
string
An eyebrow label rendered above the section title — for example "Topics" or "Another way in". Optional.
​
string
required
The section heading — for example "Browse by topic" or "All topics".
​
string
A short supporting sentence below the title. Optional. Use it to explain the relationship between tags and posts — for example "Six tags, one collection. Each card links to a tag page that computes its own post list from the relation.".
​
CollectionRef
required
A reference to the tags collection file. Provide a $ref key pointing to the relative path of tags.json. OlonJS resolves the reference at build time and renders one card per tag entry.
The $ref path is relative to the page JSON file that contains the section. See the Collections guide for details.
Like posts-list, the items field uses the ui:collection-ref hint. In OlonJS Studio, it renders as a collection picker — you select the tags collection from a dropdown rather than typing the path manually.

​
Settings fields

​
"none" | "sm" | "md" | "lg" | "xl"
Vertical padding applied above the section.
​
"none" | "sm" | "md" | "lg" | "xl"
Vertical padding applied below the section.

​
JSON example

The following example is taken from home.json:
You can omit description when the title is already self-explanatory — the tags index page at tags.json uses only "All topics" as a title and no description.

​
Used on pages