Cards – 22 Free Bootstrap & CSS Card Templates
Cards is a pack of 22 card designs, each a single self-contained HTML file with the CSS inline. Ten are the classic shapes — profile, blog, product, pricing, flip, glass, stats, testimonial, hover reveal and horizontal. The other twelve are the cards a real product ships: event, notification, file upload, course progress, job listing, weather, media player, invoice, kanban task, an expanding card, a loading skeleton and a bento grid.
At a glance
- 22 designs, one folder each, single
index.htmlper design - 21 of 22 are pure CSS — even the expanding card, which uses a native
<details> - No framework, no build step, no icon library; the file-type flags, progress ring and weather marks are all drawn in CSS or inline SVG
- Icon-only controls carry accessible names; the skeleton slows rather than freezes under
prefers-reduced-motion - Every design checked at 380px for horizontal overflow
How to use
Open the design you want, copy its markup and the rules from the <style> block, and paste both into your project. Each design is self-contained — nothing depends on the other 21. On a Bootstrap project, keep the outer .card and .card-body and paste the inner markup inside them.
FAQ
Are these card templates free?
Yes — free for personal and commercial projects, including client work.
Do they require Bootstrap?
No. They are plain HTML and CSS on their own class names, so they work with Bootstrap, Tailwind or nothing at all.
