Marketing & Content

Pricing Card

One plan: badge, name, price, tagline, check-marked features and a CTA; a featured plan is stamped and its CTA turns primary. renderPricingCards renders the whole list.

Element: <article>
Module: @basenative/components
Function: renderPricingCard

Quick start

Import the render function and call it from your server template.

import { renderPricingCards } from '@basenative/components';

renderPricingCards({ plans: [{ name: 'Core', priceLabel: '$49', features: ['One seat'], cta: { label: 'Start', href: '#start' } }] });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Plan list with a featured plan

renderPricingCards renders the list shape; a featured plan is stamped data-featured and its CTA turns primary. All plan copy is escaped text.

Live render

Pass-through

At cost

Infrastructure billed at vendor cost.
- No markup
- No monthly minimum
See the rates
Core model

Lead delivery

Per delivered lead priced per trade

You pay for booked jobs, not bought leads.
- Qualified and scheduled
- Tracked to outcome
- Pauses when your schedule is full
Get Started

Source

renderPricingCards({
  plans: [
    { name: 'Pass-through', priceLabel: 'At cost', features: ['No markup'], cta: { label: 'See the rates', href: '#rates' } },
    {
      name: 'Lead delivery',
      badge: 'Core model',
      priceLabel: 'Per delivered lead',
      features: ['Qualified and scheduled', 'Tracked to outcome'],
      featured: true,
      cta: { label: 'Get Started', href: '#start' },
    },
  ],
})

Options

Arguments accepted by renderPricingCard().

renderPricingCard option reference
Option	Type	Default	Description
`name`	`string`	`—`	Plan name (escaped text).
`priceLabel`	`string`	`—`	Price text (escaped).
`features`	`string[]`	`[]`	Feature lines (escaped text).
`featured`	`boolean`	`false`	Stamps data-featured and defaults the CTA to primary.
`cta`	`{ label, href, variant? }`	`—`	Call-to-action link rendered as a full-width button.