freecsstemplates. Favorites0
PRICING / FREE HTML + ASTRO

Index design membership pricing

A design membership pricing section with a typographic introduction, asymmetric plan layout and explicit monthly and annual billing.

Try the design

Open demo ↗

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-index-design-membership"
  data-snippet="index-design-membership"
  aria-labelledby="fct-index-design-membership-title"
>
  <div class="r-inner">
    <div class="r-pricing-top">
      <div>
        <span class="r-micro">INDEX / DESIGN PARTNERSHIPS</span>
        <h2 id="fct-index-design-membership-title">
          Design support.<br /><span class="r-italic">A clear arrangement.</span>
        </h2>
      </div>
      <div>
        <p>
          Two ways to bring considered design into your business. Clear scope. Direct collaboration.
        </p>
        <fieldset class="r-billing">
          <legend>Billing period</legend>
          <label
            ><input
              type="radio"
              name="fct-index-design-membership-billing"
              value="monthly"
              checked
            />
            Monthly</label
          ><label
            ><input type="radio" name="fct-index-design-membership-billing" value="annual" />
            Annual</label
          >
        </fieldset>
      </div>
    </div>
    <div class="r-plan-grid">
      <article class="r-plan r-featured">
        <div class="r-plan-heading">
          <span class="r-micro">01 / An ongoing partnership</span
          ><span class="r-plan-symbol" aria-hidden="true">✳</span>
        </div>
        <h3>Studio membership</h3>
        <p class="r-plan-description">For teams that need a steady creative partner.</p>
        <div class="r-price">
          <strong data-price="1800" data-annual="18000">€1,800</strong
          ><span data-billing-note>per month</span>
        </div>
        <a class="r-pill" href="contact.html"
          >Discuss membership <span aria-hidden="true">↗</span></a
        >
        <div class="r-inclusions">
          <span class="r-micro">The working rhythm</span>
          <ul>
            <li>One active project at a time</li>
            <li>Brand, digital and everyday design</li>
            <li>Regular planning and review</li>
            <li>Source files and documented handover</li>
          </ul>
        </div>
      </article>
      <article class="r-plan r-project">
        <span class="r-micro">02 / A defined piece of work</span>
        <h3>One good project.</h3>
        <p>A clear beginning, an agreed scope and a complete handover.</p>
        <div class="r-project-price">
          <span>Projects from</span><strong>€3,200</strong><span>one-off sample price</span>
        </div>
        <a class="r-link" href="contact.html"
          >Talk through your project <span aria-hidden="true">↗</span></a
        >
        <p class="r-project-note">A useful route for an identity, a website or a focused launch.</p>
      </article>
    </div>
    <div class="r-pricing-bottom">
      <p role="status" class="r-price-status">
        Sample monthly membership pricing. Replace prices and terms before publication.
      </p>
      <p>
        All figures are editable examples.<br />Tax treatment and final scope must be specified.
      </p>
    </div>
  </div>
</section>

Where this design fits

A pale yellow introductory panel provides context before a large featured plan and a quieter alternative. Pricing is presented with precise billing labels and editable scope, informed by actual subscription and software pricing pages.

  • Asymmetric plan composition
  • Monthly and annual controls
  • Explicit billing totals

What is included

The HTML ZIP includes a standalone demo, reusable markup, scoped CSS, its small JavaScript runtime, a license and setup notes. The Astro ZIP includes Snippet.astro, self-hosted fonts and asset license notes. 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

  1. Copy snippet.html into the relevant page section.
  2. Load snippet.css after your existing site stylesheet. The class prefix identifies this design.
  3. Load snippet.js once with defer. Keep the included keyboard behavior when adapting interactions.
  4. 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. Copy the fonts and any images folders into public/snippet-assets/index-design-membership/; the component uses those public paths. 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.

More pricing to consider

Agency service package pricing layout preview

Pricing · HTML + ASTRO

Agency service package pricing

Three plain service-package cards with defined scope, one-off prices and enquiry links.

No JavaScript required · MIT code
Membership row pricing layout preview

Pricing · HTML + ASTRO

Membership row pricing

A horizontal membership rate list with inclusions, monthly prices and individual action links.

No JavaScript required · MIT code
Software pricing with billing switch layout preview

Pricing · HTML + ASTRO

Software pricing with billing switch

A software pricing section with monthly and annual options, explicit annual totals and live price announcements.

Small vanilla JavaScript enhancement · MIT code
Feature comparison pricing table layout preview

Pricing · HTML + ASTRO

Feature comparison pricing table

A semantic feature comparison table with plan headers, row labels and included/not-included text.

No JavaScript required · MIT code
Professional service rate card layout preview

Pricing · HTML + ASTRO

Professional service rate card

A restrained service rate card with fixed-scope items, starting prices and an enquiry column.

No JavaScript required · MIT code

Browse all pricing and download the collection ↗

Keep building.

Explore full website templates ↗Open the free website tools ↗Check your customized HTML files ↗
GOOD DESIGN, OCCASIONALLY.

Your next idea
could start here.

New templates, useful guides, and updates from us.
A little inspiration for whatever you’re building.