Organic Meal Box Pricing Section for Divi 5: Three-Tier Weekly Boxes

Pricing Restaurant Minimal

A minimal Divi 5 pricing section for organic meal kit subscriptions. Three-tier weekly box layout with feature lists, highlighted popular plan, and clean warm typography.

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 on a warm linen background (#f3eadc, 96px vertical padding desktop) with a centered two-row header: a small-caps DM Sans eyebrow at 13px and 1px letter-spacing sets the category context, then a Fraunces h2 at 44px -- constrained to 720px max-width with textWrap: balance -- delivers the headline with measured editorial weight. A single DM Sans paragraph at 18px and line-height 1.6em sits below inside a tighter 640px container, giving the subhead room without competing with the cards below.

The three pricing cards occupy a flex row with 24px column gap and alignItems: stretch, so every card reaches the same height regardless of content length. The two outer cards share a #fbf6ee parchment background, a 1px #dccdb4 border, 28px corner radius, and a warm box-shadow (8px vertical, 24px blur, rgba(34,26,16,0.18)). The middle card breaks the symmetry with a solid #41603a forest-green fill, white typography throughout, and a cream #fbf6ee badge labeled "Most popular" in 12px uppercase -- making it the visual anchor without a single decorative image.

Inside each card the internal flex column follows a consistent rhythm: a Fraunces h3 plan name at 22px, a DM Sans 15px subtitle, then a baseline-aligned price group where the dollar figure sits in Fraunces 44px weight 700 alongside a lighter "per week" label. A top-border divider in the card's own accent tone (#dccdb4 on the light cards, rgba(255,255,255,0.4) on the green one) separates the pricing block from three icon-text feature rows, each pairing a 15px Font Awesome checkmark with a DM Sans 16px feature line. A pill-shaped button (999px radius) closes every card; on the featured green card it inverts to the cream fill, on the outer two it renders with a transparent background and its own shadow -- a subtle distinction that keeps the hierarchy clear.

On mobile, section padding steps down to 44px, the headline drops to 30px, and price numerals scale to 36px. All three columns collapse to a full-width single stack via flexDirection: column on the row. The internal flex layout reflows rather than clips, so each card remains complete and scannable at any viewport width.

What’s inside

Three equal-height flex columns (1/3 each) held to the same row height via `alignItems: stretch`, collapsing to a single-column stack on phone
Center-aligned Fraunces h2 with `textWrap: balance` inside a 720px container, paired with a 13px uppercase DM Sans eyebrow and an 18px subtext paragraph
Middle "Four meals" card in solid forest green (`#41603a`) with a "Most popular" badge built from a nested group module with `#fbf6ee` background and 12px border-radius
Per-card baseline-aligned price group: Fraunces 44px bold dollar figure paired inline with a lighter DM Sans "per week" label using `alignItems: baseline`
Three Font Awesome checkmark icons (fa solid, weight 900, 15px) each paired with a DM Sans 16px text module inside row-direction group modules
Top-border divider inside each card separating the pricing block from the feature list -- `#dccdb4` on light cards, `rgba(255,255,255,0.4)` on the featured card
Pill-shaped "Choose box" button (999px radius, `preset1` box-shadow) per card, with inverted cream fill on the featured card and transparent fill on the outer two
Three-step responsive font scaling: h2 44px / 36px / 30px, price numerals 44px / 40px / 36px across desktop, tablet, and phone breakpoints

Who it’s for

Built for meal kit delivery services, organic farm box subscriptions, and CSA (community-supported agriculture) brands that need to present weekly plan tiers clearly. It also fits specialty grocery subscription boxes, nutritionist-led meal prep services, and health food startups launching a recurring delivery product. The three-tier structure and "Most popular" callout translate cleanly to any weekly subscription context -- coffee clubs, supplement boxes, or pet food deliveries -- where a visual hierarchy between entry, mid, and household tiers matters more than decorative imagery.

Customization tips

The palette is built on two neutral fills -- #f3eadc for the section and #fbf6ee for the outer cards -- plus one accent (#41603a for the featured card). Swapping all three to your brand tokens takes under ten minutes either in Divi 5's global presets or directly in each module's background decoration setting. Changing #f3eadc and #fbf6ee together preserves the depth relationship between the section background and the card surfaces.

Each card's feature list holds three rows comfortably at 16px line-height. Adding a fourth row pushes the button down, but flexGrow on the feature group keeps all three cards level as long as each card gets the same number of rows. Plan names (h3) fit cleanly up to around 15 characters before Fraunces begins to wrap at 22px. The "Most popular" badge is a plain text module inside a group -- replace the label with any short string up to roughly 14 characters without touching the container. No images are used; all visual interest comes from typography, color, and shadow.

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 Organic Meal Box Pricing Section for Divi 5: Three-Tier Weekly Boxes

How do the three cards stay the same height when they contain different amounts of content?

The row uses `alignItems: stretch` in Divi 5's flex layout settings, so each column grows to match the tallest card. The feature-list group inside each card also has `flexGrow` and `flexShrink` enabled, which fills remaining vertical space and keeps the button pinned to the bottom regardless of how many feature lines are present.

What modules make up each pricing card?

Each card is a Divi 5 Column containing heading modules (plan name), text modules (subtitle, price amount, "per week" label, and each feature line), icon modules (the checkmarks), nested group modules for flex layout control, and a button module. No custom HTML, shortcodes, or third-party plugins are used.

Does the "Most popular" badge require any extra plugin?

No. It is a group module with a background color (`#fbf6ee`) and 12px border-radius set in Divi 5's decoration options, wrapping a single text module. Everything is native Divi 5.

How does the layout behave at phone width?

The row switches to `flexDirection: column`, stacking all three cards vertically at full width. Section padding reduces from 96px to 44px, the h2 drops from 44px to 30px, and price numerals drop from 44px to 36px. Each card remains fully readable and the CTA button stays accessible without horizontal scrolling.

Can I add a fourth pricing tier?

Yes. Duplicate any column inside the second row and update the row's `columnStructure` in the advanced settings from `1_3,1_3,1_3` to four equal columns. The row's flex-wrap is already set to wrap on tablet, so narrower viewports will accommodate the extra card without breaking the layout.

The layout uses Fraunces and DM Sans -- do I need to configure anything to load them?

No extra configuration is needed. Divi 5 loads Google Fonts on demand when a font is selected in the module's font picker. Both Fraunces and DM Sans are available in the Divi 5 font library. If you switch to different typefaces, the size, weight, and letter-spacing values already set on each module carry over automatically.

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.