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-membership-row-pricing s-pricing s-rows" data-snippet="membership-row-pricing" aria-labelledby="fct-membership-row-pricing-heading"><div class="s-wrap"><p class="s-kicker">Clear options. Useful details.</p><h2 id="fct-membership-row-pricing-heading">A place that fits your week.</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 / Membership</p><h3>Day desk</h3></div><div class="s-price"><strong data-price="25" data-annual="120">€25</strong><p data-billing-note>per day</p></div><ul><li>Shared desk for one day</li><li>Weekday access</li><li>Book the day you need</li></ul><a class="s-button" href="contact.html">Enquire about membership</a></article><article><div><p class="s-kicker">02 / Membership</p><h3>Flexible member</h3></div><div class="s-price"><strong data-price="160" data-annual="290">€160</strong><p data-billing-note>per month</p></div><ul><li>Shared desks throughout the month</li><li>Meeting room time by arrangement</li><li>Community events</li></ul><a class="s-button" href="contact.html">Enquire about membership</a></article><article><div><p class="s-kicker">03 / Membership</p><h3>Dedicated desk</h3></div><div class="s-price"><strong data-price="290" data-annual="590">€290</strong><p data-billing-note>per month</p></div><ul><li>A desk reserved for you</li><li>Storage by arrangement</li><li>Regular member access</li></ul><a class="s-button" href="contact.html">Enquire about membership</a></article></div></div></section>
---
// Generated, escaped static markup. Use a distinct prefix for each instance.
const markup = "\u003csection class=\"fct-membership-row-pricing s-pricing s-rows\" data-snippet=\"membership-row-pricing\" aria-labelledby=\"fct-membership-row-pricing-heading\"\u003e\u003cdiv class=\"s-wrap\"\u003e\u003cp class=\"s-kicker\"\u003eClear options. Useful details.\u003c/p\u003e\u003ch2 id=\"fct-membership-row-pricing-heading\"\u003eA place that fits your week.\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 / Membership\u003c/p\u003e\u003ch3\u003eDay desk\u003c/h3\u003e\u003c/div\u003e\u003cdiv class=\"s-price\"\u003e\u003cstrong data-price=\"25\" data-annual=\"120\"\u003e€25\u003c/strong\u003e\u003cp data-billing-note\u003eper day\u003c/p\u003e\u003c/div\u003e\u003cul\u003e\u003cli\u003eShared desk for one day\u003c/li\u003e\u003cli\u003eWeekday access\u003c/li\u003e\u003cli\u003eBook the day you need\u003c/li\u003e\u003c/ul\u003e\u003ca class=\"s-button\" href=\"contact.html\"\u003eEnquire about membership\u003c/a\u003e\u003c/article\u003e\u003carticle\u003e\u003cdiv\u003e\u003cp class=\"s-kicker\"\u003e02 / Membership\u003c/p\u003e\u003ch3\u003eFlexible member\u003c/h3\u003e\u003c/div\u003e\u003cdiv class=\"s-price\"\u003e\u003cstrong data-price=\"160\" data-annual=\"290\"\u003e€160\u003c/strong\u003e\u003cp data-billing-note\u003eper month\u003c/p\u003e\u003c/div\u003e\u003cul\u003e\u003cli\u003eShared desks throughout the month\u003c/li\u003e\u003cli\u003eMeeting room time by arrangement\u003c/li\u003e\u003cli\u003eCommunity events\u003c/li\u003e\u003c/ul\u003e\u003ca class=\"s-button\" href=\"contact.html\"\u003eEnquire about membership\u003c/a\u003e\u003c/article\u003e\u003carticle\u003e\u003cdiv\u003e\u003cp class=\"s-kicker\"\u003e03 / Membership\u003c/p\u003e\u003ch3\u003eDedicated desk\u003c/h3\u003e\u003c/div\u003e\u003cdiv class=\"s-price\"\u003e\u003cstrong data-price=\"290\" data-annual=\"590\"\u003e€290\u003c/strong\u003e\u003cp data-billing-note\u003eper month\u003c/p\u003e\u003c/div\u003e\u003cul\u003e\u003cli\u003eA desk reserved for you\u003c/li\u003e\u003cli\u003eStorage by arrangement\u003c/li\u003e\u003cli\u003eRegular member access\u003c/li\u003e\u003c/ul\u003e\u003ca class=\"s-button\" href=\"contact.html\"\u003eEnquire about membership\u003c/a\u003e\u003c/article\u003e\u003c/div\u003e\u003c/div\u003e\u003c/section\u003e";
---
<Fragment set:html={markup} />
<style is:global>
.fct-membership-row-pricing{--s-bg:#162e42;--s-ink:#ffffff;--s-accent:#e0bd80;font:16px/1.65 system-ui,sans-serif;color:var(--s-ink);background:var(--s-bg)}.fct-membership-row-pricing,.fct-membership-row-pricing *{box-sizing:border-box}.fct-membership-row-pricing :is(h2,h3,p,ul,figure){margin:0}.fct-membership-row-pricing h2,.fct-membership-row-pricing h3{line-height:1.2;letter-spacing:-.035em}.fct-membership-row-pricing h2{font-size:clamp(1.8rem,4vw,3.5rem)}.fct-membership-row-pricing a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere}.fct-membership-row-pricing :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--s-accent);outline-offset:4px}.fct-membership-row-pricing button,.fct-membership-row-pricing input,.fct-membership-row-pricing textarea,.fct-membership-row-pricing select{font:inherit}.fct-membership-row-pricing a,.fct-membership-row-pricing button{touch-action:manipulation}.fct-membership-row-pricing .s-wrap{max-width:1200px;margin-inline:auto;padding:40px 28px}.fct-membership-row-pricing .s-kicker{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.fct-membership-row-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-membership-row-pricing .s-muted{opacity:.82}.fct-membership-row-pricing .s-links{display:flex;gap:8px 26px;flex-wrap:wrap}.fct-membership-row-pricing .s-links a{display:inline-flex;align-items:center;min-height:44px}.fct-membership-row-pricing .s-rule{border-top:1px solid currentColor;padding-top:20px;margin-top:30px}.fct-membership-row-pricing .s-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.fct-membership-row-pricing img{max-width:100%;height:auto;display:block}.fct-membership-row-pricing .s-brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;text-decoration:none}@media(max-width:640px){.fct-membership-row-pricing .s-wrap{padding:30px 20px}.fct-membership-row-pricing .s-grid{grid-template-columns:1fr}}
.fct-membership-row-pricing .s-pricing-intro{max-width:64ch;margin:22px 0 40px}.fct-membership-row-pricing .s-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.fct-membership-row-pricing .s-prices article{border:1px solid currentColor;padding:28px;display:flex;flex-direction:column;gap:26px;min-width:0}.fct-membership-row-pricing .s-prices h3{font-size:1.6rem}.fct-membership-row-pricing .s-prices ul{padding-left:20px;line-height:2}.fct-membership-row-pricing .s-prices .s-button{margin-top:auto}.fct-membership-row-pricing .s-price strong{font-size:2.7rem;letter-spacing:-.05em;overflow-wrap:anywhere}.fct-membership-row-pricing .s-price p{font-size:.875rem}.fct-membership-row-pricing.s-rows .s-prices{display:block}.fct-membership-row-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-membership-row-pricing .s-billing{display:flex;flex-wrap:wrap;gap:22px;border:1px solid currentColor;padding:18px;margin:30px 0 15px;max-width:400px}.fct-membership-row-pricing .s-billing label{min-height:44px;align-content:center;cursor:pointer}.fct-membership-row-pricing .s-billing input{width:20px;height:20px;accent-color:var(--s-accent);vertical-align:middle}.fct-membership-row-pricing .s-billing-status{font-size:.875rem;margin-bottom:25px}.fct-membership-row-pricing .s-table-scroll{max-width:100%;overflow:auto}.fct-membership-row-pricing table{border-collapse:collapse;min-width:660px;width:100%;text-align:left}.fct-membership-row-pricing caption{text-align:left;font-weight:600;margin-bottom:18px}.fct-membership-row-pricing :is(th,td){padding:20px;border:1px solid #b3b9aa;vertical-align:top}.fct-membership-row-pricing th span{font-size:.875rem;font-weight:400}.fct-membership-row-pricing .s-rate-layout{display:grid;grid-template-columns:2fr 1fr;gap:50px}.fct-membership-row-pricing .s-rate{display:flex;justify-content:space-between;gap:25px;border-top:1px solid currentColor;padding:28px 0}.fct-membership-row-pricing .s-rate strong{flex:none}.fct-membership-row-pricing .s-rate p{margin-top:12px}.fct-membership-row-pricing aside{border:1px solid currentColor;padding:28px;align-self:start}.fct-membership-row-pricing aside p{margin:20px 0 30px}@media(max-width:900px){.fct-membership-row-pricing.s-rows article{grid-template-columns:1fr 1fr}.fct-membership-row-pricing.s-rows ul{grid-column:1/-1}}@media(max-width:700px){.fct-membership-row-pricing .s-prices,.fct-membership-row-pricing .s-rate-layout{grid-template-columns:1fr}.fct-membership-row-pricing .s-rate{flex-direction:column}.fct-membership-row-pricing.s-rows article{grid-template-columns:1fr}.fct-membership-row-pricing .s-prices article{padding:24px}}
</style>
Where this design fits
Each membership has its own horizontal row, which is useful when names or inclusions run longer than a card allows. Rows stack into compact sections on a phone.
Horizontal price rows
Monthly billing labels
Mobile stacking
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.
