7 Pure CSS1 with JSPublished 2026-10-03Free · no sign-up
Card layouts for the places cards actually get used: a product card for a store, a pricing plan, a team profile, a blog teaser, a dashboard metric, a flip card and a dismissible notice. Each one is plain HTML and CSS, built to sit in a grid without breaking when the text gets longer.
An e-commerce product card with an image area, a sale badge, price with the old price struck through, and a full-width add-to-cart button. The image keeps a fixed aspect ratio so the grid does not jump while photos load, and the whole card lifts slightly on hover.
A team or author card with an initials avatar, name, role, a short bio and two actions. The avatar uses initials on a gradient instead of a photo, so it works before anyone uploads a picture. Text sizes follow a clear hierarchy: name first, role second, bio last.
View code
<article class="ttc-profile">
<div class="ttc-avatar" aria-hidden="true">AK</div>
<h3>Ayesha Khan</h3>
<p class="ttc-role">Product Designer</p>
<p class="ttc-bio">Designs checkout flows that people finish. Ten years in ecommerce, mostly Shopify.</p>
<div class="ttc-actions">
<a href="#" class="is-primary">Message</a>
<a href="#">View work</a>
</div>
</article>
A highlighted pricing card with a 'Most popular' ribbon, the price set large with the billing period small beside it, a feature list with check marks and a full-width button. The check marks are drawn with CSS, so there are no icon files to load.
A card with a frosted-glass surface: a translucent fill, a background blur and a thin light border. It only reads as glass over a colourful background, so the demo includes one. A solid fallback colour keeps the text readable in browsers without backdrop-filter.
View code
<div class="ttc-glass-stage">
<article class="ttc-glass">
<p class="ttc-glass-k">Monthly revenue</p>
<p class="ttc-glass-v">$48,210</p>
<p class="ttc-glass-d">+12.4% vs last month</p>
</article>
</div>
An article teaser with a cover area, category, title, a two-line excerpt and author line. The whole card is clickable through a stretched link on the title, which keeps one link per card for screen readers instead of wrapping the entire card in an anchor.
View code
<article class="ttc-post">
<div class="ttc-post-cover"></div>
<div class="ttc-post-body">
<p class="ttc-post-cat">Guides</p>
<h3><a href="#">How to cut checkout steps without losing data</a></h3>
<p class="ttc-post-ex">Every extra field costs you buyers. Here is how to keep the data you need while asking for less of it up front.</p>
<p class="ttc-post-meta">Taimur · 6 min read</p>
</div>
</article>
A dashboard metric card: label, big number, change pill and a tiny trend line. The sparkline is an inline SVG polyline, so it scales crisply and needs no chart library. The change pill pairs colour with an arrow, so the direction is clear without relying on colour alone.
A card that turns over on hover or keyboard focus to show a second face, useful for flashcards, team bios and before-and-after reveals. It is a button, so it can be reached with Tab. Visitors who prefer reduced motion get a fade between the faces instead of a 3D turn.
View code
<button class="ttc-flip" type="button" aria-label="Flip card: what does CSS stand for?">
<span class="ttc-flip-in">
<span class="ttc-face">What does CSS stand for?</span>
<span class="ttc-face ttc-back">Cascading Style Sheets</span>
</span>
</button>
An in-app notice with an icon, title, message, an action link and a close button. Closing it plays a short slide-and-fade, then removes it from the page so screen readers no longer reach it. The close button has a real label and a 40px hit area.
View code
<div class="ttc-note" role="status">
<span class="ttc-note-ic" aria-hidden="true">i</span>
<div class="ttc-note-txt">
<p class="ttc-note-t">New invoice ready</p>
<p class="ttc-note-m">Invoice #1042 for March is ready to download.</p>
<a href="#">View invoice</a>
</div>
<button type="button" class="ttc-note-x" aria-label="Dismiss notification">×</button>
</div>
document.querySelectorAll('.ttc-note-x').forEach(function (x) {
x.addEventListener('click', function () {
var card = x.closest('.ttc-note');
card.classList.add('is-leaving');
setTimeout(function () { card.remove(); }, 260);
});
});
About these CSS Cards
Designing cards that survive real content
Demo text is always the perfect length; real product names and blog titles are not. Give images a fixed aspect-ratio so the grid does not jump while they load, clamp long excerpts to a set number of lines, and let titles wrap instead of truncating the words people need to read.
Making a whole card clickable
Wrapping an entire card in a link makes screen readers read everything inside it as one long link. The blog card here uses a better pattern: a single link on the title, stretched over the card with a pseudo-element. The whole card is clickable, but there is still only one link with a short, clear name.
Glass, shadows and depth
Depth comes from contrast between the card and the page. On a light page a soft, wide shadow is enough. On a dark page a thin light border reads better than a shadow. Frosted glass only works over a colourful background, and it needs a solid fallback colour for browsers without backdrop-filter so the text stays readable.
How to use these demos
Each card is scoped with a .ttc- class prefix and has a fixed demo width. In a real layout, remove the width and let a CSS grid decide it, for example grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)). Open any card in the editor to try your own text and colours.
Frequently asked questions
Can I use these cards in a Shopify or WordPress theme?
Yes. Paste the CSS into your theme stylesheet and the HTML into a section or block. Rename the class prefix if it clashes with your theme.
Why do some cards use a light background?
Cards are shown on the background they were designed for. Product and blog cards usually live on light store and blog pages, so their demos use one.
Do the cards need JavaScript?
Only the notification card, for its close button. Everything else, including the flip card, is CSS only.