Open demo

CSS code

HTML 
<div><span class="lbl">Dark shop cards with an accent glow</span>
<ul class="dk">
  <li><article class="dk-card">
    <div class="dk-media">
      <img src="https://images.unsplash.com/photo-1551028719-00167b16eac5?auto=format&fit=crop&w=600&q=70" alt="Black leather biker jacket with silver zips laid on white sheets" width="600" height="750" loading="lazy">
      <span class="dk-badge">Limited</span>
      <button type="button" class="dk-wish" aria-pressed="false" aria-label="Save Moto Leather Jacket to wishlist"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
    </div>
    <div class="dk-body">
      <p class="dk-cat">Outerwear</p>
      <h3 class="dk-title"><a href="#">Moto Leather Jacket</a></h3>
      <p class="dk-rating"><span class="dk-stars" style="--r:4.9" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.9 out of 5, 318 reviews</span><span aria-hidden="true">4.9 (318)</span></p>
      <div class="dk-row">
        <p class="dk-price">$420</p>
        <button type="button" class="dk-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg>Add<span class="sr-only"> Moto Leather Jacket to cart</span></button>
      </div>
    </div>
  </article></li>
  <li><article class="dk-card">
    <div class="dk-media">
      <img src="https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=600&q=70" alt="Close-up of dark roasted coffee beans" width="600" height="750" loading="lazy">
      <button type="button" class="dk-wish" aria-pressed="true" aria-label="Save Huila Single-Origin Beans to wishlist"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
    </div>
    <div class="dk-body">
      <p class="dk-cat">Coffee · 250 g</p>
      <h3 class="dk-title"><a href="#">Huila Single-Origin Beans</a></h3>
      <p class="dk-rating"><span class="dk-stars" style="--r:4.7" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.7 out of 5, 1,026 reviews</span><span aria-hidden="true">4.7 (1,026)</span></p>
      <div class="dk-row">
        <p class="dk-price">$17</p>
        <button type="button" class="dk-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg>Add<span class="sr-only"> Huila Single-Origin Beans to cart</span></button>
      </div>
    </div>
  </article></li>
  <li><article class="dk-card">
    <div class="dk-media">
      <img src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?auto=format&fit=crop&w=600&q=70" alt="Amber glass dropper bottle on a wooden stand with soft leaf shadows" width="600" height="750" loading="lazy">
      <span class="dk-badge">−15%</span>
      <button type="button" class="dk-wish" aria-pressed="false" aria-label="Save Cedar and Vetiver Beard Oil to wishlist"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
    </div>
    <div class="dk-body">
      <p class="dk-cat">Grooming · 30 ml</p>
      <h3 class="dk-title"><a href="#">Cedar and Vetiver Beard Oil</a></h3>
      <p class="dk-rating"><span class="dk-stars" style="--r:4.5" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.5 out of 5, 204 reviews</span><span aria-hidden="true">4.5 (204)</span></p>
      <div class="dk-row">
        <p class="dk-price"><span class="sr-only">Sale price</span>$28 <s><span class="sr-only">Was</span> $33</s></p>
        <button type="button" class="dk-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg>Add<span class="sr-only"> Cedar and Vetiver Beard Oil to cart</span></button>
      </div>
    </div>
  </article></li>
</ul></div>

<div><span class="lbl">Featured product spotlight</span>
<article class="dk-feature">
  <div class="dk-media"><img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=900&q=70" alt="Black wireless over-ear headphones on a bright yellow background" width="900" height="675" loading="lazy"></div>
  <div class="dk-body">
    <p class="dk-cat">Featured · Audio</p>
    <h3 class="dk-title"><a href="#">Halo ANC Wireless Headphones</a></h3>
    <p class="dk-rating"><span class="dk-stars" style="--r:4.8" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.8 out of 5, 3,512 reviews</span><span aria-hidden="true">4.8 (3,512 reviews)</span></p>
    <p class="dk-desc">Adaptive noise cancelling that tunes itself to the room, with soft protein-leather cushions for long flights.</p>
    <dl class="dk-specs">
      <div><dt>Battery</dt><dd>40 hours</dd></div>
      <div><dt>Charging</dt><dd>10 min = 5 h</dd></div>
      <div><dt>Weight</dt><dd>254 g</dd></div>
      <div><dt>Warranty</dt><dd>2 years</dd></div>
    </dl>
    <p class="dk-price"><span class="sr-only">Sale price</span>$249 <s><span class="sr-only">Was</span> $299</s></p>
    <div class="dk-actions">
      <button type="button" class="dk-buy">Add<span class="sr-only"> Halo ANC Wireless Headphones</span> to cart</button>
      <button type="button" class="dk-save" aria-pressed="false"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg>Save<span class="sr-only"> Halo ANC Wireless Headphones to wishlist</span></button>
    </div>
    <p class="dk-ship">Free next-day delivery · 30-day returns</p>
  </div>
</article></div>
CSS 
/* Dark product cards: raised surfaces instead of shadows, an amber accent that keeps 4.5:1 on the dark ground,
   and a soft accent glow on hover and keyboard focus. */
