Pricing
Three pricing tiers
Three plan cards with a highlighted middle tier, each with a price, a feature list and a button.
When to use it
The most-requested section that converters usually handle badly, because a pricing card packs a heading, a price, a list and a button into one box and it is tempting to flatten all of it. Here each card keeps its parts separate, and the feature list is built as icon rows so it becomes a single editable Icon List instead of five stray text widgets. The highlighted middle tier uses a border and a shifted background rather than a transform, so the emphasis survives conversion.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 1 — the section
- Heading × 1 — the section H2
- Container (grid, 3 columns) × 1
- Container × 3 — one per plan card
- Heading × 6 — plan names and prices
- Text Editor × 3 — the plan descriptions
- Icon List × 3 — one per card feature list
- Button × 3
Things worth knowing
- Choose “match the Elementor icon library” in the Icons option so each feature list becomes one Icon List widget. Without it the rows arrive as separate text.
- The middle card is emphasised with a border and background change, not a CSS transform. Transforms are not read from static markup, so a scaled card would import at normal size and the emphasis would vanish.
- Prices are headings so all three share one typography control after import — handy when you change currency or size later.
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>Three pricing tiers</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f6f8fb;color:#14233a}
.wrap{max-width:1080px;margin:0 auto;padding:72px 22px}
h2{text-align:center;font-size:36px;letter-spacing:-.03em;margin:0 0 38px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.card{background:#fff;border:1px solid #e3e9f1;border-radius:16px;padding:30px;box-shadow:0 12px 30px rgba(18,35,57,.05)}
.card.featured{border:2px solid #ff5b35;background:#fffaf8}
.plan{margin:0 0 6px;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:#7c8ba0}
.price{margin:0 0 10px;font-size:40px;letter-spacing:-.04em}
.card > p{margin:0 0 22px;color:#66758a;line-height:1.75;font-size:14px}
.list{display:flex;flex-direction:column;gap:11px;margin:0 0 26px}
.list > div{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.65;color:#33475f}
.tick{color:#1a9c6b;font-size:16px;line-height:1.5}
.button{display:block;text-align:center;padding:13px 20px;border-radius:9px;text-decoration:none;font-weight:700;font-size:15px;background:#14233a;color:#fff}
.featured .button{background:#ff5b35}
@media(max-width:860px){.grid{grid-template-columns:1fr}h2{font-size:28px}}
</style>
</head>
<body>
<section class="wrap">
<h2>Simple plans</h2>
<div class="grid">
<article class="card">
<p class="plan">Starter</p>
<h3 class="price">$0</h3>
<p>For trying things out on a single project.</p>
<div class="list">
<div><span class="tick">✓</span><span>One project</span></div>
<div><span class="tick">✓</span><span>Core components</span></div>
<div><span class="tick">✓</span><span>Community support</span></div>
</div>
<a class="button" href="#start">Get started</a>
</article>
<article class="card featured">
<p class="plan">Studio</p>
<h3 class="price">$19</h3>
<p>For freelancers shipping client sites every month.</p>
<div class="list">
<div><span class="tick">✓</span><span>Unlimited projects</span></div>
<div><span class="tick">✓</span><span>All components</span></div>
<div><span class="tick">✓</span><span>Priority replies</span></div>
</div>
<a class="button" href="#start">Choose Studio</a>
</article>
<article class="card">
<p class="plan">Agency</p>
<h3 class="price">$49</h3>
<p>For teams with several people building at once.</p>
<div class="list">
<div><span class="tick">✓</span><span>Team seats</span></div>
<div><span class="tick">✓</span><span>Shared library</span></div>
<div><span class="tick">✓</span><span>Onboarding call</span></div>
</div>
<a class="button" href="#start">Talk to us</a>
</article>
</div>
</section>
</body>
</html>