Playful Dog Daycare Pricing Section for Divi 5: Two-Plan Highlight

Pricing Fitness Playful

A fun, two-plan pricing section for dog daycare websites built in Divi 5. Features a $38 drop-in day pass and a $520 monthly pack with bold typography, rounded cards, and playful purple branding.

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 layout divides into two zones on desktop: a narrow editorial column on the left (set at 8/24 flex units, roughly one-third of the row) and a wider pricing area on the right (16/24 flex units). The left column carries the section's contextual weight: an eyebrow label in Fredoka at 13px with 1px letter-spacing, an h2 headline at 40px with textWrap: balance applied, and a single supporting line in Nunito at 17px. That compression of meaning into three short lines leaves the cards room to breathe across a 56px column gap.

The right column is a CSS grid with two columns on desktop and one on mobile, 24px gaps between cards. Each pricing card is a Group module with 36px border-radius on all corners, a 2px solid border in deep navy (#2b2457), and a hard non-blurred box shadow offset 6px right and 6px down. Blur is set to 0px, which gives the cards a punchy cut-out quality rather than the soft glow of a typical drop shadow. The contrast between the two cards does the heavy lifting: the Day Pass card sits on warm cream (#fff7ec) with navy text throughout, while the Monthly Pack card inverts that palette entirely, using the deep navy as its fill with cream text. The dark card reads immediately as the featured option; the small "Best value" label in 13px Fredoka at the top reinforces the hierarchy without needing a badge module.

Fredoka handles all display text: the eyebrow labels, card plan names as h3 at 28px, and the large price figures at 56px with -1px letter-spacing to keep tight rendering at that scale. Nunito takes over for the per-unit descriptor lines and all feature list copy, maintaining 1.5 to 1.6em line-height throughout. Inside each card, the feature list is separated from the price block by a 3px top border that matches the card's own color scheme. Each feature row is a nested Group containing a native Divi Icon module (Font Awesome checkmark at 15px) and a Text module, both set to flex-start so multi-line items keep the icon anchored to the first line.

Section padding steps from 88px on desktop to 60px on tablet and 40px on phone. The row switches from nowrap to wrap on tablet and to a column direction on phone, while the card grid drops from two columns to one so each card fills the full container width at small screen sizes. Card padding follows the same staircase: 44px vertical and 40px horizontal on desktop, stepping down to 32px vertical and 24px horizontal at the smallest breakpoint.

What’s inside

Asymmetric two-column row with 8/24 editorial and 16/24 pricing columns, 56px gap, and vertical center alignment
CSS grid pricing container: 2-column desktop, 1-column phone with 24px column and row gaps
Two Group modules as pricing cards, each with 36px corner radius, 2px solid border, and a hard 6px/6px flat box shadow (0px blur)
Contrasting card palette: warm cream (#fff7ec) for the entry plan, deep navy (#2b2457) fill for the featured plan
Dual typeface system: Fredoka for labels, headings, and 56px price figures; Nunito for body copy and feature lists
Feature rows built from native Divi Icon and Text modules in flex rows, separated from the price block by a 3px top border per card
Pill-shaped Button modules (999px radius) with inverted fill/ghost hover states, one per card with matching hard shadow
Three-breakpoint responsive padding staircase on both the section wrapper and each individual card

Who it’s for

This pricing section is a natural fit for any local service business that sells time in two formats: a single-session rate and a bundled pack. Dog daycares, boarding kennels, and grooming studios are the obvious match, but the structure works equally well for fitness studios offering day passes and monthly memberships, swimming pools, climbing gyms, music or art class studios, and childcare providers with daily and weekly booking options. The rounded Fredoka typeface and warm cream-and-navy palette signal a friendly, approachable brand, which suits any pet care, wellness, or community-oriented service business over a corporate or clinical one.

Customization tips

The palette is controlled by two hex values used consistently across borders, shadows, backgrounds, and typography: #2b2457 (deep navy) and #fff7ec (warm cream). Replacing both globally recolors the entire section without needing to touch individual modules.

Fredoka is applied at several distinct levels: the eyebrow labels, card plan names, and price figures are each separate Text or Heading modules, so a font swap requires updating them individually. Any rounded Google Font (Poppins, Outfit, or Nunito Sans) maintains the friendly register.

The price figures are plain Text modules at 56px, edited directly in the builder. Feature lists sit comfortably at four to six items per card; beyond six, the cards grow taller than the editorial column on desktop and the visual balance shifts noticeably. Each button's hover state is configured independently per card, so update both when changing button colors to keep them in sync.

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 Playful Dog Daycare Pricing Section for Divi 5: Two-Plan Highlight

How do the two pricing cards behave on mobile?

The row wraps to a single column on phone screens, and the CSS grid inside the right column drops from two columns to one. Each card stacks full-width, one above the other, with the same 24px gap the grid uses on desktop. Card padding steps down to 32px vertical and 24px horizontal at that breakpoint.

What modules make up a single pricing card?

Each card is a Group module containing: a Text module for the plan label, a Heading module for the plan name, a Text module for the large price figure, a Text module for the per-unit line, a nested Group for the feature list (with one flex-row Group per feature, each holding an Icon module and a Text module), and one Button module at the bottom.

Can I move the featured highlight from the right card to the left?

Yes. The dark treatment on the Monthly Pack card is just its Group background color set to #2b2457. Swap the background and text colors between the two cards to shift visual emphasis. The button on the dark card is a solid fill; the one on the light card is ghost-outline: remember to swap those too so the buttons stay legible against their new backgrounds.

Does this layout include any photos or imagery?

No. There are no Image modules or background photos anywhere in the section. Visual interest comes entirely from typography scale, card color contrast, and the flat offset box shadows. Adding a background image to the section or a small logo mark inside a card is straightforward but the layout reads as complete without one.

What should I edit first to make this fit my business?

Start with the price figures ($38 and $520, both plain Text modules) and the feature list copy inside each card. Those carry the most information and will make the section feel like yours immediately. Then update the h2 headline on the left column and the two button labels before touching any colors or fonts.

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.