18 CSS Product Cards06 / 18

Pure CSSMIT licensed

Minimalist eCommerce Card

Airy, borderless, type-led — massive whitespace, light-weight type and a whisper-quiet underline CTA. The high-end fashion, jewellery and lifestyle aesthetic upmarket brands search for when 'card' shouldn't look like a box.

Published

Live Demo
Try it

The code

<article class="cpc-06">
  <div class="cpc-06__card">
    <div class="cpc-06__img" role="img" aria-label="Product photo: Fine gold hoop earrings"><span>product shot</span></div>
    <div class="cpc-06__body">
      <h3 class="cpc-06__name">Fine Gold Hoops</h3>
      <p class="cpc-06__price">$320</p>
      <a class="cpc-06__cta" href="#">View product</a>
    </div>
  </div>
</article>
.cpc-06,
.cpc-06 *,
.cpc-06 *::before,
.cpc-06 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cpc-06 ::selection {
  background: #111;
  color: #fff;
}

.cpc-06 {
  --ink: #1a1a1a;
  --muted: #8a8378;
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
  background: #faf9f6;
}

.cpc-06__card {
  width: 320px;
  padding: 20px;
  border-radius: 6px;
  background: transparent;
  transition: box-shadow .4s,background .4s;
}

.cpc-06__card:hover {
  background: #fff;
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.28);
}

.cpc-06__img {
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg,#f0ece4,#e6ded1);
}

.cpc-06__img {
  background-image: url("https://loremflickr.com/600/600/earrings,jewelry?lock=16");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cpc-06__img span {
  display: none;
}

.cpc-06__body {
  padding: 22px 4px 6px;
  text-align: center;
}

.cpc-06__name {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink);
}

.cpc-06__price {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--muted);
}

.cpc-06__cta {
  display: inline-block;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 3px;
  background: linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition: background-size .4s;
}

.cpc-06__cta:hover,
.cpc-06__cta:focus-visible {
  background-size: 100% 1px;
  outline: none;
}

.cpc-06__cta:focus-visible {
  background-size: 100% 1px;
  outline: 1px dotted var(--ink);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .cpc-06__card,
    .cpc-06__cta {
    transition: none;
  }
}
/* No JavaScript — an animated background-size underline is the only interaction. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Product Card from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Minimalist eCommerce Card
Source: https://codefronts.com/components/css-product-cards/minimalist-ecommerce-card/

Airy, borderless, type-led — massive whitespace, light-weight type and a whisper-quiet underline CTA. The high-end fashion, jewellery and lifestyle aesthetic upmarket brands search for when 'card' shouldn't look like a box.
## HTML
```html
<article class="cpc-06">
  <div class="cpc-06__card">
    <div class="cpc-06__img" role="img" aria-label="Product photo: Fine gold hoop earrings"><span>product shot</span></div>
    <div class="cpc-06__body">
      <h3 class="cpc-06__name">Fine Gold Hoops</h3>
      <p class="cpc-06__price">$320</p>
      <a class="cpc-06__cta" href="#">View product</a>
    </div>
  </div>
</article>
```
## CSS
```css
.cpc-06,
.cpc-06 *,
.cpc-06 *::before,
.cpc-06 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cpc-06 ::selection {
  background: #111;
  color: #fff;
}

.cpc-06 {
  --ink: #1a1a1a;
  --muted: #8a8378;
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
  background: #faf9f6;
}

.cpc-06__card {
  width: 320px;
  padding: 20px;
  border-radius: 6px;
  background: transparent;
  transition: box-shadow .4s,background .4s;
}

.cpc-06__card:hover {
  background: #fff;
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.28);
}

.cpc-06__img {
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg,#f0ece4,#e6ded1);
}

.cpc-06__img {
  background-image: url("https://loremflickr.com/600/600/earrings,jewelry?lock=16");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cpc-06__img span {
  display: none;
}

.cpc-06__body {
  padding: 22px 4px 6px;
  text-align: center;
}

.cpc-06__name {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink);
}

.cpc-06__price {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--muted);
}

.cpc-06__cta {
  display: inline-block;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 3px;
  background: linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition: background-size .4s;
}

.cpc-06__cta:hover,
.cpc-06__cta:focus-visible {
  background-size: 100% 1px;
  outline: none;
}

.cpc-06__cta:focus-visible {
  background-size: 100% 1px;
  outline: 1px dotted var(--ink);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .cpc-06__card,
    .cpc-06__cta {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — an animated background-size underline is the only interaction. */
```

How this works

Restraint is the technique: no border, no shadow at rest, a plain background-tone media area, and generous padding. Hierarchy comes from weight and spacing — a light product name, a quiet price, and a text CTA that reveals its underline on hover via an animated background-size gradient rather than a heavy button.

A barely-there lift (a soft shadow fading in) on hover is the only chrome, so the card feels like editorial layout, not UI.

Make it yours

  • Dial the whitespace with the media aspect-ratio and body padding — more space reads more premium.
  • Keep type light (300–500 weight) and let letter-spacing carry the luxury feel.
  • Swap the underline-reveal CTA for a small arrow that slides on hover.
  • Use a muted, low-chroma palette; saturated accents break the minimalist read.

Gotchas — read before shipping

  • Minimal still needs contrast — don't let the light type drop below accessible contrast on the pale background.
  • A text-only CTA must still be a real <a>/<button> with a clear focus state, not just underlined text.
  • Resist adding badges and shadows 'to help' — the whole value here is what you leave out.

Browser support

ChromeSafariFirefoxEdge
80+13+80+80+

Animated background-size underline + subtle shadow — universally supported.

Techniques used in this demo

aspect-ratioMDN ↗role="" (ARIA)MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →