Modern SaaS Pricing: Metal Tier Cards

Metal Tier Cards lays out three plans named Bronze, Silver and Gold. A heading row opens it, and below it three Surface cards stand side by side, each topped by a colored band with a medal, the plan name and a two line tag.

Under the band each card gives the price, the seats it includes, nine check rows and one pill. The lists build on each other, so Silver opens with "Everything in Bronze" and Gold with "Everything in Silver", and the middle plan carries the only primary pill.

When to use

Use it for a product priced by team size with a clear step up between plans, such as a reporting tool, a design tool or a developer platform. The bands are the one place the section uses color, so the tiers read at a glance while the rest of the page stays near monochrome.

A natural flow around it on a Modern SaaS page:

Before

• Feature Sections that show what every plan includes
• Testimonials to back the price with proof

After

• FAQs to answer billing and seat questions
• CTAs that offer a trial one more time

What you can customize

• Plans. Edit the plans array: name, tag, price, seats, features, pill label and whether it is the featured plan. Keep each tag to two lines and each list to the same number of rows.
• Bands. Each band is a glow and a 160 degree gradient passed to band. Keep the middle stop dark enough for white text, or the tag drops below AA contrast.
• Layout. The cards sit in a row from lg and stack below it. Their pills align at the foot of each card whatever the list length.

Tip: put the plan most teams should pick in the middle and give it the primary pill, so the eye lands there first.