Corporate Property Management Pricing Section for Divi 5: Three-Tier Fees

Pricing Real Estate Corporate

A clean three-column pricing section for property management companies. Displays tenant-find, full management, and premium tiers with flat-rate fees and feature lists. Built for Divi 5.

Rate this element

Be the first to rate

Download this section, free

Divi 5 JSON, imports in seconds
Commercial license included
No account needed

Click to view the full page

Overview

The section opens with a centered header constrained to 720px maximum width. An h4 eyebrow reading "Management fees" is set in 13px IBM Plex Sans, uppercased with 1px letter-spacing and rendered in #4f5d73, a slate-blue that reads as secondary without disappearing. Below it the h2 headline sits at 44px on desktop (stepping to 36px on tablet and 30px on phone), with text-wrap: balance applied so short rewrites never produce orphaned final words. A 640px-wide subtitle paragraph at 18px with 1.6em line-height gives the introductory sentence room to breathe without running edge-to-edge.

The three pricing cards below use a true equal-thirds flex row with 24px column and row gaps and align-items: stretch, so all three cards match the height of the tallest one regardless of feature-list length. The middle "Full management" column breaks from the #f2f5fa light grey shared by the outer two: its background is #1c4a94, a deep corporate navy that draws the eye and signals the recommended tier without any graphic ornament. A small "Most popular" pill badge (12px, uppercase, IBM Plex Sans, #f2f5fa fill) sits inside a flex row alongside the tier name heading and reinforces the recommendation without competing with the price.

Inside each card the price is displayed as a 44px, 700-weight numeral baseline-aligned with a 15px unit label. This baseline pairing is a deliberate choice: the qualifier sits anchored to the bottom of the numeral rather than center-aligned, which reads more like financial copy and less like a generic SaaS card. Feature items below a 1px top-border divider use Font Awesome checkmark icons (fa-check, 15px) pinned to flex-start on each row, so multi-line feature labels never strand the icon in the middle of the text block. The outer two cards use a dark navy icon (#13233f) while the highlighted middle card uses white (#ffffff) to stay readable on the navy background.

Responsively, the card row switches to flex-wrap: wrap on tablet and flex-direction: column on phone, stacking all three cards single-file. Each column carries a flexType: 24_24 override at both smaller breakpoints for full-width display. Section padding steps from 96px to 68px to 44px across the three breakpoints, and price numerals scale from 44px to 40px to 36px, keeping the typographic hierarchy intact on every screen size.

What’s inside

Three equal-thirds Divi 5 Column modules in a flex row with `align-items: stretch`, so all cards reach the same height automatically
Middle card highlighted in #1c4a94 navy with a "Most popular" pill badge (Group module with background, padding, and uppercase Text module inside)
Baseline-aligned price display: large Text module (44px/700 weight) paired with a smaller unit-label Text module using flex `align-items: baseline`
Per-card feature lists built from Icon + Text module pairs inside individual flex-row Group modules, with icons pinned to flex-start
1px top-border divider on the feature list group, implemented as a CSS border on the Group module itself, not a separate divider element
Three distinct CTA Button modules: light-card buttons use transparent fill (ghost), the navy card button uses #f2f5fa fill to stay visible
Centered header block with h4 eyebrow, h2 headline with `text-wrap: balance`, and a max-width 640px subtitle Text module

Who it’s for

This layout fits property management companies, residential letting agencies, and real estate firms that charge percentage-based fees. It handles any service model with distinct tiers: a one-time letting fee alongside ongoing management options, or a volume discount for landlords with larger portfolios. Independent landlord advisors, build-to-rent operators, and estate agencies that want to publish a clean, no-extras fee schedule will all find the three-card structure directly usable. The corporate palette also suits commercial property managers and facilities management firms needing to present service tiers to business clients.

Customization tips

The palette change is two key values: swap #1c4a94 on the highlighted middle column background (and its matching border) to your brand primary, then update the checkmark icon color on that card from #ffffff to whatever stays readable on your chosen fill. The outer card backgrounds (#f2f5fa) and border tint (#d3dbe8) share a single light tone applied to both columns, so one color change covers both. IBM Plex Sans loads as a Google Font; replacing it with your own type across all heading and text modules takes roughly ten font-family field updates.

Keep tier names under 20 characters and one-line descriptions under 45 characters to avoid shifting card heights before the flex stretch compensates. Price numerals are plain Text modules, not headings, so update them directly in the text field. Each feature list contains three items per card. Adding a fourth is a matter of duplicating an existing icon-and-text Group row. If you remove one, reduce the padding-top: 24px on the feature group wrapper slightly so the space above the CTA button does not look hollow.

How to install this layout

Download the layout JSON file from this page.
Open the target page in the Divi 5 builder.
Open the portability panel (up/down arrows icon) and choose the Import tab.
Upload the JSON. Tick “replace existing content” only for full-page imports.
Check the page at desktop and mobile widths, then swap in your copy and images.

Full walkthrough with troubleshooting: How to Import a Divi 5 Layout.

Questions about Corporate Property Management Pricing Section for Divi 5: Three-Tier Fees

Do all three cards actually match height, or does the tallest one push the others out of alignment?

They match. The row uses `align-items: stretch` in its flex layout, so every column grows to fill the height of the tallest card. Inside each card, the feature list group also carries `flexGrow` and `flexShrink` sizing, which pushes it to fill remaining space and keeps the CTA button pinned to the bottom.

What Divi 5 modules make up a single pricing card?

Each column contains: one Heading module (tier name, h3), one Text module (short description), a Group with two baseline-aligned Text modules (price numeral and unit label), a flex-column Group holding the feature rows (each row is a Group with an Icon module and a Text module), and a Button module at the bottom.

Why does the middle card's CTA button look different from the outer two?

The outer card buttons use `rgba(255,255,255,0)` as their background, which is genuinely transparent and shows the light grey card surface behind the text. The navy card's button uses a #f2f5fa solid fill because a transparent button on that dark background would be illegible. Both are standard Divi 5 Button modules; only the background color value differs.

How does the "Most popular" badge work and how do I remove it?

It is a Group module with a #f2f5fa background, 12px border radius, and 6px/12px padding containing a single Text module styled at 12px uppercase. It sits inside a flex-row wrapper alongside the h3 tier heading. To remove it, delete that outer Group module; the heading will then sit alone at the top of the card.

How do the cards stack on mobile?

The row sets `flex-direction: column` on phone, and each column carries a `flexType: 24_24` override at both tablet and phone breakpoints, giving every card full width. The cards stack in source order: Find a tenant, then Full management, then Premium. The navy middle card remains visually distinct in the stack because its background color is unchanged.

Is the horizontal rule between the price and the feature list a separate module?

No. The feature list Group module has a CSS border applied only to its top edge (1px solid #d3dbe8 on the light cards, rgba(255,255,255,0.4) on the navy card) and a `padding-top: 24px` for visual breathing room. There is no dedicated Divider module, which keeps the card markup leaner and avoids adding an extra spacing element to adjust.

Which Divi version does this layout need?

Divi 5. The layout is generated natively for Divi 5 and validated against its real module structure before publication, so it imports clean into the current builder.

Can I use this layout on client websites?

Yes. Every download includes a commercial license covering unlimited sites you own or build for clients. Only reselling or redistributing the layout file itself is prohibited.