Sneaker Product Cards example with pure CSS

Cards Bootstrap 5Free+ CSS

Sneaker Product Cards example with pure CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.

8.9k views201 downloads5 years ago

gosnippets.com/preview/sneaker-product-cards-example-with-pure-css

Source Code

1<main class="container">
2  <section class="card">
3    <div class="product-image">
4      <img src="https://i.ibb.co/cNWqxGx/red.png" alt="OFF-white Red Edition" draggable="false" />
5    </div>
6    <div class="product-info">
7      <h2>Nike X OFF-white</h2>
8      <p>The 10: Air Jordan 1 off-white - Chicago</p>
9      <div class="price">$999</div>
10    </div>
11    <div class="btn">
12      <button class="buy-btn">Buy Now</button>
13      <button class="fav">
14        <svg class="svg" id="i-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
15          <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" />
16        </svg>
17      </button>
18    </div>
19  </section>
20  <section class="card card-blue">
21    <div class="product-image">
22      <img src="https://i.ibb.co/0JKpmgd/blue.png" alt="OFF-white Blue Edition" draggable="false" />
23    </div>
24    <div class="product-info">
25      <h2>Nike X OFF-white</h2>
26      <p>Air Jordan 1 Retro High "Off-White - UNC" sneakers</p>
27      <div class="price">$1599</div>
28    </div>
29    <div class="btn">
30      <button class="buy-btn">Buy Now</button>
31      <button class="fav">
32        <svg class="svg" id="i-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
33          <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" />
34        </svg>
35      </button>
36    </div>
37  </section>
38</main>

More Cards snippets

Bootstrap carousel with cards in 3 columns

Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.

CardsView →

Bootstrap 5 ecommerce product cards details template

Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

CardsView →

Bootstrap snippet Panels with nav tabs using HTML & CSS

Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.

CardsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<main class="container"> 2 <section class="card"> 3 <div class="product-image"> 4 <img src="https://i.ibb.co/cNWqxGx/red.png" alt="OFF-white Red Edition" draggable="false" /> 5 </div> 6 <div class="product-info"> 7 <h2>Nike X OFF-white</h2> 8 <p>The 10: Air Jordan 1 off-white - Chicago</p> 9 <div class="price">$999</div> 10 </div> 11 <div class="btn"> 12 <button class="buy-btn">Buy Now</button> 13 <button class="fav"> 14 <svg class="svg" id="i-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> 15 <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" /> 16 </svg> 17 </button> 18 </div> 19 </section> 20 <section class="card card-blue"> 21 <div class="product-image"> 22 <img src="https://i.ibb.co/0JKpmgd/blue.png" alt="OFF-white Blue Edition" draggable="false" /> 23 </div> 24 <div class="product-info"> 25 <h2>Nike X OFF-white</h2> 26 <p>Air Jordan 1 Retro High "Off-White - UNC" sneakers</p> 27 <div class="price">$1599</div> 28 </div> 29 <div class="btn"> 30 <button class="buy-btn">Buy Now</button> 31 <button class="fav"> 32 <svg class="svg" id="i-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> 33 <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" /> 34 </svg> 35 </button> 36 </div> 37 </section> 38</main>