.dk,.dk-feature{--dk-bg:#141821;--dk-raise:#1b202b;--dk-line:#272e3b;--dk-ink:#e8ebf2;--dk-muted:#9aa3b5;--dk-accent:#f5b445;--dk-accent-ink:#1c1405;--dk-heart:#fb7185;
  --dk-star:#fbbf24;--dk-star-off:#3b4252;--dk-focus:#7dd3fc;--dk-glow:0 0 0 1px rgba(245,180,69,.55),0 24px 50px -24px rgba(245,180,69,.45)}
.dk{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;list-style:none;margin:0;padding:0}
.dk-card{position:relative;display:flex;flex-direction:column;height:100%;background:var(--dk-bg);border:1px solid var(--dk-line);border-radius:18px;overflow:hidden;transition:box-shadow .25s,border-color .25s}
.dk-card:hover,.dk-card:focus-within{border-color:transparent;box-shadow:var(--dk-glow)}
.dk-media{position:relative;aspect-ratio:4/5;background:var(--dk-raise);overflow:hidden}
.dk-media img{display:block;width:100%;height:100%;object-fit:cover}
.dk-media::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(20,24,33,.85));pointer-events:none}
.dk-badge{position:absolute;top:12px;left:12px;z-index:1;padding:3px 10px;border-radius:999px;background:var(--dk-accent);color:var(--dk-accent-ink);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.dk-wish{position:absolute;top:10px;right:10px;z-index:1;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:50%;
  background:rgba(11,13,18,.7);color:var(--dk-ink);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dk-wish svg,.dk-save svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
:is(.dk-wish,.dk-save)[aria-pressed="true"]{color:var(--dk-heart)}
:is(.dk-wish,.dk-save)[aria-pressed="true"] svg{fill:currentColor}
.dk-body{display:flex;flex:1;flex-direction:column;gap:6px;padding:16px 18px 18px}
.dk-cat{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dk-accent)}
.dk-title{margin:0;font-size:1.02rem;font-weight:600;line-height:1.35}
.dk-title a{color:var(--dk-ink);text-decoration:none}
.dk-title a:hover{text-decoration:underline;text-underline-offset:3px}
.dk-rating{display:flex;align-items:center;gap:6px;margin:0;font-size:.8rem;color:var(--dk-muted)}
.dk-stars{--r:5;font-size:.9rem;letter-spacing:1px;line-height:1;color:transparent;
  background:linear-gradient(90deg,var(--dk-star) calc(var(--r) / 5 * 100%),var(--dk-star-off) 0);-webkit-background-clip:text;background-clip:text}
.dk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.dk-price{display:flex;align-items:baseline;gap:8px;margin:0;font-size:1.2rem;font-weight:700;color:var(--dk-ink)}
.dk-price s{font-size:.85rem;font-weight:500;color:var(--dk-muted)}
.dk-add{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1.5px solid var(--dk-accent);border-radius:10px;background:transparent;color:var(--dk-accent);
  font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;transition:background-color .15s,color .15s}
.dk-add:hover{background:var(--dk-accent);color:var(--dk-accent-ink)}
.dk-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
/* Featured spotlight */
.dk-feature{display:grid;grid-template-columns:1fr;background:var(--dk-bg);border:1px solid var(--dk-line);border-radius:22px;overflow:hidden}
.dk-feature .dk-media{aspect-ratio:4/3}
.dk-feature .dk-media::after{display:none}
.dk-feature .dk-body{gap:10px;padding:26px 28px 28px}
.dk-feature .dk-title{font-size:1.6rem;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.dk-desc{margin:0;font-size:.92rem;color:var(--dk-muted)}
.dk-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 4px}
.dk-specs div{padding:10px 12px;border-radius:12px;background:var(--dk-raise)}
.dk-specs dt{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dk-muted)}
.dk-specs dd{margin:2px 0 0;font-size:.95rem;font-weight:700;color:var(--dk-ink)}
.dk-feature .dk-price{font-size:1.7rem;font-weight:800}
.dk-actions{display:flex;flex-wrap:wrap;gap:10px}
.dk-buy{flex:1;padding:13px 20px;border:0;border-radius:12px;background:var(--dk-accent);color:var(--dk-accent-ink);font:inherit;font-size:.95rem;font-weight:800;cursor:pointer;transition:background-color .15s}
.dk-buy:hover{background:#ffc766}
.dk-save{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:1.5px solid var(--dk-line);border-radius:12px;background:var(--dk-raise);color:var(--dk-ink);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:border-color .15s}
.dk-save:hover{border-color:var(--dk-muted)}
.dk-ship{margin:0;font-size:.8rem;color:var(--dk-muted)}
@media (min-width:720px){.dk-feature{grid-template-columns:1.05fr 1fr}.dk-feature .dk-media{aspect-ratio:auto;min-height:320px}.dk-feature .dk-media img{position:absolute;inset:0}.dk-feature .dk-body{justify-content:center}}
:is(.dk,.dk-feature) :is(a,button):focus-visible{outline:3px solid var(--dk-focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.dk-card,.dk-add,.dk-buy,.dk-save{transition:none}}
JavaScript 
// Wishlist and Save are toggle buttons: flip aria-pressed on click (the CSS fills the heart when it is "true").
document.querySelectorAll('.dk-wish, .dk-save').forEach(btn => btn.addEventListener('click', () => {
  btn.setAttribute('aria-pressed', String(btn.getAttribute('aria-pressed') !== 'true'));
}));

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<div><span class="lbl">Dark shop cards with an accent glow</span>
<ul class="dk row row-cols-1 row-cols-sm-2 row-cols-md-3 list-unstyled mb-0" data-bs-theme="dark">
  <li class="col"><article class="card h-100">
    <div class="dk-media">
      <img src="https://images.unsplash.com/photo-1551028719-00167b16eac5?auto=format&fit=crop&w=600&q=70" alt="Black leather biker jacket with silver zips laid on white sheets" width="600" height="750" loading="lazy">
      <span class="dk-badge badge rounded-pill">Limited</span>
      <button type="button" class="btn dk-wish" data-bs-toggle="button" aria-pressed="false" aria-label="Save Moto Leather Jacket to wishlist"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
    </div>
    <div class="dk-body">
      <p class="dk-cat">Outerwear</p>
      <h3 class="dk-title"><a href="#" class="text-decoration-none">Moto Leather Jacket</a></h3>
      <p class="dk-rating"><span class="dk-stars" style="--r:4.9" aria-hidden="true">★★★★★</span><span class="visually-hidden">Rated 4.9 out of 5, 318 reviews</span><span aria-hidden="true">4.9 (318)</span></p>
      <div class="dk-row">
        <p class="dk-price">$420</p>
        <button type="button" class="btn dk-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg>Add<span class="visually-hidden"> Moto Leather Jacket to cart</span></button>
      </div>
    </div>
  </article></li>
  <li class="col"><article class="card h-100">
    <div class="dk-media">
      <img src="https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=600&q=70" alt="Close-up of dark roasted coffee beans" width="600" height="750" loading="lazy">
      <button type="button" class="btn dk-wish active" data-bs-toggle="button" aria-pressed="true" aria-label="Save Huila Single-Origin Beans to wishlist"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
    </div>
    <div class="dk-body">
      <p class="dk-cat">Coffee · 250 g</p>
      <h3 class="dk-title"><a href="#" class="text-decoration-none">Huila Single-Origin Beans</a></h3>
      <p class="dk-rating"><span class="dk-stars" style="--r:4.7" aria-hidden="true">★★★★★</span><span class="visually-hidden">Rated 4.7 out of 5, 1,026 reviews</span><span aria-hidden="true">4.7 (1,026)</span></p>
      <div class="dk-row">
        <p class="dk-price">$17</p>
        <button type="button" class="btn dk-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg>Add<span class="visually-hidden"> Huila Single-Origin Beans to cart</span></button>
      </div>
    </div>
  </article></li>
  <li class="col"><article class="card h-100">
    <div class="dk-media">
      <img src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?auto=format&fit=crop&w=600&q=70" alt="Amber glass dropper bottle on a wooden stand with soft leaf shadows" width="600" height="750" loading="lazy">
      <span class="dk-badge badge rounded-pill">−15%</span>
      <button type="button" class="btn dk-wish" data-bs-toggle="button" aria-pressed="false" aria-label="Save Cedar and Vetiver Beard Oil to wishlist"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
    </div>
    <div class="dk-body">
      <p class="dk-cat">Grooming · 30 ml</p>
      <h3 class="dk-title"><a href="#" class="text-decoration-none">Cedar and Vetiver Beard Oil</a></h3>
      <p class="dk-rating"><span class="dk-stars" style="--r:4.5" aria-hidden="true">★★★★★</span><span class="visually-hidden">Rated 4.5 out of 5, 204 reviews</span><span aria-hidden="true">4.5 (204)</span></p>
      <div class="dk-row">
        <p class="dk-price"><span class="visually-hidden">Sale price</span>$28 <s><span class="visually-hidden">Was</span> $33</s></p>
        <button type="button" class="btn dk-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg>Add<span class="visually-hidden"> Cedar and Vetiver Beard Oil to cart</span></button>
      </div>
    </div>
  </article></li>
</ul></div>

<div><span class="lbl">Featured product spotlight</span>
<article class="dk-feature card" data-bs-theme="dark">
  <div class="dk-media"><img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=900&q=70" alt="Black wireless over-ear headphones on a bright yellow background" width="900" height="675" loading="lazy"></div>
  <div class="dk-body">
    <p class="dk-cat">Featured · Audio</p>
    <h3 class="dk-title"><a href="#" class="text-decoration-none">Halo ANC Wireless Headphones</a></h3>
    <p class="dk-rating"><span class="dk-stars" style="--r:4.8" aria-hidden="true">★★★★★</span><span class="visually-hidden">Rated 4.8 out of 5, 3,512 reviews</span><span aria-hidden="true">4.8 (3,512 reviews)</span></p>
    <p class="dk-desc">Adaptive noise cancelling that tunes itself to the room, with soft protein-leather cushions for long flights.</p>
    <dl class="dk-specs mb-0">
      <div><dt>Battery</dt><dd>40 hours</dd></div>
      <div><dt>Charging</dt><dd>10 min = 5 h</dd></div>
      <div><dt>Weight</dt><dd>254 g</dd></div>
      <div><dt>Warranty</dt><dd>2 years</dd></div>
    </dl>
    <p class="dk-price"><span class="visually-hidden">Sale price</span>$249 <s><span class="visually-hidden">Was</span> $299</s></p>
    <div class="dk-actions">
      <button type="button" class="btn dk-buy">Add<span class="visually-hidden"> Halo ANC Wireless Headphones</span> to cart</button>
      <button type="button" class="btn dk-save" data-bs-toggle="button" aria-pressed="false"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg>Save<span class="visually-hidden"> Halo ANC Wireless Headphones to wishlist</span></button>
    </div>
    <p class="dk-ship">Free next-day delivery · 30-day returns</p>
  </div>
</article></div>
CSS 
/* Dark product cards on Bootstrap, scoped with data-bs-theme="dark": .card surfaces, .badge, .btn buttons and
   data-bs-toggle="button" wishlist toggles (Bootstrap flips aria-pressed and .active). Amber accent keeps 4.5:1. */
.dk,.dk-feature{--dk-bg:#141821;--dk-raise:#1b202b;--dk-line:#272e3b;--dk-ink:#e8ebf2;--dk-muted:#9aa3b5;--dk-accent:#f5b445;--dk-accent-ink:#1c1405;--dk-heart:#fb7185;
  --dk-star:#fbbf24;--dk-star-off:#3b4252;--dk-focus:#7dd3fc;--dk-glow:0 0 0 1px rgba(245,180,69,.55),0 24px 50px -24px rgba(245,180,69,.45)}
.dk{--bs-gutter-x:20px;--bs-gutter-y:20px}
.dk .card,.dk-feature.card{--bs-card-bg:var(--dk-bg);--bs-card-border-color:var(--dk-line);--bs-card-border-radius:18px;--bs-card-inner-border-radius:17px;--bs-card-color:var(--dk-ink);overflow:hidden;transition:box-shadow .25s,border-color .25s}
.dk .card:hover,.dk .card:focus-within{border-color:transparent;box-shadow:var(--dk-glow)}
.dk-media{position:relative;aspect-ratio:4/5;background:var(--dk-raise);overflow:hidden}
.dk-media img{display:block;width:100%;height:100%;object-fit:cover}
.dk-media::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(20,24,33,.85));pointer-events:none}
.dk-badge{position:absolute;line-height:1.5;top:12px;left:12px;z-index:1;padding:3px 10px;border-radius:999px;background:var(--dk-accent);color:var(--dk-accent-ink);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.dk-wish{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-color:var(--dk-ink);--bs-btn-hover-color:var(--dk-ink);--bs-btn-active-color:var(--dk-heart);--bs-btn-bg:rgba(11,13,18,.7);--bs-btn-hover-bg:rgba(11,13,18,.7);--bs-btn-active-bg:rgba(11,13,18,.7);--bs-btn-border-color:rgba(255,255,255,.14);--bs-btn-hover-border-color:rgba(255,255,255,.3);--bs-btn-active-border-color:rgba(255,255,255,.14);position:absolute;top:10px;right:10px;z-index:1;display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dk-wish svg,.dk-save svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
:is(.dk-wish,.dk-save).active svg{fill:currentColor}
.dk-body{display:flex;flex:1;flex-direction:column;gap:6px;padding:16px 18px 18px}
.dk-cat{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dk-accent)}
.dk-title{margin:0;font-size:1.02rem;font-weight:600;line-height:1.35}
.dk-title a{color:var(--dk-ink);text-decoration:none}
.dk-title a:hover{text-decoration:underline;text-underline-offset:3px}
.dk-rating{display:flex;align-items:center;gap:6px;margin:0;font-size:.8rem;color:var(--dk-muted)}
.dk-stars{--r:5;font-size:.9rem;letter-spacing:1px;line-height:1;color:transparent;
  background:linear-gradient(90deg,var(--dk-star) calc(var(--r) / 5 * 100%),var(--dk-star-off) 0);-webkit-background-clip:text;background-clip:text}
.dk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.dk-price{display:flex;align-items:baseline;gap:8px;margin:0;font-size:1.2rem;font-weight:700;color:var(--dk-ink)}
.dk-price s{font-size:.85rem;font-weight:500;color:var(--dk-muted)}
.dk-add{--bs-btn-padding-x:14px;--bs-btn-padding-y:9px;--bs-btn-font-size:.85rem;--bs-btn-font-weight:700;--bs-btn-border-width:1.5px;--bs-btn-border-radius:10px;--bs-btn-color:var(--dk-accent);--bs-btn-border-color:var(--dk-accent);
  --bs-btn-hover-color:var(--dk-accent-ink);--bs-btn-hover-bg:var(--dk-accent);--bs-btn-hover-border-color:var(--dk-accent);--bs-btn-active-color:var(--dk-accent-ink);--bs-btn-active-bg:var(--dk-accent);--bs-btn-active-border-color:var(--dk-accent);display:inline-flex;align-items:center;gap:6px}
.dk-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
/* Featured spotlight */
.dk-feature.card{--bs-card-border-radius:22px;--bs-card-inner-border-radius:21px;display:grid;grid-template-columns:1fr}
.dk-feature .dk-media{aspect-ratio:4/3}
.dk-feature .dk-media::after{display:none}
.dk-feature .dk-body{gap:10px;padding:26px 28px 28px}
.dk-feature .dk-title{font-size:1.6rem;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.dk-desc{margin:0;font-size:.92rem;color:var(--dk-muted)}
.dk-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 4px}
.dk-specs dt{font-weight:600}
.dk-specs div{padding:10px 12px;border-radius:12px;background:var(--dk-raise)}
.dk-specs dt{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dk-muted)}
.dk-specs dd{margin:2px 0 0;font-size:.95rem;font-weight:700;color:var(--dk-ink)}
.dk-feature .dk-price{font-size:1.7rem;font-weight:800}
.dk-actions{display:flex;flex-wrap:wrap;gap:10px}
.dk-buy{--bs-btn-padding-x:20px;--bs-btn-padding-y:13px;--bs-btn-font-size:.95rem;--bs-btn-font-weight:800;--bs-btn-border-width:0;--bs-btn-border-radius:12px;--bs-btn-color:var(--dk-accent-ink);--bs-btn-bg:var(--dk-accent);
  --bs-btn-hover-color:var(--dk-accent-ink);--bs-btn-hover-bg:#ffc766;--bs-btn-active-color:var(--dk-accent-ink);--bs-btn-active-bg:#ffc766;flex:1}
.dk-save{--bs-btn-padding-x:18px;--bs-btn-padding-y:12px;--bs-btn-font-size:.9rem;--bs-btn-font-weight:600;--bs-btn-border-width:1.5px;--bs-btn-border-radius:12px;--bs-btn-color:var(--dk-ink);--bs-btn-bg:var(--dk-raise);--bs-btn-border-color:var(--dk-line);
  --bs-btn-hover-color:var(--dk-ink);--bs-btn-hover-bg:var(--dk-raise);--bs-btn-hover-border-color:var(--dk-muted);--bs-btn-active-color:var(--dk-heart);--bs-btn-active-bg:var(--dk-raise);--bs-btn-active-border-color:var(--dk-line);display:inline-flex;align-items:center;gap:8px}
.dk-ship{margin:0;font-size:.8rem;color:var(--dk-muted)}
@media (min-width:720px){.dk-feature.card{grid-template-columns:1.05fr 1fr}.dk-feature .dk-media{aspect-ratio:auto;min-height:320px}.dk-feature .dk-media img{position:absolute;inset:0}.dk-feature .dk-body{justify-content:center}}
:is(.dk,.dk-feature) :is(a,.btn):focus-visible{outline:3px solid var(--dk-focus);outline-offset:2px;box-shadow:none}
@media (prefers-reduced-motion:reduce){.dk .card,:is(.dk,.dk-feature) .btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#9aa3b5] uppercase">Dark shop cards with an accent glow</span>
<ul class="grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-5">
  <li><article class="relative flex h-full flex-col overflow-hidden rounded-[18px] border border-[#272e3b] bg-[#141821] transition-[box-shadow,border-color] duration-250 focus-within:border-transparent focus-within:shadow-[0_0_0_1px_rgba(245,180,69,.55),0_24px_50px_-24px_rgba(245,180,69,.45)] hover:border-transparent hover:shadow-[0_0_0_1px_rgba(245,180,69,.55),0_24px_50px_-24px_rgba(245,180,69,.45)] motion-reduce:transition-none">
    <div class="relative aspect-[4/5] overflow-hidden bg-[#1b202b] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-2/5 after:bg-linear-to-b after:from-transparent after:to-[rgba(20,24,33,.85)]">
      <img class="block size-full object-cover" src="https://images.unsplash.com/photo-1551028719-00167b16eac5?auto=format&fit=crop&w=600&q=70" alt="Black leather biker jacket with silver zips laid on white sheets" width="600" height="750" loading="lazy">
      <span class="absolute top-3 left-3 z-[1] rounded-full bg-[#f5b445] px-2.5 py-[3px] text-[.7rem] font-extrabold tracking-[.06em] text-[#1c1405] uppercase">Limited</span>
      <button type="button" class="dk-wish group absolute top-2.5 right-2.5 z-[1] grid size-[38px] cursor-pointer place-items-center rounded-full border border-white/14 bg-[rgba(11,13,18,.7)] backdrop-blur-[6px] aria-pressed:text-[#fb7185] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#7dd3fc]" aria-pressed="false" aria-label="Save Moto Leather Jacket to wishlist"><svg class="size-[18px] fill-none stroke-current stroke-2 [stroke-linejoin:round] group-aria-pressed:fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
    </div>
    <div class="flex flex-1 flex-col gap-1.5 px-[18px] pt-4 pb-[18px]">
      <p class="text-[.7rem] font-bold tracking-[.12em] text-[#f5b445] uppercase">Outerwear</p>
      <h3 class="text-[1.02rem] leading-[1.35] font-semibold"><a href="#" class="underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#7dd3fc]">Moto Leather Jacket</a></h3>
      <p class="flex items-center gap-1.5 text-[.8rem] text-[#9aa3b5]"><span class="bg-[linear-gradient(90deg,#fbbf24_98%,#3b4252_0)] bg-clip-text text-[.9rem] leading-none tracking-[1px] text-transparent" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.9 out of 5, 318 reviews</span><span aria-hidden="true">4.9 (318)</span></p>
      <div class="mt-auto flex items-center justify-between gap-2.5 pt-2.5">
        <p class="flex items-baseline gap-2 text-[1.2rem] font-bold">$420</p>
        <button type="button" class="inline-flex cursor-pointer items-center gap-1.5 rounded-[10px] border-[1.5px] border-[#f5b445] px-3.5 py-[9px] text-[.85rem] font-bold text-[#f5b445] transition-colors duration-150 hover:bg-[#f5b445] hover:text-[#1c1405] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#7dd3fc] motion-reduce:transition-none"><svg class="size-4 fill-none stroke-current stroke-[2.2] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg>Add<span class="sr-only"> Moto Leather Jacket to cart</span></button>
      </div>
    </div>
  </article></li>
  <li><article class="relative flex h-full flex-col overflow-hidden rounded-[18px] border border-[#272e3b] bg-[#141821] transition-[box-shadow,border-color] duration-250 focus-within:border-transparent focus-within:shadow-[0_0_0_1px_rgba(245,180,69,.55),0_24px_50px_-24px_rgba(245,180,69,.45)] hover:border-transparent hover:shadow-[0_0_0_1px_rgba(245,180,69,.55),0_24px_50px_-24px_rgba(245,180,69,.45)] motion-reduce:transition-none">
    <div class="relative aspect-[4/5] overflow-hidden bg-[#1b202b] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-2/5 after:bg-linear-to-b after:from-transparent after:to-[rgba(20,24,33,.85)]">
      <img class="block size-full object-cover" src="https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=600&q=70" alt="Close-up of dark roasted coffee beans" width="600" height="750" loading="lazy">
      <button type="button" class="dk-wish group absolute top-2.5 right-2.5 z-[1] grid size-[38px] cursor-pointer place-items-center rounded-full border border-white/14 bg-[rgba(11,13,18,.7)] backdrop-blur-[6px] aria-pressed:text-[#fb7185] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#7dd3fc]" aria-pressed="true" aria-label="Save Huila Single-Origin Beans to wishlist"><svg class="size-[18px] fill-none stroke-current stroke-2 [stroke-linejoin:round] group-aria-pressed:fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
    </div>
    <div class="flex flex-1 flex-col gap-1.5 px-[18px] pt-4 pb-[18px]">
      <p class="text-[.7rem] font-bold tracking-[.12em] text-[#f5b445] uppercase">Coffee · 250 g</p>
      <h3 class="text-[1.02rem] leading-[1.35] font-semibold"><a href="#" class="underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#7dd3fc]">Huila Single-Origin Beans</a></h3>
      <p class="flex items-center gap-1.5 text-[.8rem] text-[#9aa3b5]"><span class="bg-[linear-gradient(90deg,#fbbf24_94%,#3b4252_0)] bg-clip-text text-[.9rem] leading-none tracking-[1px] text-transparent" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.7 out of 5, 1,026 reviews</span><span aria-hidden="true">4.7 (1,026)</span></p>
      <div class="mt-auto flex items-center justify-between gap-2.5 pt-2.5">
        <p class="flex items-baseline gap-2 text-[1.2rem] font-bold">$17</p>
        <button type="button" class="inline-flex cursor-pointer items-center gap-1.5 rounded-[10px] border-[1.5px] border-[#f5b445] px-3.5 py-[9px] text-[.85rem] font-bold text-[#f5b445] transition-colors duration-150 hover:bg-[#f5b445] hover:text-[#1c1405] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#7dd3fc] motion-reduce:transition-none"><svg class="size-4 fill-none stroke-current stroke-[2.2] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg>Add<span class="sr-only"> Huila Single-Origin Beans to cart</span></button>
      </div>
    </div>
  </article></li>
  <li><article class="relative flex h-full flex-col overflow-hidden rounded-[18px] border border-[#272e3b] bg-[#141821] transition-[box-shadow,border-color] duration-250 focus-within:border-transparent focus-within:shadow-[0_0_0_1px_rgba(245,180,69,.55),0_24px_50px_-24px_rgba(245,180,69,.45)] hover:border-transparent hover:shadow-[0_0_0_1px_rgba(245,180,69,.55),0_24px_50px_-24px_rgba(245,180,69,.45)] motion-reduce:transition-none">
    <div class="relative aspect-[4/5] overflow-hidden bg-[#1b202b] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-2/5 after:bg-linear-to-b after:from-transparent after:to-[rgba(20,24,33,.85)]">
      <img class="block size-full object-cover" src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?auto=format&fit=crop&w=600&q=70" alt="Amber glass dropper bottle on a wooden stand with soft leaf shadows" width="600" height="750" loading="lazy">
      <span class="absolute top-3 left-3 z-[1] rounded-full bg-[#f5b445] px-2.5 py-[3px] text-[.7rem] font-extrabold tracking-[.06em] text-[#1c1405] uppercase">−15%</span>
      <button type="button" class="dk-wish group absolute top-2.5 right-2.5 z-[1] grid size-[38px] cursor-pointer place-items-center rounded-full border border-white/14 bg-[rgba(11,13,18,.7)] backdrop-blur-[6px] aria-pressed:text-[#fb7185] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#7dd3fc]" aria-pressed="false" aria-label="Save Cedar and Vetiver Beard Oil to wishlist"><svg class="size-[18px] fill-none stroke-current stroke-2 [stroke-linejoin:round] group-aria-pressed:fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg></button>
    </div>
    <div class="flex flex-1 flex-col gap-1.5 px-[18px] pt-4 pb-[18px]">
      <p class="text-[.7rem] font-bold tracking-[.12em] text-[#f5b445] uppercase">Grooming · 30 ml</p>
      <h3 class="text-[1.02rem] leading-[1.35] font-semibold"><a href="#" class="underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#7dd3fc]">Cedar and Vetiver Beard Oil</a></h3>
      <p class="flex items-center gap-1.5 text-[.8rem] text-[#9aa3b5]"><span class="bg-[linear-gradient(90deg,#fbbf24_90%,#3b4252_0)] bg-clip-text text-[.9rem] leading-none tracking-[1px] text-transparent" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.5 out of 5, 204 reviews</span><span aria-hidden="true">4.5 (204)</span></p>
      <div class="mt-auto flex items-center justify-between gap-2.5 pt-2.5">
        <p class="flex items-baseline gap-2 text-[1.2rem] font-bold"><span class="sr-only">Sale price</span>$28 <s class="text-[.85rem] font-medium text-[#9aa3b5]"><span class="sr-only">Was</span> $33</s></p>
        <button type="button" class="inline-flex cursor-pointer items-center gap-1.5 rounded-[10px] border-[1.5px] border-[#f5b445] px-3.5 py-[9px] text-[.85rem] font-bold text-[#f5b445] transition-colors duration-150 hover:bg-[#f5b445] hover:text-[#1c1405] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#7dd3fc] motion-reduce:transition-none"><svg class="size-4 fill-none stroke-current stroke-[2.2] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8h13l-1 12h-11z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg>Add<span class="sr-only"> Cedar and Vetiver Beard Oil to cart</span></button>
      </div>
    </div>
  </article></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#9aa3b5] uppercase">Featured product spotlight</span>
<article class="grid grid-cols-1 overflow-hidden rounded-[22px] border border-[#272e3b] bg-[#141821] min-[720px]:grid-cols-[1.05fr_1fr]">
  <div class="relative aspect-[4/3] overflow-hidden bg-[#1b202b] min-[720px]:aspect-auto min-[720px]:min-h-[320px]"><img class="block size-full object-cover min-[720px]:absolute min-[720px]:inset-0" src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=900&q=70" alt="Black wireless over-ear headphones on a bright yellow background" width="900" height="675" loading="lazy"></div>
  <div class="flex flex-1 flex-col gap-2.5 px-7 pt-[26px] pb-7 min-[720px]:justify-center">
    <p class="text-[.7rem] font-bold tracking-[.12em] text-[#f5b445] uppercase">Featured · Audio</p>
    <h3 class="text-[1.6rem] leading-[1.2] font-bold tracking-[-.02em]"><a href="#" class="underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#7dd3fc]">Halo ANC Wireless Headphones</a></h3>
    <p class="flex items-center gap-1.5 text-[.8rem] text-[#9aa3b5]"><span class="bg-[linear-gradient(90deg,#fbbf24_96%,#3b4252_0)] bg-clip-text text-[.9rem] leading-none tracking-[1px] text-transparent" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.8 out of 5, 3,512 reviews</span><span aria-hidden="true">4.8 (3,512 reviews)</span></p>
    <p class="text-[.92rem] text-[#9aa3b5]">Adaptive noise cancelling that tunes itself to the room, with soft protein-leather cushions for long flights.</p>
    <dl class="mt-1.5 mb-1 grid grid-cols-2 gap-2.5">
      <div class="rounded-xl bg-[#1b202b] px-3 py-2.5"><dt class="text-[.7rem] font-semibold tracking-[.08em] text-[#9aa3b5] uppercase">Battery</dt><dd class="mt-0.5 text-[.95rem] font-bold">40 hours</dd></div>
      <div class="rounded-xl bg-[#1b202b] px-3 py-2.5"><dt class="text-[.7rem] font-semibold tracking-[.08em] text-[#9aa3b5] uppercase">Charging</dt><dd class="mt-0.5 text-[.95rem] font-bold">10 min = 5 h</dd></div>
      <div class="rounded-xl bg-[#1b202b] px-3 py-2.5"><dt class="text-[.7rem] font-semibold tracking-[.08em] text-[#9aa3b5] uppercase">Weight</dt><dd class="mt-0.5 text-[.95rem] font-bold">254 g</dd></div>
      <div class="rounded-xl bg-[#1b202b] px-3 py-2.5"><dt class="text-[.7rem] font-semibold tracking-[.08em] text-[#9aa3b5] uppercase">Warranty</dt><dd class="mt-0.5 text-[.95rem] font-bold">2 years</dd></div>
    </dl>
    <p class="flex items-baseline gap-2 text-[1.7rem] font-extrabold"><span class="sr-only">Sale price</span>$249 <s class="text-[.85rem] font-medium text-[#9aa3b5]"><span class="sr-only">Was</span> $299</s></p>
    <div class="flex flex-wrap gap-2.5">
      <button type="button" class="flex-1 cursor-pointer rounded-xl bg-[#f5b445] px-5 py-[13px] text-[.95rem] font-extrabold text-[#1c1405] transition-colors duration-150 hover:bg-[#ffc766] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#7dd3fc] motion-reduce:transition-none">Add<span class="sr-only"> Halo ANC Wireless Headphones</span> to cart</button>
      <button type="button" class="dk-save group inline-flex cursor-pointer items-center gap-2 rounded-xl border-[1.5px] border-[#272e3b] bg-[#1b202b] px-[18px] py-3 text-[.9rem] font-semibold transition-colors duration-150 hover:border-[#9aa3b5] aria-pressed:text-[#fb7185] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#7dd3fc] motion-reduce:transition-none" aria-pressed="false"><svg class="size-[18px] fill-none stroke-current stroke-2 [stroke-linejoin:round] group-aria-pressed:fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.4-9.1C1.1 7.9 3.3 4.5 6.8 4.5c2.1 0 3.7 1.2 5.2 3.1 1.5-1.9 3.1-3.1 5.2-3.1 3.5 0 5.7 3.4 4.2 6.9-1.9 4.5-9.4 9.1-9.4 9.1z"/></svg>Save<span class="sr-only"> Halo ANC Wireless Headphones to wishlist</span></button>
    </div>
    <p class="text-[.8rem] text-[#9aa3b5]">Free next-day delivery · 30-day returns</p>
  </div>
</article></div>
JavaScript 
// Wishlist and Save are toggle buttons: flip aria-pressed on click (aria-pressed: utilities restyle them).
document.querySelectorAll('.dk-wish, .dk-save').forEach(btn => btn.addEventListener('click', () => {
  btn.setAttribute('aria-pressed', String(btn.getAttribute('aria-pressed') !== 'true'));
}));

About this set

Product cards for a dark storefront, such as a premium fashion, coffee, grooming or audio shop. Dark shop cards with an accent glow sit on a near-black page as slightly lighter surfaces with a thin border; the 4:5 photo fades into the card at the bottom, an amber badge and a frosted wishlist button sit on top, and under it come an amber category label, the name, rating, price and an outline Add button. On hover, and whenever something in the card has keyboard focus, the border gives way to a soft amber glow. Featured product spotlight is a wide card for a hero product: a large photo beside the category, a big title, rating, a one-line description, four specification tiles for battery, charging, weight and warranty, a large sale price, a solid amber Add to cart button and a Save toggle, with the delivery promise underneath. Dark interfaces fail when grey text and coloured accents lose contrast, so every colour here was checked on the dark ground: muted text, the amber accent and the struck-through prices all pass 4.5:1. The Bootstrap version scopes everything with data-bs-theme=”dark”.

What’s included

  • Raised dark surfaces with an amber accent glow on hover and focus
  • Photos that fade into the card
  • Featured spotlight with four specification tiles
  • Colours checked for 4.5:1 contrast on the dark ground
  • Bootstrap version scoped with data-bs-theme="dark"

Accessibility

Text and accent colours meet WCAG AA contrast on the dark surfaces, and focus outlines are a light sky blue that stands out from the amber accent. Wishlist and Save are toggle buttons with aria-pressed and names that include the product, and Add buttons are named Add Moto Leather Jacket to cart. The specification tiles are a description list, so each value is read with its label. The glow and colour transitions stop under prefers-reduced-motion.

Customise it

Change --dk-bg, --dk-raise, --dk-accent, --dk-accent-ink and --dk-glow on .dk and .dk-feature to recolour the set, keeping the accent at 4.5:1 against --dk-bg. In Tailwind edit the bg-[#141821] and #f5b445 utilities.