Material — Free HTML Pricing Table UI Kit
Material is a free pricing table UI kit, not a full website. Its single index.html page shows one pricing table design in eight colour schemes: Green Sea, Green Blue, Blue, Red, Wisteria, Midnight Blue, Orange and Pumpkin. Each table has four plans with a monthly price, so you can pick a colour and copy the block into a site or landing page you already have. The prices and plan text are placeholders. There is no CSS framework: the look comes from its own style.css and skin.css, and it does not use jQuery.
Key features
- One pricing table design in eight colour variants
- Four plans per table, each with a monthly price
- Colours: Green Sea, Green Blue, Blue, Red, Wisteria, Midnight Blue, Orange, Pumpkin
- All variants shown together on a single demo page
- Styling in two stylesheets, style.css and skin.css
- No CSS framework and no jQuery to load
Best for
- Adding a pricing section to an existing site
- SaaS or subscription pages with several plan tiers
- Comparing colour options for a pricing block
At a glance
- Stack: no CSS framework; its own stylesheets (style.css, skin.css), no jQuery
- 1 page: index.html, a UI kit demo rather than a full website
- 8 colour variants with 4 plans each
- Placeholder prices and plan text to replace
- Licence: free for personal and commercial use, including client work; attribution optional. Full terms: uicookies.com/license
How to use it
Download the zip, unzip it and open index.html in a browser to compare the eight colour variants. Copy the markup for the variant you want into your own page and bring style.css and skin.css with it, or merge the rules you need into your existing stylesheet. Replace the plan names, prices and feature lines, add links to your sign-up or checkout page, and upload the result to any static host.
Frequently asked questions
Can I use Material for commercial or client projects?
Yes. Material is free for personal and commercial use, including client work, and there are no paid tiers. Attribution is optional but always welcome, so you can keep or remove the footer credit. Full terms: uicookies.com/license
Does Material need Bootstrap or jQuery?
No. It uses no CSS framework and no jQuery; the styling comes from style.css and skin.css. That makes it straightforward to add to a site built on any framework, though you may need to rename classes that clash with your own.
Is Material a complete website template?
No. It is a UI kit with one page of pricing tables in eight colours, each with four plans. Use it as the pricing section inside a larger site or landing page.
Can I change the colours and prices?
Yes. The prices and plan text are placeholders in the HTML, and the colour schemes are set in the stylesheets, so you can edit an existing scheme or add your own.
Well,
Just finished my website with this!