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 | |
|---|---|---|
| Buckets | 3 | 25 |
| Delegated keys | 1 | 20 |
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
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
footer-columns
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).