Data-driven components

Compose badges, card collections, data tables and application shells from Hugo data.

The theme exposes stable partials for project layouts that render structured data. Pass dictionaries to the partials instead of copying internal markup.

Badge#

badge.html accepts label, optional variant = "accent", and optional href. The content shortcode delegates to the same partial.

go-html-template

{{ partial "badge.html" (dict "label" "Ready" "variant" "accent") }}

Card list#

card-list.html accepts items. Each item may contain eyebrow, title, description, status = { label, variant }, and href. Callers may preserve their own group headings and reverse their data before passing each group.

go-html-template

{{ partial "card-list.html" (dict "items" site.Data.roadmap.phases) }}

Data table#

data-table.html accepts rows, columns = [{ key, label }], and an accessible label. It uses the same responsive wrapper as Markdown tables.

go-html-template

{{ partial "data-table.html" (dict
  "label" "Releases"
  "rows" site.Data.releases
  "columns" (slice
    (dict "key" "version" "label" "Version")
    (dict "key" "date" "label" "Released"))) }}

Application shell#

app-shell.html promotes the reference dashboard shell to a public partial. It accepts page, brand, navLabel, navGroups, optional footer, and rendered content. Navigation groups contain label and items; each item accepts label, url, optional icon, and optional active.

go-html-template

{{ partial "app-shell.html" (dict
  "page" .
  "brand" "Operations"
  "navGroups" site.Data.dashboard.navigation
  "footer" "<strong>Production</strong>"
  "content" .Content) }}

Changelog badges#

Changelog pages accept a front-matter badges array. Both list and single layouts render it through the public badge partial.

toml

[[badges]]
label = "stable"
variant = "accent"