Three-column feature cards
A centred section heading above three bordered cards, each with an icon, a title and a short paragraph.
When to use it
The workhorse section of almost every landing page, and a good test of whether a converter is doing real work. Each card here contains exactly one icon, one heading and one paragraph, which is the shape that becomes a single Icon Box widget rather than three loose widgets inside a box. That difference decides whether your client can restyle all three cards from one control or has to edit nine things by hand.
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
- Text Editor × 1 — the intro paragraph
- Container (grid, 3 columns) × 1
- Icon Box × 3 — one per card, each with its own icon, title and description
Things worth knowing
- Choose “match the Elementor icon library” in the Icons option, or the cards convert to plain Containers with separate text widgets instead of Icon Boxes.
- The card border, radius and shadow are applied to the Icon Box widget itself, so there is no extra wrapper Container per card.
- The grid drops to one column below 760px; that value lands in Elementor’s responsive controls.
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-column feature cards</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#fff;color:#14233a}
.features{max-width:1120px;margin:0 auto;padding:72px 22px}
h2{text-align:center;font-size:38px;letter-spacing:-.03em;margin:0 0 14px}
.intro{text-align:center;max-width:660px;margin:0 auto 38px;color:#64748b;line-height:1.8}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{padding:30px;border:1px solid #e1e8f0;border-radius:14px;background:#fff;box-shadow:0 12px 32px rgba(18,35,57,.06)}
.icon{width:48px;height:48px;border-radius:12px;background:#fff0eb;color:#ff5b35;display:grid;place-items:center;margin-bottom:18px;font-size:22px}
h3{font-size:19px;margin:0 0 10px}
.card p{margin:0;color:#66758a;line-height:1.75;font-size:14.5px}
@media(max-width:760px){.grid{grid-template-columns:1fr}h2{font-size:29px}}
</style>
</head>
<body>
<section class="features">
<h2>What actually carries over</h2>
<p class="intro">Conversion is only useful if the result is editable. These are the three things that decide whether it is.</p>
<div class="grid">
<article class="card">
<div class="icon">✓</div>
<h3>Native widgets</h3>
<p>Headings, text, images and buttons arrive as real Elementor widgets with their own controls, not as one locked block.</p>
</article>
<article class="card">
<div class="icon">★</div>
<h3>Computed styles</h3>
<p>Spacing, colour, radius and typography are read from what the browser actually painted, not from the stylesheet you hoped applied.</p>
</article>
<article class="card">
<div class="icon">→</div>
<h3>Two export paths</h3>
<p>Copy paste data straight into an open editor, or download a JSON template you can import on any site.</p>
</article>
</div>
</section>
</body>
</html>