Brutalist Bike Repair Pricing Section for Divi 5: Two-Plan Highlight

Pricing E-commerce Bold

Bold two-column pricing section for a bike repair workshop. Displays Tune-up ($65) and Overhaul ($220) plans with feature lists and booking CTAs. Brutalist style with Archivo and Space Mono 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 layout splits into a clean two-column structure: a narrow left column carrying the editorial voice (an h4 eyebrow in Space Mono at 13px/700/uppercase, an h2 headline in Archivo Black at 40px with -1px tracking, and a short body paragraph in Public Sans at 17px/1.6em line-height), and a wider right column holding the two pricing cards in a CSS grid with a 24px gap. The column weights are intentional — the left is set to 8_24 flex and the right to 16_24, so the cards get the bulk of the horizontal real estate without the intro feeling squeezed.

The two cards use opposing palettes to create instant hierarchy without any badge or ribbon trick. The Tune-up card sits on #e8e4da (a warm off-white with a concrete undertone) with a 4px solid black border on all sides and black type throughout. The Overhaul card flips to a #000000 background with the same 4px border, reversing all text to #e8e4da. The price figures are set at 56px Archivo Bold with -1px tracking and 1em line-height — they read as numbers first, labels second, which is exactly the brutalist priority.

Each card follows a consistent internal stack: a Space Mono uppercase label at 13px/2px letter-spacing, an h3 plan name in Archivo at 28px, the price figure, a turnaround note in Public Sans 15px, a 4px top-border rule separating the feature list, then the feature rows (divi/icon + divi/text pairs at 15px icon / 16px body, flush-left), and finally a divi/button. The Tune-up button is ghost-style (transparent fill, 4px black stroke, black label), inverting to black-fill on hover. The Overhaul button is filled #e8e4da with a matching stroke, inverting to transparent on hover. Both use zero border-radius — sharp corners are structural to the brutalist aesthetic, not decorative.

On tablet the row wraps (flexWrap: wrap) and both columns expand to full width (24_24). On phone the layout stacks vertically (flexDirection: column) and the card grid collapses from two columns to one. Section padding steps down from 64px desktop to 48px tablet to 32px phone, keeping breathing room proportional across breakpoints.

What’s inside

Two-column section layout (8_24 intro + 16_24 cards) with a 56px column gap and vertical center-alignment
Two divi/group pricing cards in a 2-column CSS grid (24px gap), collapsing to a single column on phone
56px Archivo Bold price figures with -1px tracking and 1em line-height for maximum numeric impact
Five feature rows per card built from divi/icon (FontAwesome checkmark, 15px) + divi/text pairs in Public Sans 16px
Opposing card palettes: warm off-white (#e8e4da) card vs. full-black card — no badge, no ribbon, pure contrast
4px solid border on every card edge plus a matching 4px top-rule dividing the feature list from the price block
Two divi/button modules with inverse hover states: ghost-to-filled (Tune-up) and filled-to-ghost (Overhaul)
Three-tier responsive padding: 64px desktop / 48px tablet / 32px phone, with column stacking on mobile

Who it’s for

This section is a direct fit for independent bike repair shops, cycle-to-work scheme providers, and local cycling hubs that want a no-nonsense service menu. It also works well for any trade or workshop business offering two clearly tiered service levels — motor scooter repair, skateboard tuning, sports equipment servicing — where customers arrive already knowing roughly what they need and just want the price and the turnaround confirmed fast. The brutalist typography and zero-radius borders position it as honest and mechanical rather than salesy.

Customization tips

Swap the card backgrounds first: replace #e8e4da with any warm neutral (linen, slate, sage) and the black card will stay legible as long as you keep the #e8e4da text colour in sync. The Space Mono eyebrow labels and price figures inherit their colour from the card background's contrast pair, so update both text tokens together. Keep plan names under 12 characters so the h3 stays on one line at 28px. Price figures are plain divi/text paragraphs — edit the $65 and $220 strings directly. Each feature list accepts up to six icon-text rows before the card height diverges noticeably between the two; if one plan has more items than the other, add a short filler line to balance. Button labels should stay under 20 characters to avoid wrapping inside the 28px padding envelope.

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 Brutalist Bike Repair Pricing Section for Divi 5: Two-Plan Highlight

How does the layout stack on mobile?

On phone the outer row switches to `flexDirection: column`, so the intro text appears above the cards. The card grid also collapses from two columns to one, so both cards sit full-width and stacked. Section padding drops to 32px top and bottom to avoid excess whitespace on small screens.

Which modules make up each pricing card?

Each card is a divi/group containing: a Space Mono label (divi/text), an Archivo h3 plan name (divi/heading), a large price figure (divi/text), a turnaround note (divi/text), a nested divi/group for the feature list (icon-text pairs), and a divi/button. There are no third-party or premium modules — everything uses native Divi 5 blocks.

What is the easiest way to highlight one plan as recommended?

The black card is already the stronger visual signal. To reinforce it, add a short Space Mono eyebrow label like 'Most popular' inside the black card's opening divi/text — it already uses the `#e8e4da` label style. You can also increase the Overhaul card's border width from 4px to 6px for extra punch without touching the palette.

Can I add a background image or texture to the section?

The section background is set to flat white (#ffffff). You can add an image or gradient via the section's background settings in Divi 5. Keep it very light or very desaturated — the cards rely on the contrast between their own fills and the section background, so a busy texture will reduce legibility.

How many feature rows can each card hold before the layout breaks?

The feature list group uses flexGrow/flexShrink sizing, so it expands to fit additional rows. In practice, more than seven rows per card causes the cards to grow tall enough that the two-column grid looks lopsided if the plans have different item counts. Match the row count between plans, or keep both under six items.

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.