Preview links stay in the example. Copy the source to use your own destinations. Form previews never send information.
Copy the source
<section class="fct-service-rate-card s-pricing s-rates" data-snippet="service-rate-card" aria-labelledby="fct-service-rate-card-heading"><div class="s-wrap"><p class="s-kicker">Clear options. Useful details.</p><h2 id="fct-service-rate-card-heading">A clear starting point.</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-rate-layout"><div><article class="s-rate"><div><h3>Website review</h3><p>A focused assessment of a small website.</p></div><strong>from €180</strong></article><article class="s-rate"><div><h3>Consultation</h3><p>A planned session around a clear question.</p></div><strong>from €95 / hour</strong></article><article class="s-rate"><div><h3>Project planning</h3><p>A documented scope and practical next steps.</p></div><strong>from €450</strong></article></div><aside><h3>Need a different scope?</h3><p>Tell us about the work and request an individual proposal.</p><a href="contact.html" class="s-button">Discuss a project</a></aside></div></div></section>
---
// Generated, escaped static markup. Use a distinct prefix for each instance.
const markup = "\u003csection class=\"fct-service-rate-card s-pricing s-rates\" data-snippet=\"service-rate-card\" aria-labelledby=\"fct-service-rate-card-heading\"\u003e\u003cdiv class=\"s-wrap\"\u003e\u003cp class=\"s-kicker\"\u003eClear options. Useful details.\u003c/p\u003e\u003ch2 id=\"fct-service-rate-card-heading\"\u003eA clear starting point.\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-rate-layout\"\u003e\u003cdiv\u003e\u003carticle class=\"s-rate\"\u003e\u003cdiv\u003e\u003ch3\u003eWebsite review\u003c/h3\u003e\u003cp\u003eA focused assessment of a small website.\u003c/p\u003e\u003c/div\u003e\u003cstrong\u003efrom €180\u003c/strong\u003e\u003c/article\u003e\u003carticle class=\"s-rate\"\u003e\u003cdiv\u003e\u003ch3\u003eConsultation\u003c/h3\u003e\u003cp\u003eA planned session around a clear question.\u003c/p\u003e\u003c/div\u003e\u003cstrong\u003efrom €95 / hour\u003c/strong\u003e\u003c/article\u003e\u003carticle class=\"s-rate\"\u003e\u003cdiv\u003e\u003ch3\u003eProject planning\u003c/h3\u003e\u003cp\u003eA documented scope and practical next steps.\u003c/p\u003e\u003c/div\u003e\u003cstrong\u003efrom €450\u003c/strong\u003e\u003c/article\u003e\u003c/div\u003e\u003caside\u003e\u003ch3\u003eNeed a different scope?\u003c/h3\u003e\u003cp\u003eTell us about the work and request an individual proposal.\u003c/p\u003e\u003ca href=\"contact.html\" class=\"s-button\"\u003eDiscuss a project\u003c/a\u003e\u003c/aside\u003e\u003c/div\u003e\u003c/div\u003e\u003c/section\u003e";
---
<Fragment set:html={markup} />
<style is:global>
.fct-service-rate-card{--s-bg:#f5ede2;--s-ink:#50291e;--s-accent:#8b3e28;font:16px/1.65 system-ui,sans-serif;color:var(--s-ink);background:var(--s-bg)}.fct-service-rate-card,.fct-service-rate-card *{box-sizing:border-box}.fct-service-rate-card :is(h2,h3,p,ul,figure){margin:0}.fct-service-rate-card h2,.fct-service-rate-card h3{line-height:1.2;letter-spacing:-.035em}.fct-service-rate-card h2{font-size:clamp(1.8rem,4vw,3.5rem)}.fct-service-rate-card a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere}.fct-service-rate-card :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--s-accent);outline-offset:4px}.fct-service-rate-card button,.fct-service-rate-card input,.fct-service-rate-card textarea,.fct-service-rate-card select{font:inherit}.fct-service-rate-card a,.fct-service-rate-card button{touch-action:manipulation}.fct-service-rate-card .s-wrap{max-width:1200px;margin-inline:auto;padding:40px 28px}.fct-service-rate-card .s-kicker{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.fct-service-rate-card .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-service-rate-card .s-muted{opacity:.82}.fct-service-rate-card .s-links{display:flex;gap:8px 26px;flex-wrap:wrap}.fct-service-rate-card .s-links a{display:inline-flex;align-items:center;min-height:44px}.fct-service-rate-card .s-rule{border-top:1px solid currentColor;padding-top:20px;margin-top:30px}.fct-service-rate-card .s-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.fct-service-rate-card img{max-width:100%;height:auto;display:block}.fct-service-rate-card .s-brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;text-decoration:none}@media(max-width:640px){.fct-service-rate-card .s-wrap{padding:30px 20px}.fct-service-rate-card .s-grid{grid-template-columns:1fr}}
.fct-service-rate-card .s-pricing-intro{max-width:64ch;margin:22px 0 40px}.fct-service-rate-card .s-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.fct-service-rate-card .s-prices article{border:1px solid currentColor;padding:28px;display:flex;flex-direction:column;gap:26px;min-width:0}.fct-service-rate-card .s-prices h3{font-size:1.6rem}.fct-service-rate-card .s-prices ul{padding-left:20px;line-height:2}.fct-service-rate-card .s-prices .s-button{margin-top:auto}.fct-service-rate-card .s-price strong{font-size:2.7rem;letter-spacing:-.05em;overflow-wrap:anywhere}.fct-service-rate-card .s-price p{font-size:.875rem}.fct-service-rate-card.s-rows .s-prices{display:block}.fct-service-rate-card.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-service-rate-card .s-billing{display:flex;flex-wrap:wrap;gap:22px;border:1px solid currentColor;padding:18px;margin:30px 0 15px;max-width:400px}.fct-service-rate-card .s-billing label{min-height:44px;align-content:center;cursor:pointer}.fct-service-rate-card .s-billing input{width:20px;height:20px;accent-color:var(--s-accent);vertical-align:middle}.fct-service-rate-card .s-billing-status{font-size:.875rem;margin-bottom:25px}.fct-service-rate-card .s-table-scroll{max-width:100%;overflow:auto}.fct-service-rate-card table{border-collapse:collapse;min-width:660px;width:100%;text-align:left}.fct-service-rate-card caption{text-align:left;font-weight:600;margin-bottom:18px}.fct-service-rate-card :is(th,td){padding:20px;border:1px solid #b3b9aa;vertical-align:top}.fct-service-rate-card th span{font-size:.875rem;font-weight:400}.fct-service-rate-card .s-rate-layout{display:grid;grid-template-columns:2fr 1fr;gap:50px}.fct-service-rate-card .s-rate{display:flex;justify-content:space-between;gap:25px;border-top:1px solid currentColor;padding:28px 0}.fct-service-rate-card .s-rate strong{flex:none}.fct-service-rate-card .s-rate p{margin-top:12px}.fct-service-rate-card aside{border:1px solid currentColor;padding:28px;align-self:start}.fct-service-rate-card aside p{margin:20px 0 30px}@media(max-width:900px){.fct-service-rate-card.s-rows article{grid-template-columns:1fr 1fr}.fct-service-rate-card.s-rows ul{grid-column:1/-1}}@media(max-width:700px){.fct-service-rate-card .s-prices,.fct-service-rate-card .s-rate-layout{grid-template-columns:1fr}.fct-service-rate-card .s-rate{flex-direction:column}.fct-service-rate-card.s-rows article{grid-template-columns:1fr}.fct-service-rate-card .s-prices article{padding:24px}}
</style>
Where this design fits
The rate card lists distinct services instead of implying that they are tiers of one product. Starting-price wording leaves room for a scope discussion without pretending to calculate a final fee.
Distinct service rows
Starting-price wording
Separate enquiry panel
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.
