Open demo

CSS code

HTML 
<div><span class="lbl">List view with details and a buy column</span>
<ul class="lv">
  <li><article class="lv-card">
    <div class="lv-media"><img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=600&q=70" alt="Dark green velvet three-seat sofa on a light wooden floor" width="600" height="450" loading="lazy"></div>
    <div class="lv-info">
      <p class="lv-cat">Living room · Sofas</p>
      <h3 class="lv-title"><a href="#">Marlow Velvet Sofa, Three-Seat</a></h3>
      <p class="lv-rating"><span class="lv-stars" style="--r:4.7" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.7 out of 5, 312 reviews</span><span aria-hidden="true">4.7 (312 reviews)</span></p>
      <p class="lv-desc">Deep seat, kiln-dried hardwood frame and feather-wrapped cushions in a soft cotton velvet. 214 cm wide.</p>
      <ul class="lv-feats">
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Free delivery and setup</li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>10-year frame warranty</li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>100-night trial</li>
      </ul>
    </div>
    <div class="lv-buy">
      <p class="lv-price">$1,240</p>
      <p class="lv-finance">or $104/mo for 12 months</p>
      <p class="lv-stock">In stock, ships in 3 days</p>
      <button type="button" class="lv-add">Add<span class="sr-only"> Marlow Velvet Sofa</span> to cart</button>
      <button type="button" class="lv-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"> Marlow Velvet Sofa to wishlist</span></button>
    </div>
  </article></li>
  <li><article class="lv-card">
    <div class="lv-media"><img src="https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?auto=format&fit=crop&w=600&q=70" alt="Cream button-tufted armchair with carved white legs" width="600" height="450" loading="lazy"></div>
    <div class="lv-info">
      <p class="lv-cat">Living room · Armchairs</p>
      <h3 class="lv-title"><a href="#">Ivy Tufted Armchair</a></h3>
      <p class="lv-rating"><span class="lv-stars" style="--r:4.4" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.4 out of 5, 96 reviews</span><span aria-hidden="true">4.4 (96 reviews)</span></p>
      <p class="lv-desc">A compact reading chair with deep button tufting, a high back and turned beech legs. Fits a 70 cm corner.</p>
      <ul class="lv-feats">
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Free delivery</li>
        <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Removable, washable cover</li>
      </ul>
    </div>
    <div class="lv-buy">
      <p class="lv-price">$489</p>
      <p class="lv-finance">or $41/mo for 12 months</p>
      <p class="lv-stock is-wait">Made to order, 4–6 weeks</p>
      <button type="button" class="lv-add">Add<span class="sr-only"> Ivy Tufted Armchair</span> to cart</button>
      <button type="button" class="lv-save" aria-pressed="true"><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"> Ivy Tufted Armchair to wishlist</span></button>
    </div>
  </article></li>
</ul></div>

<div><span class="lbl">Compact rows</span>
<ul class="lv-rows">
  <li class="lv-row">
    <img src="https://images.unsplash.com/photo-1600166898405-da9535204843?auto=format&fit=crop&w=160&q=70" alt="Rolled beige rug with a faded floral pattern" width="72" height="72" loading="lazy">
    <div class="lv-row-info"><h3 class="lv-title"><a href="#">Hand-Woven Wool Rug</a></h3><p class="lv-meta">Sand · 160 × 230 cm</p></div>
    <p class="lv-price">$340</p>
    <button type="button" class="lv-mini"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Add<span class="sr-only"> Hand-Woven Wool Rug to cart</span></button>
  </li>
  <li class="lv-row">
    <img src="https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=160&q=70" alt="Grey metal floor lamp with a dome shade" width="72" height="72" loading="lazy">
    <div class="lv-row-info"><h3 class="lv-title"><a href="#">Dome Floor Lamp</a></h3><p class="lv-meta">Graphite · E27 bulb included</p></div>
    <p class="lv-price">$156</p>
    <button type="button" class="lv-mini"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Add<span class="sr-only"> Dome Floor Lamp to cart</span></button>
  </li>
  <li class="lv-row">
    <img src="https://images.unsplash.com/photo-1521302080334-4bebac2763a6?auto=format&fit=crop&w=160&q=70" alt="Clear glass cup of black coffee casting a long shadow" width="72" height="72" loading="lazy">
    <div class="lv-row-info"><h3 class="lv-title"><a href="#">Double-Wall Glass Cups</a></h3><p class="lv-meta">Set of 4 · 250 ml</p></div>
    <p class="lv-price">$32</p>
    <button type="button" class="lv-mini"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Add<span class="sr-only"> Double-Wall Glass Cups to cart</span></button>
  </li>
