Headings

Heading 1 — 40px

Heading 2 — 28px

Heading 3 — 24px

Heading 4 — 20px

Heading 5 — 16px

ButtonV2

primary

Size: normal

Default (with icons)

Label only

Disabled

Size: small

Default (with icons)

Label only

Disabled

secondary

Size: normal

Default (with icons)

Label only

Disabled

Size: small

Default (with icons)

Label only

Disabled

tertiary

Size: normal

Default (with icons)

Label only

Disabled

Size: small

Default (with icons)

Label only

Disabled

ghost

Size: normal

Default (with icons)

Label only

Disabled

Size: small

Default (with icons)

Label only

Disabled

Block (full width)

All variants — side by side

Section Heading

With link

Heading.

Explore all features

Heading only

Featured templates.

Mobile preview (resize window or view at < 768px)

Long heading goes here.

See all

Large Menu Link

Hover to see hover state, Tab to see focus ring

BlogBlog about all-things email marketing Templates500+ ready-to-use email templatesDisabled linkComing soon

Changelog Card

Hover to see hover state

EmailLanding pageAI

AI chatFeb 21 2026

Email

New templatesFeb 14 2026

Bug fixesFeb 07 2026

Small Card

Responsive.

Looks perfect and works on every device. By default.

Fast.

Build and ship in minutes, not weeks.

Secure.

Your data is encrypted at rest and in transit.

Text Card

Who is Topol for?

If your users need to send emails from your app, you don't need to build the entire editor yourself.

Large Card

Fast integration.

Install in 5 minutes. Compatible across tech stacks.

Beautiful templates.

500+ ready-to-use designs at your fingertips.

No-code editor.

Drag, drop, done. No engineering required.

Accordion Card

Click to toggle, hover for hover state, Tab for focus state

If your users need to send emails from your app, you don't need to build the entire editor yourself.

FAQ Section

Click items to expand — only one open at a time. Zigzag on desktop, stacked on mobile.

CodeSnippet

Multiline

import { TopolEditor } from'@topol.io/editor-vue'; const customOptions = { authorize: { apiKey:'YOUR_API_TOKEN', userId:'some-user-id', }, };

Singleline

npm install @topol.io/editor-vue

Blog Post Card

Three types — hover for hover state

Topol Enables 12k+ Ecomail Clients to Build 150k+ Email Templates.

Read →

Case StudyMar 2024

Jack Zagorsky5 Min. read

Topol Enables 12k+ Ecomail Clients to Build 150k+ Email Templates.

Read →

Case StudyMar 2024

Jack Zagorsky5 Min. read

Topol Enables 12k+ Ecomail Clients to Build 150k+ Email Templates.

Read →

Case StudyMar 2024

Jack Zagorsky5 Min. read

Pricing Card

Startup

$70/month

Prepaid users50 users

Additional user$1.60

Image storageUnlimited

Expansion

$140/month

Prepaid users50 users

Additional user$1.60

Image storageUnlimited

Business

$280/month

Prepaid users50 users

Additional user$1.60

Image storageUnlimited

Trust Bar

Default

Trusted.

Custom heading and subset

Loved by 12k+ teams.

Large Menu

Resources

Learn how to get the most out of Topol.

Docs

Articles

BlogBlog about all-things email marketing.

Case StudiesLearn how others won with Topol.

Other

GlossaryFit Topol right into your current stack.

IntegrationsUse the power of AI to build faster.

Topol vs CompetitorsCompare embeddable email editors.

Topol Enables 12k+ Ecomail Clients to Build 150k+ Email Templates.

Read →

Case StudyMar 2024

Jack Zagorsky5 Min. read

Products

Embed or use directly.

Editors

EmailCreate beautiful email templates.

Landing pageMarketing landing pages made easy.

PopupBuild forms that convert.

Capabilities

IntegrationsFit Topol right into your current stack.

AI AutomationUse the power of AI to build faster.

SecuritySOC II and GDPR standards.

PRO

Best fit for teamwork. Create, save, edit, organize and collaborate.

Plugin

Save development time and costs by giving your users an editor they will enjoy.

Navbar

Default (responsive — resize window for mobile view)

Topol Logo

Default (wordmark + icon)

Dark

Light

Muted

Icon only

Dark

Light

Muted

Sized via class override

Pass a Tailwind class to scale; SVG keeps its aspect ratio.

InputField

Statuses (empty / placeholder)

default

error

success

disabled

Statuses (filled)

default

error

success

disabled

Variations

No icons

Leading icon only

Trailing icon only — password

Block (full width)

v-model live value: (empty)

Label

With tooltip icon

LabelLabelLabel (optional)

Without tooltip icon

LabelLabelLabel (optional)

With tooltip text (hover the icon)

Email addressCompany name (optional)

Bound to an input (click label to focus)

First name

Tag

Size: default

Case StudyCase StudyCase StudyCase Study

Size: small

Case StudyCase StudyCase StudyCase Study

Icon Button

primary

Size: large

Default

Disabled

Size: small

Default

Disabled

secondary

Size: large

Default

Disabled

Size: small

Default

Disabled

tertiary

Size: large

Default

Disabled

Size: small

Default

Disabled

ghost

Size: large

Default

Disabled

Size: small

Default

Disabled

All variants — side by side

Pattern

primary

secondary

tertiary

pink

green

Block (stretches to container)

Simple Illustration

Figure 01

Figure 02

Figure 03

Customer Logo

All customers (stacked)

Side by side (logo strip)

On dark background

Mega Button

Default (hover and Tab to test)

Disabled

Label only

Photo

Type 01

Type 02

Testimonial

Default

“Topol Plugin enables our clients to build emails twice as fast.“

Tomas Horacek, CEO at Customerscore.io

Large

“Topol Plugin enables our clients to build emails twice as fast.“

Tomas Horacek, CEO at Customerscore.io

Default — no photo

“Topol Plugin enables our clients to build emails twice as fast.“

Tomas Horacek, CEO at Customerscore.io