Enterprise pricing pages follow a specific pattern: one or two self-serve plans on the left (often a plan selector or pricing cards), and an enterprise custom pricing card on the right with a "Contact sales" or "Let's talk" CTA replacing a price. This snippet provides the complete enterprise pricing section: a Pro plan card alongside an Enterprise custom pricing card with highlighted features, a trusted-by logo strip, and an inline FAQ accordion for the three most common enterprise objections.

The Enterprise custom pricing card

The Enterprise card uses "Let's talk" instead of a price — the standard pattern for custom enterprise deals where pricing depends on seat count, contract length, and compliance requirements. The card has an accent border (indigo), a coloured box-shadow glow, and a floating "Enterprise" badge at the top-right. Feature list items use an indigo checkmark icon instead of grey, visually signalling premium tier.

Feature list differentiation

Pro features use grey check circles (.feat-list li::before). Enterprise features use indigo check circles (.ent). This colour distinction reinforces which tier each feature belongs to when the cards are compared side by side.

The trusted-by logo strip

A muted logo strip below the cards communicates that other enterprise organisations have trusted your product. In production, replace the text placeholders with actual company SVG wordmarks at consistent opacity.

The inline FAQ accordion

Three enterprise-specific FAQ questions answer the most common sales objections: trial availability, SSO/SAML support, and SLA coverage. These questions match the real blockers in enterprise procurement conversations. The accordion uses a CSS max-height transition — the same pattern as the Pricing FAQ snippet.

When to use this page

Add the enterprise pricing section below your standard pricing tiers when your product has an enterprise tier. It signals to enterprise buyers that you take their needs seriously — compliance, SSO, dedicated support, custom contracts — without burying this information in a separate page.

The inline FAQ

Three enterprise-specific FAQ questions placed directly on the pricing page address the most common procurement blockers without requiring a separate FAQ page navigation. Enterprise procurement teams evaluate multiple vendors simultaneously. Removing even one extra click from the evaluation process reduces dropout. The max-height CSS accordion keeps questions compact while revealing full detail answers on demand — using the same pattern as the standalone Pricing FAQ snippet in this library.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to take the max-height accordion trick on faith. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why the FAQ answer uses a max-height transition instead of animating height directly, and what the fixed 120px ceiling means for an answer that turns out to be longer than expected. The same assistant can help optimize it — ask whether the enterprise card's box-shadow glow and the Pro card's plain border are doing enough visual differentiation on a very wide screen, and whether the toggleFaq function should close other open FAQ items when one opens instead of allowing several to stay open at once. It's also useful for extending the section: ask it to add a third pricing tier between Pro and Enterprise, wire the Contact sales button to a real scheduling link, or add per-plan annual/monthly billing toggle that updates both cards' prices together. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build an enterprise pricing section in plain HTML, CSS, and JavaScript with a two-tier comparison card, a logo strip, and an accordion FAQ — no library.

Requirements:
- A responsive two-column grid of pricing cards (collapsing to one column on narrow viewports) where the first card shows a standard numeric price and the second, enterprise card shows "Let's talk" text in place of a price, since enterprise pricing is negotiated rather than fixed.
- The enterprise card must be visually distinguished with an accent-colored border, a colored box-shadow glow, and a floating badge positioned with absolute positioning at its top edge, overlapping the card's own border.
- Each card's feature list must use a checkmark icon built from a pseudo-element (not an image), with the enterprise card's checkmarks rendered in the accent color and the standard card's checkmarks in a neutral gray, so the two feature sets are visually distinguishable at a glance.
- A muted "trusted by" logo strip below the cards showing several company names or wordmarks at reduced opacity.
- A FAQ accordion where each question is a clickable row that toggles an "open" class on itself; the answer element's height transition must be implemented with a max-height CSS transition (not height directly, since height cannot transition from auto), and a chevron or plus icon must rotate via CSS transform when its row is open.
- The accordion's JavaScript must be a single generic toggle function reused by every FAQ row via a shared click handler, not per-row duplicated logic.
- Ensure the enterprise card's call-to-action is textually and visually distinct from the standard card's self-serve signup button (e.g. "Contact sales" versus "Get started"), since they lead to different conversion paths.

