About this block

Side By Side Cards opens with a centered heading and a short supporting sentence, then drops into a two-column grid of matched cards. Each card carries a title, a one-sentence description, a checklist of three items marked with check icons, and a full-width button. The left card uses a filled primary button and the right card uses an outlined button, giving each path a distinct visual weight while the cards themselves stay visually balanced.

Every text element in both cards is independent, so you can rewrite the titles, descriptions, and checklist points without touching the layout. The button variants are the only structural difference between the two cards. You can also add or remove checklist items on either side freely.

When to use

Reach for this block when you need to present two distinct conversion paths side by side rather than hiding one behind a secondary action. For a product analytics SaaS it works well at the bottom of the pricing or features section: one card captures self-serve users ready to start a trial and the other routes enterprise buyers toward a sales conversation. It outperforms a single centered CTA when your audience splits clearly between those two intents, because each path gets equal screen space and its own supporting copy.

A natural flow around it on a Marketing Pro page:

Before

• Pricing to give readers context on tiers before they choose a path
• Testimonials to build confidence just before the decision moment

After

• FAQs to catch hesitation from readers who did not commit on first pass
• With Stats if you want a second, lighter CTA lower on the page backed by proof numbers

What you can customize

Both cards share the same structure, so changes to one are easy to mirror in the other. A few directions to consider:

• Card titles and descriptions. Rewrite them to match your actual signup and sales flows; the layout holds at any copy length.
• Checklist points. Swap in the three or four points that matter most to each audience segment, such as trial length, seat limits, or support tier.
• Button labels. The CTA text is the clearest signal of what happens next, so write it as an action rather than a category name.

Tip: keep the checklist points parallel in structure across both cards so readers can scan and compare at a glance.