Website kits
SaaS features page
Features page with four screenshot rows, a light plan comparison, a security controls band with six boxes and a feature FAQ accordion.
When to use it
The page evaluators open after the home page, usually with a checklist from their team. Each of the four rows covers one area of the product (planning, scheduling, reporting, mobile) with a screenshot and three specific capabilities, so someone scanning for a requirement finds it quickly. The plan comparison is deliberately light, three cards saying what each tier adds, and it links to the pricing page instead of repeating a full feature matrix that would drift out of sync. The security band lists controls as plain statements of what the product does, which is what a procurement reviewer needs; do not add certification badges unless you hold the certificate and can send the report. Start by rewriting the four rows around your own product areas, then check every security statement with whoever runs your infrastructure. The FAQ at the end should collect the questions your sales team answers every week.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 22
- Container (grid, 3 columns) × 2
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 16
- Heading × 11
- Icon List × 7
- Image × 4
- Button × 1
- Icon Box × 6
- Accordion × 1
Things worth knowing
- The six security cards convert to Icon Box widgets and the FAQ to a single Accordion widget with five items built from the <details> elements.
- Each feature row and each plan card carries an Icon List, seven in total, and the four screenshots become Image widgets. The phone screenshot uses a portrait 1000 × 1250 image.
- The plan cards are plain Containers, not the Elementor Pro Price Table widget, so they work on the free version of Elementor and stay fully editable.
- All multi-column rows and grids collapse to one column below 780px.
- 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>Features — 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:20px;line-height:1.3;margin:0 0 10px}
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:inline-block;padding:15px 26px;border-radius:10px;background:#4f46e5;color:#ffffff;text-decoration:none;font-weight:700;font-size:16px}
.hero{background:#eeecfd;padding:80px 0 72px;text-align:center}
.hero h1{max-width:820px;margin-left:auto;margin-right:auto}
.hero .lead{font-size:19px;max-width:660px;margin:0 auto}
.row{display:flex;align-items:center;gap:56px;margin-bottom:80px}
.row:last-child{margin-bottom:0}
.flip{flex-direction:row-reverse}
.copy{flex:1 1 0}
.row img{flex:1.15 1 0;min-width:0;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:14px;background:#eeecfd}
.row img.tall{flex:0 1 380px;aspect-ratio:4/5}
.ticks{display:flex;flex-direction:column;gap:10px}
.ticks div{display:flex;gap:10px;font-size:15.5px;line-height:1.6;color:#16152e}
.ticks span:first-child{color:#4f46e5;font-weight:700}
.tint{background:#eeecfd}
.center{text-align:center}
.center > p{max-width:640px;margin:0 auto 40px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left;margin-bottom:36px}
.plan{padding:30px;border-radius:14px;background:#ffffff;border:1px solid #ffffff}
.plan.main{border:2px solid #4f46e5}
.plan .from{font-size:15px;margin:0 0 20px}
.plan .ticks div{font-size:15px}
.secure{background:#16152e}
.secure h2{color:#ffffff}
.secure .center > p{color:#eeecfd}
.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.control{padding:26px;border:1px solid #5c5b78;border-radius:14px}
.control .icon{display:block;color:#2fd39a;font-size:20px;margin-bottom:14px}
.control h3{color:#ffffff;font-size:18px}
.control p{color:#eeecfd;font-size:15px;margin:0}
.secure .note{font-size:14.5px;color:#eeecfd;max-width:720px;margin:36px auto 0;text-align:center}
.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 48px}
h1{font-size:35px}
h2{font-size:27px}
.hero .lead{font-size:17px}
.row,.flip{flex-direction:column;align-items:stretch;gap:24px;margin-bottom:52px}
.row img.tall{flex:none;width:100%;max-width:360px;align-self:center}
.plans,.controls{grid-template-columns:1fr}
details{padding:16px 18px}
summary{font-size:16px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<p class="eyebrow">Features</p>
<h1>Everything a project needs, from the first task to the final report</h1>
<p class="lead">Corvane covers planning, scheduling and reporting in one workspace. Here is what each part does and which plan it comes with.</p>
</div>
</section>
<section>
<div class="wrap">
<div class="row">
<div class="copy">
<p class="eyebrow">Plan</p>
<h2>Boards that match how your team works</h2>
<p>Start from a blank board or a template for client projects, content calendars or product releases. Rename columns, add custom fields and set rules for what happens when a card moves.</p>
<div class="ticks">
<div><span>✓</span><span>Custom fields: text, number, date, dropdown and person</span></div>
<div><span>✓</span><span>Rules such as “assign the reviewer when a card reaches Review”</span></div>
<div><span>✓</span><span>Recurring tasks for weekly and monthly work</span></div>
</div>
</div>
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/saas/board-view.jpg" width="1600" height="1000" alt="Monitor showing a kanban board with four columns of task cards in indigo and green">
</div>
<div class="row flip">
<div class="copy">
<p class="eyebrow">Schedule</p>
<h2>Timelines and workload in the same view</h2>
<p>Drag tasks along a timeline, link the ones that depend on each other, and see who is booked beyond their hours before the week starts rather than halfway through it.</p>
<div class="ticks">
<div><span>✓</span><span>Finish-to-start dependencies with automatic rescheduling</span></div>
<div><span>✓</span><span>Capacity per person, with time off taken into account</span></div>
<div><span>✓</span><span>Milestones that clients can follow on a shared link</span></div>
</div>
</div>
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/saas/timeline-view.jpg" width="1600" height="1000" alt="Laptop showing a horizontal timeline of colored bars with connecting lines between tasks">
</div>
<div class="row">
<div class="copy">
<p class="eyebrow">Report</p>
<h2>Progress you can forward without editing</h2>
<p>Reports are built from the work itself, so they are current whenever you open them. Schedule a weekly summary per project or build a dashboard across all of them.</p>
<div class="ticks">
<div><span>✓</span><span>Weekly summary email per project</span></div>
<div><span>✓</span><span>Time tracking against estimates and budgets</span></div>
<div><span>✓</span><span>CSV and PDF export of any report</span></div>
</div>
</div>
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/saas/reports-view.jpg" width="1600" height="1000" alt="Tablet on a desk displaying bar and line charts summarizing weekly project progress">
</div>
<div class="row flip">
<div class="copy">
<p class="eyebrow">On the go</p>
<h2>The same board on your phone</h2>
<p>The iOS and Android apps show today’s tasks first. Comment, attach a photo from site or mark something done, and the change appears on everyone’s board within seconds.</p>
<div class="ticks">
<div><span>✓</span><span>Today view with your tasks and mentions</span></div>
<div><span>✓</span><span>Offline edits that sync when you reconnect</span></div>
<div><span>✓</span><span>Push notifications you can limit per project</span></div>
</div>
</div>
<img class="tall" src="https://htmltoelementor.com/wp-content/uploads/hte-library/saas/mobile-app.jpg" width="1000" height="1250" alt="Hand holding a smartphone showing a list of tasks with colored status dots">
</div>
</div>
</section>
<section class="tint">
<div class="wrap center">
<h2>What each plan adds</h2>
<p>Every plan includes unlimited projects and boards. Higher plans add scheduling, reporting and admin controls.</p>
<div class="plans">
<div class="plan">
<h3>Starter</h3>
<p class="from">From $8 per user / month</p>
<div class="ticks">
<div><span>✓</span><span>Boards, custom fields and recurring tasks</span></div>
<div><span>✓</span><span>Mobile apps</span></div>
<div><span>✓</span><span>Up to 10 users</span></div>
</div>
</div>
<div class="plan main">
<h3>Team</h3>
<p class="from">From $14 per user / month</p>
<div class="ticks">
<div><span>✓</span><span>Everything in Starter</span></div>
<div><span>✓</span><span>Timelines, dependencies and workload</span></div>
<div><span>✓</span><span>Weekly summaries and time tracking</span></div>
</div>
</div>
<div class="plan">
<h3>Business</h3>
<p class="from">From $24 per user / month</p>
<div class="ticks">
<div><span>✓</span><span>Everything in Team</span></div>
<div><span>✓</span><span>SAML single sign-on and audit log</span></div>
<div><span>✓</span><span>Cross-project dashboards</span></div>
</div>
</div>
</div>
<a class="button" href="#pricing">Compare plans and prices</a>
</div>
</section>
<section class="secure">
<div class="wrap center">
<h2>How we look after your data</h2>
<p>These are the controls built into Corvane today. Ask us for the security overview if your procurement team needs details.</p>
<div class="controls">
<div class="control">
<span class="icon">✓</span>
<h3>Encryption</h3>
<p>Data is encrypted in transit with TLS 1.2 or higher and at rest with AES-256.</p>
</div>
<div class="control">
<span class="icon">✓</span>
<h3>Single sign-on</h3>
<p>SAML 2.0 sign-in on the Business plan, with optional enforcement for the whole workspace.</p>
</div>
<div class="control">
<span class="icon">✓</span>
<h3>Roles and permissions</h3>
<p>Admin, member and guest roles. Guests only see the projects they are invited to.</p>
</div>
<div class="control">
<span class="icon">✓</span>
<h3>Audit log</h3>
<p>Sign-ins, permission changes and exports are logged and kept for 12 months.</p>
</div>
<div class="control">
<span class="icon">✓</span>
<h3>Backups</h3>
<p>Encrypted backups run daily and are kept for 30 days in a separate region.</p>
</div>
<div class="control">
<span class="icon">✓</span>
<h3>Your data, your exit</h3>
<p>Export every project to CSV or JSON at any time. Deleted workspaces are erased within 30 days.</p>
</div>
</div>
<p class="note">We describe what is in place rather than listing badges. Questionnaires and data processing agreements are handled by our team at [email protected].</p>
</div>
</section>
<section>
<div class="wrap faq">
<h2>Feature questions</h2>
<div class="faq-list">
<details>
<summary>Can I import projects from another tool?</summary>
<p>Yes. Upload a CSV export and map its columns to Corvane fields. Tasks, assignees, due dates and comments come across; attachments are imported as links.</p>
</details>
<details>
<summary>Do guests count as paid users?</summary>
<p>No. Guests such as clients or freelancers can view and comment on the projects you share with them without taking a paid seat.</p>
</details>
<details>
<summary>Is there an API?</summary>
<p>Every plan includes the REST API and webhooks. Tokens are created per workspace, and the documentation lists every endpoint with examples.</p>
</details>
<details>
<summary>Does time tracking need a separate app?</summary>
<p>No. Start a timer on any task from the browser or the mobile app, or enter time manually afterwards. Team and Business plans include it.</p>
</details>
<details>
<summary>Where is our data stored?</summary>
<p>You choose a US or EU data region when you create the workspace. Backups stay in the same region you picked.</p>
</details>
</div>
</div>
</section>
</body>
</html>