Corporate components

By @lucasdicioccio, 684 words, 6 code snippets, 5 links, 0images.

corporate.cmark-tramaj is a .cmark-tramaj library file (see tramaj sections for what that extension means and how cross-file imports resolve). It has no page of its own; every article imports from it as corporate/<name>, most visibly the corporate layout example, which composes its whole body from the six components documented below.

Each component is a single library.tramaj-lib template rooted at one element, called from a page’s own main-content.tramaj-doc section with import("corporate/<name>", {…}).rendered. A component takes exactly the fields listed under it — nothing more, since tramaj has no arithmetic: counts, index alignment and conditional styling all have to be either decided by the data author ahead of time (e.g. pricing-table’s rows[].values line up with plans positionally because the dataset says so, not because the template computes it) or reduced to the handful of comparisons branch and eq can express (hero’s style: "secondary" switch).

hero

Fields: title (string), subtitle (string), actions (array of {label, href, style}, where style: "secondary" renders as the outlined button and anything else — typically "primary" — as the filled one).

=base:dataset.json hero-data
{ "title": "Acme Cloud"
, "subtitle": "Track team spend in real time, without the spreadsheet gymnastics."
, "actions":
  [ {"label": "See pricing", "href": "#pricing", "style": "primary"}
  , {"label": "Talk to sales", "href": "#contact", "style": "secondary"}
  ]
}

=base:main-content.tramaj-doc
@d=$ctx.datasets.hero-data
import("corporate/hero", {"title": $d.title, "subtitle": $d.subtitle, "actions": $d.actions}).rendered

Acme Cloud

Track team spend in real time, without the spreadsheet gymnastics.

feature-grid

Fields: features (array of {title, body}), one feature-card per entry.

=base:dataset.json features-data
{ "features":
  [ {"title": "Live budgets", "body": "Every team sees its own bucket update as spend happens."}
  , {"title": "Delegated keys", "body": "Hand a scoped key to a sub-team or a robot."}
  ]
}

=base:main-content.tramaj-doc
@d=$ctx.datasets.features-data
import("corporate/feature-grid", {"features": $d.features}).rendered

Live budgets

Every team sees its own bucket update as spend happens.

Delegated keys

Hand a scoped key to a sub-team or a robot.

pricing-table

Fields: plans (array of {name, price}, one column each) and rows (array of {feature, values}, one row each, where values is a plain array of strings that the data author has already lined up positionally with plans — the template has no way to check or compute that alignment, it only maps each side once).

=base:dataset.json pricing-data
{ "plans":
  [ {"name": "Starter", "price": "$0"}
  , {"name": "Team", "price": "$29/mo"}
  ]
, "rows":
  [ {"feature": "Buckets", "values": ["3", "25"]}
  , {"feature": "Delegated keys", "values": ["1", "20"]}
  ]
}

=base:main-content.tramaj-doc
@d=$ctx.datasets.pricing-data
import("corporate/pricing-table", {"plans": $d.plans, "rows": $d.rows}).rendered
Starter
$0
Team
$29/mo
Buckets325
Delegated keys120

cta-banner

Fields: title (string), body (string), label/href (the button), and id (string, may be ""; set to a real id when the banner is also an in-page anchor target, as the corporate layout example does for its “Talk to sales” hero link).

=base:dataset.json cta-data
{ "title": "Ready to see it on your own numbers?"
, "body": "No credit card required."
, "label": "Get started"
, "href": "mailto:hello@example.invalid"
, "id": ""
}

=base:main-content.tramaj-doc
@d=$ctx.datasets.cta-data
import("corporate/cta-banner", {"title": $d.title, "body": $d.body, "label": $d.label, "href": $d.href, "id": $d.id}).rendered

Ready to see it on your own numbers?

No credit card required.

Get started

testimonial-strip

Fields: testimonials (array of {quote, author}).

=base:dataset.json testimonials-data
{ "testimonials":
  [ {"quote": "We went from a shared spreadsheet nobody trusted to a dashboard every team lead checks before standup.", "author": "Head of Platform, mid-size fintech"}
  ]
}

=base:main-content.tramaj-doc
@d=$ctx.datasets.testimonials-data
import("corporate/testimonial-strip", {"testimonials": $d.testimonials}).rendered
We went from a shared spreadsheet nobody trusted to a dashboard every team lead checks before standup.Head of Platform, mid-size fintech

Fields: columns (array of {heading, links}, where links is an array of {label, href}). This renders link columns as ordinary page content — class="corp-footer-columns" — distinct from the site-wide <footer class="site-footer"> chrome that kitchen-sink.json’s own footer configuration already renders below every page; use this component for an in-page “resources” band, not to replace the site footer.

=base:dataset.json footer-columns-data
{ "columns":
  [ {"heading": "Product", "links": [{"label": "Pricing", "href": "#pricing"}, {"label": "Changelog", "href": "/changelog.html"}]}
  , {"heading": "Company", "links": [{"label": "About", "href": "/about.html"}]}
  ]
}

=base:main-content.tramaj-doc
@d=$ctx.datasets.footer-columns-data
import("corporate/footer-columns", {"columns": $d.columns}).rendered

See the corporate layout example for all of hero, feature-grid, pricing-table, cta-banner and testimonial-strip composed into one landing page, and tramaj sections for the underlying language (imports, .cmark-tramaj library files, the $ctx object).