</ul></div>
CSS 
/* List-view product cards: photo, details and a buy column side by side from 768px, stacked below.
   Compact rows put a thumbnail, name, price and a small add button on one line. */
.lv,.lv-rows{--lv-ink:#1f2a27;--lv-muted:#56615d;--lv-line:#e4e0d8;--lv-accent:#115e59;--lv-accent-hover:#0b4642;--lv-ok:#166534;--lv-star:#b45309;--lv-star-off:#d6d3d1;--lv-heart:#be123c;--lv-focus:#2563eb;}
.lv{display:flex;flex-direction:column;gap:18px;list-style:none;margin:0;padding:0}
.lv-card{display:grid;grid-template-columns:1fr;background:#fff;border:1px solid var(--lv-line);border-radius:18px;overflow:hidden}
.lv-media{aspect-ratio:4/3;background:#ece8e1;overflow:hidden}
.lv-media img{display:block;width:100%;height:100%;object-fit:cover}
.lv-info{display:flex;flex-direction:column;gap:8px;padding:20px 22px}
.lv-cat{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lv-muted)}
.lv-title{margin:0;font-size:1.2rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.lv-title a{color:var(--lv-ink);text-decoration:none}
.lv-title a:hover{text-decoration:underline;text-underline-offset:3px}
.lv-rating{display:flex;align-items:center;gap:6px;margin:0;font-size:.8rem;color:var(--lv-muted)}
.lv-stars{--r:5;font-size:.9rem;letter-spacing:1px;line-height:1;color:transparent;
  background:linear-gradient(90deg,var(--lv-star) calc(var(--r) / 5 * 100%),var(--lv-star-off) 0);-webkit-background-clip:text;background-clip:text}
.lv-desc{margin:0;font-size:.9rem;color:var(--lv-muted)}
.lv-feats{display:flex;flex-wrap:wrap;gap:6px 14px;margin:4px 0 0;padding:0;list-style:none;font-size:.82rem;color:var(--lv-ink)}
.lv-feats li{display:flex;align-items:center;gap:6px}
.lv-feats svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--lv-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lv-buy{display:flex;flex-direction:column;gap:6px;padding:18px 22px 22px;border-top:1px solid var(--lv-line);background:#fbfaf7}
.lv-price{margin:0;font-size:1.5rem;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--lv-ink)}
.lv-finance{margin:0;font-size:.8rem;color:var(--lv-muted)}
.lv-stock{display:flex;align-items:center;gap:6px;margin:2px 0 8px;font-size:.82rem;font-weight:600;color:var(--lv-ok)}
.lv-stock::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.lv-stock.is-wait{color:#92400e}
.lv-add{padding:11px 16px;border:0;border-radius:10px;background:var(--lv-accent);color:#fff;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:background-color .15s}
.lv-add:hover{background:var(--lv-accent-hover)}
.lv-save{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border:1.5px solid var(--lv-line);border-radius:10px;background:#fff;color:var(--lv-ink);
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:border-color .15s}
.lv-save:hover{border-color:var(--lv-muted)}
.lv-save svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.lv-save[aria-pressed="true"]{color:var(--lv-heart);border-color:#fda4af}
.lv-save[aria-pressed="true"] svg{fill:currentColor}
@media (min-width:768px){
  .lv-card{grid-template-columns:230px 1fr 236px}
  .lv-media{position:relative;aspect-ratio:auto;min-height:220px}
  .lv-media img{position:absolute;inset:0}
  .lv-buy{justify-content:center;border-top:0;border-left:1px solid var(--lv-line)}
}
/* Compact rows */
.lv-rows{margin:0;padding:0;list-style:none;background:#fff;border:1px solid var(--lv-line);border-radius:18px}
.lv-row{display:grid;grid-template-columns:72px 1fr auto;grid-template-areas:"img info price" "img info add";align-items:center;gap:2px 16px;padding:14px 18px}
.lv-row+.lv-row{border-top:1px solid var(--lv-line)}
.lv-row img{grid-area:img;display:block;width:72px;height:72px;border-radius:12px;object-fit:cover;background:#ece8e1}
.lv-row-info{grid-area:info;min-width:0}
.lv-row .lv-title{font-size:.98rem;font-weight:600}
.lv-meta{margin:2px 0 0;font-size:.8rem;color:var(--lv-muted)}
.lv-row .lv-price{grid-area:price;justify-self:end;font-size:1.05rem;font-weight:700}
.lv-mini{grid-area:add;justify-self:end;display:flex;align-items:center;gap:6px;padding:6px 12px;border:1.5px solid var(--lv-accent);border-radius:999px;background:transparent;color:var(--lv-accent);
  font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:background-color .15s,color .15s}
.lv-mini:hover{background:var(--lv-accent);color:#fff}
.lv-mini svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
@media (min-width:768px){.lv-row{grid-template-columns:72px 1fr auto auto;grid-template-areas:"img info price add";gap:16px 24px}}
.lv :is(a,button):focus-visible,.lv-rows :is(a,button):focus-visible{outline:3px solid var(--lv-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){.lv-add,.lv-save,.lv-mini{transition:none}}
JavaScript 
// Save buttons are toggle buttons: flip aria-pressed on click (the CSS fills the heart when it is "true").
document.querySelectorAll('.lv-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">List view with details and a buy column</span>
<ul class="lv list-unstyled d-flex flex-column mb-0">
  <li><article class="card"><div class="row g-0">
    <div class="col-12 lv-media"><img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=600&q=70" alt="Dark green velvet three-seat sofa on a light wooden floor" width="600" height="450" loading="lazy"></div>
    <div class="col-12 col-md lv-info d-flex flex-column">
      <p class="lv-cat fw-semibold text-uppercase mb-0">Living room · Sofas</p>
      <h3 class="lv-title fw-bold mb-0"><a href="#" class="text-decoration-none">Marlow Velvet Sofa, Three-Seat</a></h3>
      <p class="lv-rating d-flex align-items-center gap-2 mb-0"><span class="lv-stars" style="--r:4.7" aria-hidden="true">★★★★★</span><span class="visually-hidden">Rated 4.7 out of 5, 312 reviews</span><span aria-hidden="true">4.7 (312 reviews)</span></p>
      <p class="lv-desc mb-0">Deep seat, kiln-dried hardwood frame and feather-wrapped cushions in a soft cotton velvet. 214 cm wide.</p>
      <ul class="lv-feats list-unstyled d-flex flex-wrap mb-0">
        <li class="d-flex align-items-center gap-2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Free delivery and setup</li>
        <li class="d-flex align-items-center gap-2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>10-year frame warranty</li>
        <li class="d-flex align-items-center gap-2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>100-night trial</li>
      </ul>
    </div>
    <div class="col-12 lv-buy d-flex flex-column">
      <p class="lv-price mb-0">$1,240</p>
      <p class="lv-finance mb-0">or $104/mo for 12 months</p>
      <p class="d-flex align-items-center fw-semibold lv-stock">In stock, ships in 3 days</p>
      <button type="button" class="btn lv-add">Add<span class="visually-hidden"> Marlow Velvet Sofa</span> to cart</button>
      <button type="button" class="btn lv-save d-flex align-items-center justify-content-center gap-2" 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"> Marlow Velvet Sofa to wishlist</span></button>
    </div>
  </div></article></li>
  <li><article class="card"><div class="row g-0">
    <div class="col-12 lv-media"><img src="https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?auto=format&fit=crop&w=600&q=70" alt="Cream button-tufted armchair with carved white legs" width="600" height="450" loading="lazy"></div>
    <div class="col-12 col-md lv-info d-flex flex-column">
      <p class="lv-cat fw-semibold text-uppercase mb-0">Living room · Armchairs</p>
      <h3 class="lv-title fw-bold mb-0"><a href="#" class="text-decoration-none">Ivy Tufted Armchair</a></h3>
      <p class="lv-rating d-flex align-items-center gap-2 mb-0"><span class="lv-stars" style="--r:4.4" aria-hidden="true">★★★★★</span><span class="visually-hidden">Rated 4.4 out of 5, 96 reviews</span><span aria-hidden="true">4.4 (96 reviews)</span></p>
      <p class="lv-desc mb-0">A compact reading chair with deep button tufting, a high back and turned beech legs. Fits a 70 cm corner.</p>
      <ul class="lv-feats list-unstyled d-flex flex-wrap mb-0">
        <li class="d-flex align-items-center gap-2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Free delivery</li>
        <li class="d-flex align-items-center gap-2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Removable, washable cover</li>
      </ul>
    </div>
    <div class="col-12 lv-buy d-flex flex-column">
      <p class="lv-price mb-0">$489</p>
      <p class="lv-finance mb-0">or $41/mo for 12 months</p>
      <p class="d-flex align-items-center fw-semibold lv-stock is-wait">Made to order, 4–6 weeks</p>
      <button type="button" class="btn lv-add">Add<span class="visually-hidden"> Ivy Tufted Armchair</span> to cart</button>
      <button type="button" class="btn lv-save d-flex align-items-center justify-content-center gap-2 active" data-bs-toggle="button" aria-pressed="true"><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"> Ivy Tufted Armchair to wishlist</span></button>
    </div>
  </div></article></li>
</ul></div>

<div><span class="lbl">Compact rows</span>
<ul class="lv-rows list-group">
  <li class="list-group-item lv-row">
    <img src="https://images.unsplash.com/photo-1600166898405-da9535204843?auto=format&fit=crop&w=160&q=70" alt="Rolled beige rug with a faded floral pattern" width="72" height="72" loading="lazy">
    <div class="lv-row-info"><h3 class="lv-title mb-0"><a href="#" class="text-decoration-none">Hand-Woven Wool Rug</a></h3><p class="lv-meta">Sand · 160 × 230 cm</p></div>
    <p class="lv-price mb-0">$340</p>
    <button type="button" class="btn lv-mini d-flex align-items-center gap-2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Add<span class="visually-hidden"> Hand-Woven Wool Rug to cart</span></button>
  </li>
  <li class="list-group-item lv-row">
    <img src="https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=160&q=70" alt="Grey metal floor lamp with a dome shade" width="72" height="72" loading="lazy">
    <div class="lv-row-info"><h3 class="lv-title mb-0"><a href="#" class="text-decoration-none">Dome Floor Lamp</a></h3><p class="lv-meta">Graphite · E27 bulb included</p></div>
    <p class="lv-price mb-0">$156</p>
    <button type="button" class="btn lv-mini d-flex align-items-center gap-2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Add<span class="visually-hidden"> Dome Floor Lamp to cart</span></button>
  </li>
  <li class="list-group-item lv-row">
    <img src="https://images.unsplash.com/photo-1521302080334-4bebac2763a6?auto=format&fit=crop&w=160&q=70" alt="Clear glass cup of black coffee casting a long shadow" width="72" height="72" loading="lazy">
    <div class="lv-row-info"><h3 class="lv-title mb-0"><a href="#" class="text-decoration-none">Double-Wall Glass Cups</a></h3><p class="lv-meta">Set of 4 · 250 ml</p></div>
    <p class="lv-price mb-0">$32</p>
    <button type="button" class="btn lv-mini d-flex align-items-center gap-2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Add<span class="visually-hidden"> Double-Wall Glass Cups to cart</span></button>
  </li>
</ul></div>
CSS 
/* List-view product cards on Bootstrap: a .card holding a .row.g-0 (photo | details | buy column from the md
   breakpoint, stacked below), and a .list-group of compact rows. Save is a data-bs-toggle="button" toggle. */
.lv,.lv-rows{--lv-ink:#1f2a27;--lv-muted:#56615d;--lv-line:#e4e0d8;--lv-accent:#115e59;--lv-accent-hover:#0b4642;--lv-ok:#166534;--lv-star:#b45309;--lv-star-off:#d6d3d1;--lv-heart:#be123c;--lv-focus:#2563eb}
.lv{gap:18px}
.lv .card{--bs-card-border-color:var(--lv-line);--bs-card-border-radius:18px;overflow:hidden}
.lv-media{aspect-ratio:4/3;background:#ece8e1;overflow:hidden}
.lv-media img{display:block;width:100%;height:100%;object-fit:cover}
.lv-info{gap:8px;padding:20px 22px}
.lv-cat{font-size:.72rem;letter-spacing:.1em;color:var(--lv-muted)}
.lv-title{font-size:1.2rem;line-height:1.3;letter-spacing:-.01em}
.lv-title a{color:var(--lv-ink)}
.lv-title a:hover{text-decoration:underline!important;text-underline-offset:3px}
.lv-rating{font-size:.8rem;color:var(--lv-muted)}
.lv-stars{--r:5;font-size:.9rem;letter-spacing:1px;line-height:1;color:transparent;
  background:linear-gradient(90deg,var(--lv-star) calc(var(--r) / 5 * 100%),var(--lv-star-off) 0);-webkit-background-clip:text;background-clip:text}
.lv-desc{font-size:.9rem;color:var(--lv-muted)}
.lv-feats{gap:6px 14px;margin-top:4px;font-size:.82rem;color:var(--lv-ink)}
.lv-feats svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--lv-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lv-buy{gap:6px;padding:18px 22px 22px;border-top:1px solid var(--lv-line);background:#fbfaf7}
.lv-price{font-size:1.5rem;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--lv-ink)}
.lv-finance{font-size:.8rem;color:var(--lv-muted)}
.lv-stock{gap:6px;margin:2px 0 8px;font-size:.82rem;color:var(--lv-ok)}
.lv-stock::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.lv-stock.is-wait{color:#92400e}
.lv-add{--bs-btn-padding-y:11px;--bs-btn-font-size:.9rem;--bs-btn-font-weight:600;--bs-btn-border-radius:10px;--bs-btn-color:#fff;--bs-btn-bg:var(--lv-accent);--bs-btn-border-color:var(--lv-accent);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--lv-accent-hover);--bs-btn-hover-border-color:var(--lv-accent-hover);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--lv-accent-hover);--bs-btn-active-border-color:var(--lv-accent-hover)}
.lv-save{--bs-btn-padding-y:9px;--bs-btn-font-size:.85rem;--bs-btn-font-weight:600;--bs-btn-border-radius:10px;--bs-btn-border-width:1.5px;--bs-btn-bg:#fff;--bs-btn-color:var(--lv-ink);--bs-btn-border-color:var(--lv-line);
  --bs-btn-hover-bg:#fff;--bs-btn-hover-color:var(--lv-ink);--bs-btn-hover-border-color:var(--lv-muted);--bs-btn-active-bg:#fff;--bs-btn-active-color:var(--lv-heart);--bs-btn-active-border-color:#fda4af}
.lv-save svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.lv-save.active svg{fill:currentColor}
@media (min-width:768px){
  .lv-media{position:relative;flex:0 0 230px;width:230px;aspect-ratio:auto;min-height:220px}
  .lv-media img{position:absolute;inset:0}
  .lv-buy{flex:0 0 236px;width:236px;justify-content:center;border-top:0;border-left:1px solid var(--lv-line)}
}
.lv-rows{--bs-list-group-border-color:var(--lv-line);--bs-list-group-border-radius:18px;--bs-list-group-item-padding-x:18px;--bs-list-group-item-padding-y:14px}
.lv-row{display:grid;grid-template-columns:72px 1fr auto;grid-template-areas:"img info price" "img info add";align-items:center;gap:2px 16px}
.lv-row img{grid-area:img;display:block;width:72px;height:72px;border-radius:12px;object-fit:cover;background:#ece8e1}
.lv-row-info{grid-area:info;min-width:0}
.lv-row .lv-title{font-size:.98rem;font-weight:600!important}
.lv-meta{margin:2px 0 0;font-size:.8rem;color:var(--lv-muted)}
.lv-row .lv-price{grid-area:price;justify-self:end;font-size:1.05rem;font-weight:700}
.lv-mini{--bs-btn-padding-x:12px;--bs-btn-padding-y:6px;--bs-btn-font-size:.8rem;--bs-btn-font-weight:700;--bs-btn-border-width:1.5px;--bs-btn-border-radius:999px;
  --bs-btn-color:var(--lv-accent);--bs-btn-border-color:var(--lv-accent);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--lv-accent);--bs-btn-hover-border-color:var(--lv-accent);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--lv-accent);--bs-btn-active-border-color:var(--lv-accent);grid-area:add;justify-self:end}
.lv-mini svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
@media (min-width:768px){.lv-row{grid-template-columns:72px 1fr auto auto;grid-template-areas:"img info price add";gap:16px 24px}}
:is(.lv,.lv-rows) :is(a,.btn):focus-visible{outline:3px solid var(--lv-focus);outline-offset:2px;box-shadow:none}
@media (prefers-reduced-motion:reduce){:is(.lv,.lv-rows) .btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#56615d] uppercase">List view with details and a buy column</span>
<ul class="flex flex-col gap-[18px]">
  <li><article class="grid grid-cols-1 overflow-hidden rounded-[18px] border border-[#e4e0d8] bg-white md:grid-cols-[230px_1fr_236px]">
    <div class="relative aspect-[4/3] overflow-hidden bg-[#ece8e1] md:aspect-auto md:min-h-[220px]"><img class="block size-full object-cover md:absolute md:inset-0" src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=600&q=70" alt="Dark green velvet three-seat sofa on a light wooden floor" width="600" height="450" loading="lazy"></div>
    <div class="flex flex-col gap-2 px-[22px] py-5">
      <p class="text-[.72rem] font-semibold tracking-[.1em] text-[#56615d] uppercase">Living room · Sofas</p>
      <h3 class="text-[1.2rem] leading-[1.3] font-bold tracking-[-.01em]"><a href="#" class="text-[#1f2a27] underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb]">Marlow Velvet Sofa, Three-Seat</a></h3>
      <p class="flex items-center gap-1.5 text-[.8rem] text-[#56615d]"><span class="bg-[linear-gradient(90deg,#b45309_94%,#d6d3d1_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, 312 reviews</span><span aria-hidden="true">4.7 (312 reviews)</span></p>
      <p class="text-[.9rem] text-[#56615d]">Deep seat, kiln-dried hardwood frame and feather-wrapped cushions in a soft cotton velvet. 214 cm wide.</p>
      <ul class="mt-1 flex flex-wrap gap-x-3.5 gap-y-1.5 text-[.82rem]">
        <li class="flex items-center gap-1.5"><svg class="size-[15px] flex-none fill-none stroke-[#115e59] stroke-[2.4] [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Free delivery and setup</li>
        <li class="flex items-center gap-1.5"><svg class="size-[15px] flex-none fill-none stroke-[#115e59] stroke-[2.4] [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>10-year frame warranty</li>
        <li class="flex items-center gap-1.5"><svg class="size-[15px] flex-none fill-none stroke-[#115e59] stroke-[2.4] [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>100-night trial</li>
      </ul>
    </div>
    <div class="flex flex-col gap-1.5 border-t border-[#e4e0d8] bg-[#fbfaf7] px-[22px] pt-[18px] pb-[22px] md:justify-center md:border-t-0 md:border-l">
      <p class="text-2xl leading-[1.2] font-extrabold tracking-[-.02em]">$1,240</p>
      <p class="text-[.8rem] text-[#56615d]">or $104/mo for 12 months</p>
      <p class="mt-0.5 mb-2 flex items-center gap-1.5 text-[.82rem] font-semibold text-[#166534] before:size-2 before:flex-none before:rounded-full before:bg-current">In stock, ships in 3 days</p>
      <button type="button" class="cursor-pointer rounded-[10px] bg-[#115e59] px-4 py-[11px] text-[.9rem] font-semibold text-white transition-colors duration-150 hover:bg-[#0b4642] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none">Add<span class="sr-only"> Marlow Velvet Sofa</span> to cart</button>
      <button type="button" class="lv-save group flex cursor-pointer items-center justify-center gap-1.5 rounded-[10px] border-[1.5px] border-[#e4e0d8] bg-white px-4 py-[9px] text-[.85rem] font-semibold transition-colors duration-150 hover:border-[#56615d] aria-pressed:border-[#fda4af] aria-pressed:text-[#be123c] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none" aria-pressed="false"><svg class="size-4 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"> Marlow Velvet Sofa to wishlist</span></button>
    </div>
  </article></li>
  <li><article class="grid grid-cols-1 overflow-hidden rounded-[18px] border border-[#e4e0d8] bg-white md:grid-cols-[230px_1fr_236px]">
    <div class="relative aspect-[4/3] overflow-hidden bg-[#ece8e1] md:aspect-auto md:min-h-[220px]"><img class="block size-full object-cover md:absolute md:inset-0" src="https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?auto=format&fit=crop&w=600&q=70" alt="Cream button-tufted armchair with carved white legs" width="600" height="450" loading="lazy"></div>
    <div class="flex flex-col gap-2 px-[22px] py-5">
      <p class="text-[.72rem] font-semibold tracking-[.1em] text-[#56615d] uppercase">Living room · Armchairs</p>
      <h3 class="text-[1.2rem] leading-[1.3] font-bold tracking-[-.01em]"><a href="#" class="text-[#1f2a27] underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb]">Ivy Tufted Armchair</a></h3>
      <p class="flex items-center gap-1.5 text-[.8rem] text-[#56615d]"><span class="bg-[linear-gradient(90deg,#b45309_88%,#d6d3d1_0)] bg-clip-text text-[.9rem] leading-none tracking-[1px] text-transparent" aria-hidden="true">★★★★★</span><span class="sr-only">Rated 4.4 out of 5, 96 reviews</span><span aria-hidden="true">4.4 (96 reviews)</span></p>
      <p class="text-[.9rem] text-[#56615d]">A compact reading chair with deep button tufting, a high back and turned beech legs. Fits a 70 cm corner.</p>
      <ul class="mt-1 flex flex-wrap gap-x-3.5 gap-y-1.5 text-[.82rem]">
        <li class="flex items-center gap-1.5"><svg class="size-[15px] flex-none fill-none stroke-[#115e59] stroke-[2.4] [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Free delivery</li>
        <li class="flex items-center gap-1.5"><svg class="size-[15px] flex-none fill-none stroke-[#115e59] stroke-[2.4] [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Removable, washable cover</li>
      </ul>
    </div>
    <div class="flex flex-col gap-1.5 border-t border-[#e4e0d8] bg-[#fbfaf7] px-[22px] pt-[18px] pb-[22px] md:justify-center md:border-t-0 md:border-l">
      <p class="text-2xl leading-[1.2] font-extrabold tracking-[-.02em]">$489</p>
      <p class="text-[.8rem] text-[#56615d]">or $41/mo for 12 months</p>
      <p class="mt-0.5 mb-2 flex items-center gap-1.5 text-[.82rem] font-semibold text-[#92400e] before:size-2 before:flex-none before:rounded-full before:bg-current">Made to order, 4–6 weeks</p>
      <button type="button" class="cursor-pointer rounded-[10px] bg-[#115e59] px-4 py-[11px] text-[.9rem] font-semibold text-white transition-colors duration-150 hover:bg-[#0b4642] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none">Add<span class="sr-only"> Ivy Tufted Armchair</span> to cart</button>
      <button type="button" class="lv-save group flex cursor-pointer items-center justify-center gap-1.5 rounded-[10px] border-[1.5px] border-[#e4e0d8] bg-white px-4 py-[9px] text-[.85rem] font-semibold transition-colors duration-150 hover:border-[#56615d] aria-pressed:border-[#fda4af] aria-pressed:text-[#be123c] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none" aria-pressed="true"><svg class="size-4 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"> Ivy Tufted Armchair to wishlist</span></button>
    </div>
  </article></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#56615d] uppercase">Compact rows</span>
<ul class="rounded-[18px] border border-[#e4e0d8] bg-white">
  <li class="grid grid-cols-[72px_1fr_auto] items-center gap-x-4 gap-y-0.5 px-[18px] py-3.5 [grid-template-areas:'img_info_price'_'img_info_add'] not-first:border-t not-first:border-[#e4e0d8] md:grid-cols-[72px_1fr_auto_auto] md:gap-x-6 md:[grid-template-areas:'img_info_price_add']">
    <img class="block size-[72px] rounded-xl bg-[#ece8e1] object-cover [grid-area:img]" src="https://images.unsplash.com/photo-1600166898405-da9535204843?auto=format&fit=crop&w=160&q=70" alt="Rolled beige rug with a faded floral pattern" width="72" height="72" loading="lazy">
    <div class="min-w-0 [grid-area:info]"><h3 class="text-[.98rem] leading-[1.3] font-semibold tracking-[-.01em]"><a href="#" class="text-[#1f2a27] underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb]">Hand-Woven Wool Rug</a></h3><p class="mt-0.5 text-[.8rem] text-[#56615d]">Sand · 160 × 230 cm</p></div>
    <p class="justify-self-end text-[1.05rem] leading-[1.2] font-bold tracking-[-.02em] [grid-area:price]">$340</p>
    <button type="button" class="flex cursor-pointer items-center gap-1.5 justify-self-end rounded-full border-[1.5px] border-[#115e59] px-3 py-1.5 text-[.8rem] font-bold text-[#115e59] transition-colors duration-150 [grid-area:add] hover:bg-[#115e59] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none"><svg class="size-3.5 fill-none stroke-current stroke-[2.6] [stroke-linecap:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Add<span class="sr-only"> Hand-Woven Wool Rug to cart</span></button>
  </li>
  <li class="grid grid-cols-[72px_1fr_auto] items-center gap-x-4 gap-y-0.5 px-[18px] py-3.5 [grid-template-areas:'img_info_price'_'img_info_add'] not-first:border-t not-first:border-[#e4e0d8] md:grid-cols-[72px_1fr_auto_auto] md:gap-x-6 md:[grid-template-areas:'img_info_price_add']">
    <img class="block size-[72px] rounded-xl bg-[#ece8e1] object-cover [grid-area:img]" src="https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=160&q=70" alt="Grey metal floor lamp with a dome shade" width="72" height="72" loading="lazy">
    <div class="min-w-0 [grid-area:info]"><h3 class="text-[.98rem] leading-[1.3] font-semibold tracking-[-.01em]"><a href="#" class="text-[#1f2a27] underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb]">Dome Floor Lamp</a></h3><p class="mt-0.5 text-[.8rem] text-[#56615d]">Graphite · E27 bulb included</p></div>
    <p class="justify-self-end text-[1.05rem] leading-[1.2] font-bold tracking-[-.02em] [grid-area:price]">$156</p>
    <button type="button" class="flex cursor-pointer items-center gap-1.5 justify-self-end rounded-full border-[1.5px] border-[#115e59] px-3 py-1.5 text-[.8rem] font-bold text-[#115e59] transition-colors duration-150 [grid-area:add] hover:bg-[#115e59] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none"><svg class="size-3.5 fill-none stroke-current stroke-[2.6] [stroke-linecap:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Add<span class="sr-only"> Dome Floor Lamp to cart</span></button>
  </li>
  <li class="grid grid-cols-[72px_1fr_auto] items-center gap-x-4 gap-y-0.5 px-[18px] py-3.5 [grid-template-areas:'img_info_price'_'img_info_add'] not-first:border-t not-first:border-[#e4e0d8] md:grid-cols-[72px_1fr_auto_auto] md:gap-x-6 md:[grid-template-areas:'img_info_price_add']">
    <img class="block size-[72px] rounded-xl bg-[#ece8e1] object-cover [grid-area:img]" src="https://images.unsplash.com/photo-1521302080334-4bebac2763a6?auto=format&fit=crop&w=160&q=70" alt="Clear glass cup of black coffee casting a long shadow" width="72" height="72" loading="lazy">
    <div class="min-w-0 [grid-area:info]"><h3 class="text-[.98rem] leading-[1.3] font-semibold tracking-[-.01em]"><a href="#" class="text-[#1f2a27] underline-offset-3 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb]">Double-Wall Glass Cups</a></h3><p class="mt-0.5 text-[.8rem] text-[#56615d]">Set of 4 · 250 ml</p></div>
    <p class="justify-self-end text-[1.05rem] leading-[1.2] font-bold tracking-[-.02em] [grid-area:price]">$32</p>
    <button type="button" class="flex cursor-pointer items-center gap-1.5 justify-self-end rounded-full border-[1.5px] border-[#115e59] px-3 py-1.5 text-[.8rem] font-bold text-[#115e59] transition-colors duration-150 [grid-area:add] hover:bg-[#115e59] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none"><svg class="size-3.5 fill-none stroke-current stroke-[2.6] [stroke-linecap:round]" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Add<span class="sr-only"> Double-Wall Glass Cups to cart</span></button>
  </li>
</ul></div>
JavaScript 
// Save buttons are toggle buttons: flip aria-pressed on click (aria-pressed: utilities restyle it).
document.querySelectorAll('.lv-save').forEach(btn => btn.addEventListener('click', () => {
  btn.setAttribute('aria-pressed', String(btn.getAttribute('aria-pressed') !== 'true'));
}));

About this set

Horizontal product cards for the list view of a category page, where shoppers compare details rather than photos. List view with details and a buy column puts the photo, the product details and a buying column side by side from 768px: the details hold the category, name, star rating, a two-line description and ticked selling points such as free delivery and a ten-year frame warranty, and the buy column holds a large price, a monthly payment line, a stock status with a coloured dot, the Add to cart button and a Save toggle. Below 768px the three parts stack, so the same markup works on a phone. Compact rows is a single bordered list for recently viewed items, a quick-order page or a mini cart: a square thumbnail, the name with a short spec line, the price and a small Add button on one row, wrapping the button under the price on narrow screens with CSS Grid areas. The example products are a velvet sofa, an armchair, a rug, a floor lamp and a set of glass cups. The Bootstrap version uses .card with .row.g-0 and a .list-group for the rows.

What’s included

  • Photo, details and buy column side by side from 768px, stacked below
  • Monthly payment line and in stock or made to order status
  • Ticked selling points with inline SVG icons
  • Compact rows that work as a mini cart or recently viewed list
  • Save button that toggles aria-pressed

Accessibility

Product names are headings with links, the Add and Add to cart buttons include the product name in their accessible name, and Save is a toggle button named Save Marlow Velvet Sofa to wishlist with aria-pressed. Ratings are read as text, for example Rated 4.7 out of 5, 312 reviews. Stock status is written out in words, not shown by the dot colour alone. Every link and button has a visible focus outline and colour transitions stop under prefers-reduced-motion.

Customise it

Change --lv-accent, --lv-ok and --lv-line on .lv and .lv-rows, and the 230px 1fr 236px column widths at the 768px breakpoint. In Bootstrap the buttons use --bs-btn-* variables; in Tailwind edit md:grid-cols-[230px_1fr_236px] and the bg-[#115e59] utilities.