Website kits
SaaS pricing page
Pricing page with three per-user plans and feature lists, an annual billing note, an enterprise contact band and a billing FAQ accordion.
When to use it
A pricing page for per-seat software with a self-serve path and a sales path. The three plan cards overlap the hero so prices are visible without scrolling on a laptop, each with a one-line description of who the plan suits, the monthly price, five included items and its own button. The middle plan is marked as the usual choice, which helps people who do not want to compare every line. The annual billing note sits directly under the cards and states the yearly prices as numbers rather than a percentage, because finance teams will check the arithmetic. The enterprise band catches larger buyers who need invoices or contract terms, and the billing FAQ answers the questions that otherwise arrive as support tickets. Replace the prices and limits first, then the FAQ answers about trials, seat counting and tax, and make sure every figure here matches what your checkout actually charges.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 15
- Container (grid, 3 columns) × 1
- Container (grid) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 15
- Heading × 7
- Icon List × 4
- Button × 4
- Accordion × 1
Things worth knowing
- Each plan’s feature rows become an Icon List widget (four in total, including the enterprise list), and the billing questions become one Accordion widget with six items.
- Prices are Text Editor widgets, not Counter widgets and not the Elementor Pro Price Table, so a price change is a plain text edit.
- The plan cards are pulled up over the hero with a negative top margin. After import, check that margin on the cards’ grid Container if you change the hero height.
- The three cards stack into one column below 780px, in the order Starter, Team, Business.
- Choose “match the Elementor icon library” in the Icons option. The ✓, → and other glyph rows only become Icon List and Icon Box widgets in that mode.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pricing — Corvane</title>
<style>
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:#16152e;background:#ffffff}
h1,h2,h3{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;color:#16152e;letter-spacing:-.025em}
h1{font-size:50px;line-height:1.1;margin:0 0 18px}
h2{font-size:34px;line-height:1.18;margin:0 0 14px}
h3{font-size:22px;line-height:1.3;margin:0 0 8px}
p{font-size:16.5px;line-height:1.75;color:#5c5b78;margin:0 0 18px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:84px 0}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4f46e5;margin:0 0 12px}
.button{display:block;text-align:center;padding:14px 22px;border-radius:10px;background:#4f46e5;color:#ffffff;text-decoration:none;font-weight:700;font-size:16px}
.ghost{display:block;text-align:center;padding:13px 21px;border-radius:10px;border:1px solid #4f46e5;color:#4f46e5;background:#ffffff;text-decoration:none;font-weight:700;font-size:16px}
.hero{background:#eeecfd;padding:80px 0 150px;text-align:center}
.hero h1{max-width:760px;margin-left:auto;margin-right:auto}
.hero .lead{font-size:19px;max-width:640px;margin:0 auto}
.plans-band{padding:0 0 64px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:-110px;align-items:start}
.plan{padding:34px 30px;border-radius:16px;background:#ffffff;border:1px solid #eeecfd;display:flex;flex-direction:column;gap:0}
.plan.main{border:2px solid #4f46e5}
.badge{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#16152e;background:#2fd39a;border-radius:999px;padding:5px 12px;margin:0 0 16px}
.plan .who{font-size:15px;margin:0 0 22px}
.amount{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;font-size:46px;font-weight:800;letter-spacing:-.03em;color:#16152e;line-height:1;margin:0 0 6px}
.per{font-size:14px;margin:0 0 24px}
.ticks{display:flex;flex-direction:column;gap:11px;margin:0 0 28px;padding-top:22px;border-top:1px solid #eeecfd}
.ticks div{display:flex;gap:10px;font-size:15px;line-height:1.55;color:#16152e}
.ticks span:first-child{color:#4f46e5;font-weight:700}
.note-band{padding-top:0}
.annual{max-width:860px;margin:0 auto;padding:24px 30px;border-radius:14px;background:#eeecfd;text-align:center}
.annual h2{font-size:21px;margin:0 0 6px}
.annual p{margin:0;font-size:15.5px}
.enterprise{background:#16152e}
.ent{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.enterprise h2{color:#ffffff}
.enterprise p{color:#eeecfd}
.enterprise .button{display:inline-block;background:#2fd39a;color:#16152e}
.ent-list{display:flex;flex-direction:column;gap:14px;padding:30px;border:1px solid #5c5b78;border-radius:14px}
.ent-list div{display:flex;gap:12px;font-size:15.5px;line-height:1.6;color:#ffffff}
.ent-list span:first-child{color:#2fd39a;font-weight:700}
.faq{max-width:820px;margin:0 auto}
.faq h2{text-align:center;margin-bottom:30px}
.faq-list{display:flex;flex-direction:column;gap:12px}
details{border:1px solid #eeecfd;border-radius:12px;padding:20px 24px;background:#ffffff}
summary{cursor:pointer;font-weight:700;font-size:17px;color:#16152e}
details p{margin:12px 0 0;font-size:15.5px}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.hero{padding:56px 0 110px}
h1{font-size:35px}
h2{font-size:27px}
.hero .lead{font-size:17px}
.plans{grid-template-columns:1fr;margin-top:-80px}
.plans-band{padding:0 0 48px}
.ent{grid-template-columns:1fr;gap:28px}
.annual{padding:22px 20px}
details{padding:16px 18px}
summary{font-size:16px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<p class="eyebrow">Pricing</p>
<h1>Pay per person, only for the features you use</h1>
<p class="lead">Every plan includes unlimited projects, boards and guests. Start with a 14-day trial of Team and pick a plan when it ends.</p>
</div>
</section>
<section class="plans-band">
<div class="wrap">
<div class="plans">
<div class="plan">
<h3>Starter</h3>
<p class="who">For small teams that need one shared board.</p>
<p class="amount">$8</p>
<p class="per">per user / month, billed monthly</p>
<div class="ticks">
<div><span>✓</span><span>Up to 10 users</span></div>
<div><span>✓</span><span>Unlimited boards and projects</span></div>
<div><span>✓</span><span>Custom fields and recurring tasks</span></div>
<div><span>✓</span><span>iOS and Android apps</span></div>
<div><span>✓</span><span>Email support, reply within one business day</span></div>
</div>
<a class="ghost" href="#trial">Start with Starter</a>
</div>
<div class="plan main">
<p class="badge">Most teams pick this</p>
<h3>Team</h3>
<p class="who">For teams that plan around deadlines and capacity.</p>
<p class="amount">$14</p>
<p class="per">per user / month, billed monthly</p>
<div class="ticks">
<div><span>✓</span><span>Everything in Starter, up to 150 users</span></div>
<div><span>✓</span><span>Timelines and task dependencies</span></div>
<div><span>✓</span><span>Workload and capacity planning</span></div>
<div><span>✓</span><span>Time tracking and weekly summaries</span></div>
<div><span>✓</span><span>Support reply within 8 business hours</span></div>
</div>
<a class="button" href="#trial">Start 14-day trial</a>
</div>
<div class="plan">
<h3>Business</h3>
<p class="who">For organizations with admin and reporting needs.</p>
<p class="amount">$24</p>
<p class="per">per user / month, billed monthly</p>
<div class="ticks">
<div><span>✓</span><span>Everything in Team</span></div>
<div><span>✓</span><span>SAML single sign-on</span></div>
<div><span>✓</span><span>Audit log kept for 12 months</span></div>
<div><span>✓</span><span>Cross-project dashboards</span></div>
<div><span>✓</span><span>Support reply within 4 business hours</span></div>
</div>
<a class="ghost" href="#trial">Start with Business</a>
</div>
</div>
</div>
</section>
<section class="note-band">
<div class="wrap">
<div class="annual">
<h2>Pay yearly and get two months free</h2>
<p>Annual billing costs 10 months instead of 12: $80, $140 or $240 per user per year. You can switch from monthly to annual at any time from the billing page.</p>
</div>
</div>
</section>
<section class="enterprise">
<div class="wrap ent">
<div>
<p class="eyebrow">Enterprise</p>
<h2>More than 150 people, or a contract of your own?</h2>
<p>We set up larger workspaces with invoice billing, a data processing agreement reviewed by your legal team and a named contact for onboarding.</p>
<a class="button" href="#contact">Talk to sales</a>
</div>
<div class="ent-list">
<div><span>✓</span><span>Annual invoice with purchase order support</span></div>
<div><span>✓</span><span>Custom data processing agreement</span></div>
<div><span>✓</span><span>Guided onboarding and admin training</span></div>
<div><span>✓</span><span>Uptime commitment written into the contract</span></div>
</div>
</div>
</section>
<section>
<div class="wrap faq">
<h2>Billing questions</h2>
<div class="faq-list">
<details>
<summary>What happens when the trial ends?</summary>
<p>Nothing is charged automatically. Choose a plan and add a card to keep working, or the workspace becomes read-only until you do. Your data stays for 60 days.</p>
</details>
<details>
<summary>How are users counted?</summary>
<p>You pay for members who can create and edit tasks. Guests who view and comment on shared projects are free and unlimited on every plan.</p>
</details>
<details>
<summary>What if we add people halfway through the month?</summary>
<p>New users are charged pro rata for the rest of the billing period. Removing someone frees the seat, and the unused time is credited to your next invoice.</p>
</details>
<details>
<summary>Which payment methods do you accept?</summary>
<p>Major credit and debit cards on every plan. Annual plans for 25 users or more can also pay by bank transfer against an invoice.</p>
</details>
<details>
<summary>Can we cancel at any time?</summary>
<p>Yes. Monthly plans stop at the end of the current month. Annual plans run to the end of the paid year, and you can export all of your data before you leave.</p>
</details>
<details>
<summary>Are prices shown with tax?</summary>
<p>Prices are in US dollars and exclude sales tax or VAT, which is added at checkout based on your billing address.</p>
</details>
</div>
</div>
</section>
</body>
</html>