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 what is easy to get wrong. The styles live in components.css.
The payoff 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.
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.