Home / Snippets / Pricing / Agency service package pricing Try the design Preview widthFit panel Mobile · 390 px Tablet · 768 px Desktop · 1280 px Open demo ↗
Preview links stay in the example. Copy the source to use your own destinations. Form previews never send information.
Copy the source HTML CSS Astro
Copy HTML <section class="fct-agency-package-pricing s-pricing s-packages" data-snippet="agency-package-pricing" aria-labelledby="fct-agency-package-pricing-heading"><div class="s-wrap"><p class="s-kicker">Clear options. Useful details.</p><h2 id="fct-agency-package-pricing-heading">Choose the scope that fits.</h2><p class="s-pricing-intro">Editable example prices and inclusions. Replace these with your actual scope, tax treatment and billing terms.</p><div class="s-prices"><article><div><p class="s-kicker">01 / Package</p><h3>Essentials</h3></div><div class="s-price"><strong data-price="650" data-annual="120">€650</strong><p data-billing-note>one-off sample price</p></div><ul><li>A focused starting point</li><li>Clear scope agreed together</li><li>Email communication</li></ul><a class="s-button" href="contact.html">Discuss Essentials</a></article><article><div><p class="s-kicker">02 / Package</p><h3>Complete</h3></div><div class="s-price"><strong data-price="1600" data-annual="290">€1600</strong><p data-billing-note>one-off sample price</p></div><ul><li>A complete project scope</li><li>Planned review stages</li><li>Documented handover</li></ul><a class="s-button" href="contact.html">Discuss Complete</a></article><article><div><p class="s-kicker">03 / Package</p><h3>Ongoing</h3></div><div class="s-price"><strong data-price="2400" data-annual="590">€2400</strong><p data-billing-note>one-off sample price</p></div><ul><li>A continuing working rhythm</li><li>Defined monthly allocation</li><li>Scheduled check-ins</li></ul><a class="s-button" href="contact.html">Discuss Ongoing</a></article></div></div></section>
Copy CSS .fct-agency-package-pricing{--s-bg:#f7f4eb;--s-ink:#252d26;--s-accent:#4b5d36;font:16px/1.65 system-ui,sans-serif;color:var(--s-ink);background:var(--s-bg)}.fct-agency-package-pricing,.fct-agency-package-pricing *{box-sizing:border-box}.fct-agency-package-pricing :is(h2,h3,p,ul,figure){margin:0}.fct-agency-package-pricing h2,.fct-agency-package-pricing h3{line-height:1.2;letter-spacing:-.035em}.fct-agency-package-pricing h2{font-size:clamp(1.8rem,4vw,3.5rem)}.fct-agency-package-pricing a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere}.fct-agency-package-pricing :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--s-accent);outline-offset:4px}.fct-agency-package-pricing button,.fct-agency-package-pricing input,.fct-agency-package-pricing textarea,.fct-agency-package-pricing select{font:inherit}.fct-agency-package-pricing a,.fct-agency-package-pricing button{touch-action:manipulation}.fct-agency-package-pricing .s-wrap{max-width:1200px;margin-inline:auto;padding:40px 28px}.fct-agency-package-pricing .s-kicker{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.fct-agency-package-pricing .s-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 21px;border:1px solid currentColor;text-decoration:none;background:transparent;color:inherit;cursor:pointer;border-radius:2px;font-weight:600}.fct-agency-package-pricing .s-muted{opacity:.82}.fct-agency-package-pricing .s-links{display:flex;gap:8px 26px;flex-wrap:wrap}.fct-agency-package-pricing .s-links a{display:inline-flex;align-items:center;min-height:44px}.fct-agency-package-pricing .s-rule{border-top:1px solid currentColor;padding-top:20px;margin-top:30px}.fct-agency-package-pricing .s-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.fct-agency-package-pricing img{max-width:100%;height:auto;display:block}.fct-agency-package-pricing .s-brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;text-decoration:none}@media(max-width:640px){.fct-agency-package-pricing .s-wrap{padding:30px 20px}.fct-agency-package-pricing .s-grid{grid-template-columns:1fr}}
.fct-agency-package-pricing .s-pricing-intro{max-width:64ch;margin:22px 0 40px}.fct-agency-package-pricing .s-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.fct-agency-package-pricing .s-prices article{border:1px solid currentColor;padding:28px;display:flex;flex-direction:column;gap:26px;min-width:0}.fct-agency-package-pricing .s-prices h3{font-size:1.6rem}.fct-agency-package-pricing .s-prices ul{padding-left:20px;line-height:2}.fct-agency-package-pricing .s-prices .s-button{margin-top:auto}.fct-agency-package-pricing .s-price strong{font-size:2.7rem;letter-spacing:-.05em;overflow-wrap:anywhere}.fct-agency-package-pricing .s-price p{font-size:.875rem}.fct-agency-package-pricing.s-rows .s-prices{display:block}.fct-agency-package-pricing.s-rows article{display:grid;grid-template-columns:1.2fr .7fr 1.5fr auto;align-items:center;margin-bottom:16px;border-inline:0;padding-inline:0}.fct-agency-package-pricing .s-billing{display:flex;flex-wrap:wrap;gap:22px;border:1px solid currentColor;padding:18px;margin:30px 0 15px;max-width:400px}.fct-agency-package-pricing .s-billing label{min-height:44px;align-content:center;cursor:pointer}.fct-agency-package-pricing .s-billing input{width:20px;height:20px;accent-color:var(--s-accent);vertical-align:middle}.fct-agency-package-pricing .s-billing-status{font-size:.875rem;margin-bottom:25px}.fct-agency-package-pricing .s-table-scroll{max-width:100%;overflow:auto}.fct-agency-package-pricing table{border-collapse:collapse;min-width:660px;width:100%;text-align:left}.fct-agency-package-pricing caption{text-align:left;font-weight:600;margin-bottom:18px}.fct-agency-package-pricing :is(th,td){padding:20px;border:1px solid #b3b9aa;vertical-align:top}.fct-agency-package-pricing th span{font-size:.875rem;font-weight:400}.fct-agency-package-pricing .s-rate-layout{display:grid;grid-template-columns:2fr 1fr;gap:50px}.fct-agency-package-pricing .s-rate{display:flex;justify-content:space-between;gap:25px;border-top:1px solid currentColor;padding:28px 0}.fct-agency-package-pricing .s-rate strong{flex:none}.fct-agency-package-pricing .s-rate p{margin-top:12px}.fct-agency-package-pricing aside{border:1px solid currentColor;padding:28px;align-self:start}.fct-agency-package-pricing aside p{margin:20px 0 30px}@media(max-width:900px){.fct-agency-package-pricing.s-rows article{grid-template-columns:1fr 1fr}.fct-agency-package-pricing.s-rows ul{grid-column:1/-1}}@media(max-width:700px){.fct-agency-package-pricing .s-prices,.fct-agency-package-pricing .s-rate-layout{grid-template-columns:1fr}.fct-agency-package-pricing .s-rate{flex-direction:column}.fct-agency-package-pricing.s-rows article{grid-template-columns:1fr}.fct-agency-package-pricing .s-prices article{padding:24px}}Copy Astro ---
// Generated, escaped static markup. Use a distinct prefix for each instance.
const markup = "\u003csection class=\"fct-agency-package-pricing s-pricing s-packages\" data-snippet=\"agency-package-pricing\" aria-labelledby=\"fct-agency-package-pricing-heading\"\u003e\u003cdiv class=\"s-wrap\"\u003e\u003cp class=\"s-kicker\"\u003eClear options. Useful details.\u003c/p\u003e\u003ch2 id=\"fct-agency-package-pricing-heading\"\u003eChoose the scope that fits.\u003c/h2\u003e\u003cp class=\"s-pricing-intro\"\u003eEditable example prices and inclusions. Replace these with your actual scope, tax treatment and billing terms.\u003c/p\u003e\u003cdiv class=\"s-prices\"\u003e\u003carticle\u003e\u003cdiv\u003e\u003cp class=\"s-kicker\"\u003e01 / Package\u003c/p\u003e\u003ch3\u003eEssentials\u003c/h3\u003e\u003c/div\u003e\u003cdiv class=\"s-price\"\u003e\u003cstrong data-price=\"650\" data-annual=\"120\"\u003e€650\u003c/strong\u003e\u003cp data-billing-note\u003eone-off sample price\u003c/p\u003e\u003c/div\u003e\u003cul\u003e\u003cli\u003eA focused starting point\u003c/li\u003e\u003cli\u003eClear scope agreed together\u003c/li\u003e\u003cli\u003eEmail communication\u003c/li\u003e\u003c/ul\u003e\u003ca class=\"s-button\" href=\"contact.html\"\u003eDiscuss Essentials\u003c/a\u003e\u003c/article\u003e\u003carticle\u003e\u003cdiv\u003e\u003cp class=\"s-kicker\"\u003e02 / Package\u003c/p\u003e\u003ch3\u003eComplete\u003c/h3\u003e\u003c/div\u003e\u003cdiv class=\"s-price\"\u003e\u003cstrong data-price=\"1600\" data-annual=\"290\"\u003e€1600\u003c/strong\u003e\u003cp data-billing-note\u003eone-off sample price\u003c/p\u003e\u003c/div\u003e\u003cul\u003e\u003cli\u003eA complete project scope\u003c/li\u003e\u003cli\u003ePlanned review stages\u003c/li\u003e\u003cli\u003eDocumented handover\u003c/li\u003e\u003c/ul\u003e\u003ca class=\"s-button\" href=\"contact.html\"\u003eDiscuss Complete\u003c/a\u003e\u003c/article\u003e\u003carticle\u003e\u003cdiv\u003e\u003cp class=\"s-kicker\"\u003e03 / Package\u003c/p\u003e\u003ch3\u003eOngoing\u003c/h3\u003e\u003c/div\u003e\u003cdiv class=\"s-price\"\u003e\u003cstrong data-price=\"2400\" data-annual=\"590\"\u003e€2400\u003c/strong\u003e\u003cp data-billing-note\u003eone-off sample price\u003c/p\u003e\u003c/div\u003e\u003cul\u003e\u003cli\u003eA continuing working rhythm\u003c/li\u003e\u003cli\u003eDefined monthly allocation\u003c/li\u003e\u003cli\u003eScheduled check-ins\u003c/li\u003e\u003c/ul\u003e\u003ca class=\"s-button\" href=\"contact.html\"\u003eDiscuss Ongoing\u003c/a\u003e\u003c/article\u003e\u003c/div\u003e\u003c/div\u003e\u003c/section\u003e";
---
<Fragment set:html={markup} />
<style is:global>
.fct-agency-package-pricing{--s-bg:#f7f4eb;--s-ink:#252d26;--s-accent:#4b5d36;font:16px/1.65 system-ui,sans-serif;color:var(--s-ink);background:var(--s-bg)}.fct-agency-package-pricing,.fct-agency-package-pricing *{box-sizing:border-box}.fct-agency-package-pricing :is(h2,h3,p,ul,figure){margin:0}.fct-agency-package-pricing h2,.fct-agency-package-pricing h3{line-height:1.2;letter-spacing:-.035em}.fct-agency-package-pricing h2{font-size:clamp(1.8rem,4vw,3.5rem)}.fct-agency-package-pricing a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere}.fct-agency-package-pricing :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--s-accent);outline-offset:4px}.fct-agency-package-pricing button,.fct-agency-package-pricing input,.fct-agency-package-pricing textarea,.fct-agency-package-pricing select{font:inherit}.fct-agency-package-pricing a,.fct-agency-package-pricing button{touch-action:manipulation}.fct-agency-package-pricing .s-wrap{max-width:1200px;margin-inline:auto;padding:40px 28px}.fct-agency-package-pricing .s-kicker{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.fct-agency-package-pricing .s-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 21px;border:1px solid currentColor;text-decoration:none;background:transparent;color:inherit;cursor:pointer;border-radius:2px;font-weight:600}.fct-agency-package-pricing .s-muted{opacity:.82}.fct-agency-package-pricing .s-links{display:flex;gap:8px 26px;flex-wrap:wrap}.fct-agency-package-pricing .s-links a{display:inline-flex;align-items:center;min-height:44px}.fct-agency-package-pricing .s-rule{border-top:1px solid currentColor;padding-top:20px;margin-top:30px}.fct-agency-package-pricing .s-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.fct-agency-package-pricing img{max-width:100%;height:auto;display:block}.fct-agency-package-pricing .s-brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;text-decoration:none}@media(max-width:640px){.fct-agency-package-pricing .s-wrap{padding:30px 20px}.fct-agency-package-pricing .s-grid{grid-template-columns:1fr}}
.fct-agency-package-pricing .s-pricing-intro{max-width:64ch;margin:22px 0 40px}.fct-agency-package-pricing .s-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.fct-agency-package-pricing .s-prices article{border:1px solid currentColor;padding:28px;display:flex;flex-direction:column;gap:26px;min-width:0}.fct-agency-package-pricing .s-prices h3{font-size:1.6rem}.fct-agency-package-pricing .s-prices ul{padding-left:20px;line-height:2}.fct-agency-package-pricing .s-prices .s-button{margin-top:auto}.fct-agency-package-pricing .s-price strong{font-size:2.7rem;letter-spacing:-.05em;overflow-wrap:anywhere}.fct-agency-package-pricing .s-price p{font-size:.875rem}.fct-agency-package-pricing.s-rows .s-prices{display:block}.fct-agency-package-pricing.s-rows article{display:grid;grid-template-columns:1.2fr .7fr 1.5fr auto;align-items:center;margin-bottom:16px;border-inline:0;padding-inline:0}.fct-agency-package-pricing .s-billing{display:flex;flex-wrap:wrap;gap:22px;border:1px solid currentColor;padding:18px;margin:30px 0 15px;max-width:400px}.fct-agency-package-pricing .s-billing label{min-height:44px;align-content:center;cursor:pointer}.fct-agency-package-pricing .s-billing input{width:20px;height:20px;accent-color:var(--s-accent);vertical-align:middle}.fct-agency-package-pricing .s-billing-status{font-size:.875rem;margin-bottom:25px}.fct-agency-package-pricing .s-table-scroll{max-width:100%;overflow:auto}.fct-agency-package-pricing table{border-collapse:collapse;min-width:660px;width:100%;text-align:left}.fct-agency-package-pricing caption{text-align:left;font-weight:600;margin-bottom:18px}.fct-agency-package-pricing :is(th,td){padding:20px;border:1px solid #b3b9aa;vertical-align:top}.fct-agency-package-pricing th span{font-size:.875rem;font-weight:400}.fct-agency-package-pricing .s-rate-layout{display:grid;grid-template-columns:2fr 1fr;gap:50px}.fct-agency-package-pricing .s-rate{display:flex;justify-content:space-between;gap:25px;border-top:1px solid currentColor;padding:28px 0}.fct-agency-package-pricing .s-rate strong{flex:none}.fct-agency-package-pricing .s-rate p{margin-top:12px}.fct-agency-package-pricing aside{border:1px solid currentColor;padding:28px;align-self:start}.fct-agency-package-pricing aside p{margin:20px 0 30px}@media(max-width:900px){.fct-agency-package-pricing.s-rows article{grid-template-columns:1fr 1fr}.fct-agency-package-pricing.s-rows ul{grid-column:1/-1}}@media(max-width:700px){.fct-agency-package-pricing .s-prices,.fct-agency-package-pricing .s-rate-layout{grid-template-columns:1fr}.fct-agency-package-pricing .s-rate{flex-direction:column}.fct-agency-package-pricing.s-rows article{grid-template-columns:1fr}.fct-agency-package-pricing .s-prices article{padding:24px}}
</style>
Code tabs need JavaScript. All source formats are included in the open downloads.
Where this design fits The package layout compares a small number of service scopes. Each card pairs a sample one-off price with concrete inclusions and an ordinary enquiry link.
Three service packages One-off price labels Editable feature lists What is included The HTML ZIP includes a standalone demo, reusable markup, scoped CSS, a license and setup notes. The Astro ZIP includes Snippet.astro. It can be imported into an existing Astro page or layout.
Replace the demonstration prices Update every price, currency, billing period, inclusion and tax statement. Action links lead to your chosen enquiry or checkout destination; this snippet does not create subscriptions, process payments or enforce plan limits.
Add it to an HTML website Copy snippet.html into the relevant page section. Load snippet.css after your existing site stylesheet. The class prefix identifies this design. No JavaScript is needed for this design. Replace example content and check mobile widths, zoom, links and keyboard focus in your actual website. Use it in Astro Copy Snippet.astro into src/components/, import it into your page or shared layout, and insert the component where the section belongs. Keep each generated prefix unique if you duplicate a component on one page.
Keep the section maintainable Start with the variables at the top of the CSS for background, text and accent colors. Preserve semantic labels and focus styles. Existing site selectors can still affect imported markup, so test the combined result. Read the complete setup notes .
