A component is a pattern you use more than once: a feature card, a testimonial, a pricing tile. Delta stores it as a recipe: the markup, plus a note about the common mistakes. The styles live in components.css.
The reason to keep a recipe is the rewrite. Change the recipe and the agent can find every copy on the site and bring them all into line, in one pass.
Copies are real markup
A component instance is ordinary HTML sitting in your page, not a placeholder that gets filled in when the page loads. Each copy is marked so the agent can find it later.
That means a copy keeps its own words, its own image, its own icon. The recipe owns the structure; the content stays yours. And because the markup is really there, a page still renders correctly if the recipe is ever removed.
It also means updates are deliberate. Nothing changes under you when a recipe is edited. The agent rewrites the copies when you ask.
Why copies, not includes
Most systems make a component a machine: the page holds a reference, and the server or the browser fills it in each time the page loads. Delta makes it a copy on purpose.
One mental model. A page is HTML. A template is HTML. A component is HTML with a label. There is no second language of props and slots to learn, and nothing invisible turns one thing into another. Read the source of a page and you see what the visitor gets.
Two kinds of change, two speeds. Looks change in components.css and reach every copy at once, because the copies share the classes. Structure changes only when you run the rewrite, after a trial that reports what would be lost. Style is automatic; structure is deliberate. That split is what keeps an edit to a recipe from breaking a page nobody was looking at.
No cost until it pays off. A section used once stays plain HTML. You only take on the component bookkeeping where it saves work.
Ready for a static site. Because a page already contains its finished markup, exporting the site to plain HTML files is close to a copy. The markers are ordinary attributes and travel with the files. components.css is just a stylesheet. There is no component runtime to port and no include engine to run at build time. The static site is the live site with the substitution step done ahead of time.
The trade-off is honest: adding a wrapper element to a recipe with fifty copies means running the rewrite and reading the trial. Delta bets that structure changes are rare and style changes are common, and that bet holds for most content and marketing sites.
Working with them
“Turn this feature card into a component so we can use it on the services pages.”
“Add a caption line to the testimonial component and update everywhere it is used.”
Before a rewrite the agent runs it as a trial and reports what would change, including any content that would be lost. Approve it and the rewrite lands.
“Where is the pricing tile used?”
When one copy needs to differ
Two ways out. Mark the copy as a deliberate exception, so it stays a member of the family but is not flagged as broken. Or detach it: it stops following the recipe and keeps the shared styles.
Prefer a variant class on the component to either, when the difference will happen again.
When to make one
Promote a pattern when the same CSS is being repeated across pages, not the first time markup looks similar. A component with one copy is overhead.
What a component holds
Markup and notes live in the recipe. Styles live in components.css. JavaScript is not part of a recipe: it lives in site.js, so a component that needs behaviour is styled and marked here and driven from there.
For developers
Recipes are markdown files under components/, one per component. A live instance is marked data-delta-component="name", a deliberate structural exception data-delta-component-opt-out, and a detached one data-delta-component-detached-from.
Conformance is always computed from the live HTML against the recipe, never from the usage index. A rewrite runs as a dry run first and reports the content it would lose.
Page CSS loads before components.css, so a page rule of equal specificity loses to the component. Prefer a component-owned variant class over per-instance CSS.