Step by step

How to Use

1
Update the Pro plan price and featuresChange $39/mo and the feature list items in the Pro card. The btn-outline CTA links to your self-serve signup URL.
2
Update the Enterprise feature listEdit the Enterprise .feat-list li.ent items to match your actual enterprise tier features — SSO, SLA, dedicated support, custom billing, HIPAA compliance, etc.
3
Wire the Contact sales buttonSet href="#" on .btn-solid to your Calendly link, HubSpot form, or sales team email (mailto:). The enterprise CTA should open a low-friction contact path — not a full pricing form.
4
Replace the logo placeholdersReplace the .co text spans with actual customer company SVG wordmarks. Use consistent height (24px) and opacity (0.3–0.5) for all logos to maintain visual cohesion.
5
Update the FAQ questionsEdit the three FAQ question and answer texts to match your actual enterprise differentiators. Common questions: trial length, data residency, security certifications (SOC 2, ISO 27001), GDPR compliance, custom SLAs.
6
Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a Tailwind CSS version.

Real-world uses

Common Use Cases

SaaS enterprise tier conversion and sales qualification

The enterprise card with "Let's talk" CTA converts interested enterprise visitors into sales conversations. The FAQ addresses procurement blockers (trial, SSO, SLA) before the first sales call, reducing objection-handling time and qualifying prospects who are ready to engage.

B2B product pricing page enterprise section

Position this section below your self-serve pricing page tiers. Enterprise buyers who scroll past standard plans see the enterprise card and recognise it addresses their requirements (unlimited seats, dedicated support, custom contract). The logo strip confirms enterprise-grade adoption.

Agency and professional services custom pricing pages

Adapt for agency pricing: a Standard plan with fixed deliverables alongside a Custom plan with scope-dependent pricing. Replace feature bullets with service deliverables. Wire the CTA to a project enquiry form or Calendly booking.

Infrastructure and developer tool enterprise plans

For developer tools, enterprise features are typically: SSO/SAML, on-premise deployment, custom SLAs, private cloud hosting, dedicated support, and audit logs. Update the feature list to reflect these technical differentiators.

Study the enterprise pricing UI pattern and FAQ accordion

The enterprise card pattern — custom price, sales CTA, highlighted premium features, logo strip, inline FAQ — is one of the most studied SaaS conversion patterns. This snippet implements the full pattern in clean HTML and CSS without any library.

Compliance-sensitive products requiring security documentation

For healthcare (HIPAA), finance (SOC 2), or government products, add compliance certifications to the feature list: HIPAA compliant, SOC 2 Type II, ISO 27001, FedRAMP In Process. The enterprise card is where compliance-sensitive buyers look for these signals.

Got questions?

Frequently Asked Questions

Replace href="#" on .btn-solid with your Calendly URL: https://calendly.com/your-team/enterprise-demo. Or open an in-page modal (see the Modal snippet in this library): onclick="openSalesModal()". For HubSpot: use their Meetings embed link. For a mailto: link: href="mailto:[email protected]?subject=Enterprise inquiry". The important thing is to minimise friction — a direct Calendly link converts better than a form for enterprise buyers who are time-poor.

Add a third card div to .plan-cards in the HTML. Change grid-template-columns to repeat(3, 1fr). For responsive, add @media (max-width:800px) { .plan-cards { grid-template-columns: 1fr 1fr; } } and @media (max-width:500px) { .plan-cards { grid-template-columns: 1fr; } }. Keep the Enterprise card rightmost with the accent border.

Add a badge div inside .plan (the non-enterprise card): <div class="popular-badge">Most popular</div>. Style it: position: absolute; top: -11px; left: 20px; background: #f59e0b; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 12px; border-radius: 20px. The .plan div already has position: relative. Give the Pro card a yellow or amber accent border to differentiate it from the Enterprise indigo border.

Yes. Click "JSX" to download. The FAQ toggle needs "use client" since it uses onclick. Manage open FAQ state with useState<number|null>(null). Apply the open class conditionally: className={"faq-item" + (openIdx === i ? " open" : "")}. The rest of the component can be a Server Component in Next.js App Router — no client-side JavaScript for the static card and logo content.

Loading…