Bold Festival Ticket Pricing Section for Divi 5: Three-Tier Ticket Types

Pricing Events Bold

Three-tier festival ticket pricing layout for Divi 5. Bold yellow background, feature checklists, and clear CTAs for Day Pass, Weekend, and VIP tiers. Ready to drop into any event website.

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 sits on a saturated #ffd60a yellow field, an intentional palette decision that signals festival energy before a single word is read. Eighty pixels of vertical padding on desktop (stepping to 56px on tablet and 36px on phone) gives the section room without sprawl. The header zone layers two centered groups: a small-caps "TICKETS" eyebrow in Work Sans 700 at 13px with 2px letter-spacing, then an Unbounded 800 headline at 44px capped at 720px wide, and below it a 640px-wide subtext paragraph in Work Sans 18px carrying the scarcity nudge. Both constrained widths are center-aligned so the three cards below them have a clean visual axis to hang from.

The card row is three equal columns with a 24px gap and alignItems: stretch, which forces all three cards to share the same bottom edge regardless of how many feature bullets each tier carries. Every card has a 32px border-radius and a 3px solid border, giving each panel a graphic, sticker-like silhouette. The middle Weekend card breaks from the white flanks with an electric blue (#2438ff) column fill and fully white text, including a "Most popular" badge: a white-background Group with uppercase Work Sans 700 at 12px and 2px letter-spacing, nested inside the tier header.

Inside each card the feature list sits in a flexGrow/flexShrink Group that absorbs available column height, so the CTA button always lands at the card bottom regardless of bullet count. Each feature row pairs a 15px FontAwesome solid checkmark icon with a 16px Work Sans text node inside a flex row with alignItems: flex-start, keeping multi-line items from drifting. The Day Pass and VIP buttons are ghost outline with a yellow-text hover on dark fill; the Weekend button is solid white that inverts to dark on hover, giving each card a complementary hover state that stays on-palette.

On tablet the row wraps with each column expanding to full width; on phone the row stacks as a flex column. Price numerals step from 44px to 40px to 36px and the headline from 44px to 36px to 30px, both tuned as per-breakpoint overrides in the module font decoration, so the large figures stay legible without overflowing narrow viewports.

What’s inside

Full-width header row with a center-aligned small-caps Heading eyebrow (Work Sans 700, 13px), Unbounded 800 H2 at 44px, and a scarcity-copy Text module below, both constrained via maxWidth Groups
Three equal-column pricing cards in a stretch-aligned row (32px border-radius, 3px solid border) that holds a consistent bottom edge across all tiers without fixed heights
Featured middle card with an electric-blue (`#2438ff`) column background, full white type, and a nested white pill badge Group carrying the "Most popular" label
Per-card feature lists built from individual Icon + Text module pairs inside flex Groups, with `alignItems: flex-start` so multi-line bullets stay visually anchored
flexGrow feature region in each card that pushes the CTA Button module to the column bottom regardless of how many bullets the tier contains
Three distinct Button hover states: ghost-to-dark with yellow text (Day Pass and VIP), solid-white-to-dark-with-white-text (Weekend), all set via hover decoration on background and font color
Full responsive cascade: desktop three-column nowrap, tablet full-width wrapping, phone single stacked column with reduced section padding at each breakpoint

Who it’s for

The layout fits any ticketed outdoor event with tiered access: music festivals, cultural weekenders, food and arts fairs, comedy or film festivals, and multi-day sports events. Conference organizers selling day passes, full-access passes, and VIP workshops will find the structure equally usable. The yellow-and-blue palette skews energetic and modern, making it natural for youth-oriented lineups, summer brand-sponsored experiences, and any event brand that wants to look more like a poster than a brochure. Agencies building event sites can adapt the card structure to almost any three-option pricing scenario where a middle featured tier needs strong visual lift over its flanks.

Customization tips

The fastest change is the section background color: the yellow #ffd60a is set on the Section decoration, so swapping it to your brand color immediately shifts the canvas. The card borders and dark typography hold contrast across most light backgrounds without adjustment. The featured Weekend card's blue #2438ff is an independent column fill, so you can update it to match your accent color without touching the white flanks.

Keep tier name headlines under 20 characters to hold a single line in Unbounded at 22px. Feature bullet copy runs at 16px Work Sans with no enforced line limit, but three items per card maintains visual parity between all three panels. If one tier genuinely needs four bullets, mirror that count across the others so the flexGrow region distributes height evenly. Price numerals use Unbounded at 44px. If your currency or pricing string is longer than four characters, verify at the tablet breakpoint (40px) that nothing overflows the card padding. Button labels sit inside 32px horizontal padding, so labels up to around 22 characters fit without forcing the card wider.

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 Bold Festival Ticket Pricing Section for Divi 5: Three-Tier Ticket Types

How does the layout keep all three CTA buttons aligned at the same height?

Each card's feature list sits inside a Group module set to `flexGrow` and `flexShrink`. That group expands to fill whatever height is left after the tier name, price, and top-border divider, then the Button sits below it as a fixed element. Adding or removing a feature bullet from one card shifts that card's grow region and leaves button alignment intact across all three.

What happens to the three columns on mobile?

The row switches from `flexDirection: row / flexWrap: nowrap` on desktop to `flexDirection: column` on phone, and each column expands to full width (24/24 flex). Section padding drops to 36px top and bottom. Price numerals step down to 36px and the headline to 30px via phone-breakpoint font overrides already set in the layout.

Which module creates the 'Most popular' badge on the Weekend card?

It is a Group module with a white background and 12px border-radius containing a single Text module set to uppercase Work Sans 700, 12px, 2px letter-spacing. It sits nested inside the Weekend column's header Group. To move the badge to a different tier, duplicate that Group into your target column and update the background and text colors to match.

Can I change the checkmark icons to a different icon or symbol?

Each checkmark is a standalone Divi 5 Icon module. Open any Icon module, go to the Content tab, and change the icon character or type there. The color is set per card: `#0c0c14` on the white Day Pass and VIP cards, `#ffffff` on the blue Weekend card. If you add perks to a tier, duplicate an existing icon-text row Group and swap the text.

The section uses Unbounded and Work Sans. Do I need to install those fonts first?

Both are Google Fonts and Divi 5 loads them automatically when the layout is first opened in the builder. If your site already has a display typeface you prefer for headings, update the `family` value in each Heading module and in the price Text modules. The weight, size, and spacing settings carry over to whichever typeface you choose.

What is the easiest way to repurpose this for a non-festival context, such as a conference?

Start by replacing the three tier names (Day pass, Weekend, VIP) and the headline. The scarcity subtext below the headline is a single Text module, so swap or delete that line if batch pricing does not apply to your event. Then update the feature bullets inside each card's flex Group and adjust the button labels. The card structure, colors, and responsive behavior require no structural changes for a three-tier conference pass setup.

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.