Cards

Cards can be used to display particular information for user.

Simple Card

Lenovo Legion 5

Ryzen 7 5800H with RTX 3060
15.6"(39.62cm) FHD IPS Gaming Laptop

₹1,40,000

₹1,80,000

(22% OFF)

Refer the below code to generate a simple card. Make changes as per your requirements.

Copy
            <div class="card pos-relative flex-sbw-c flex-col">
              <img
                class="card-img"
                src="../../Assets/Lenovo Legion 5.jpg"
                alt="Lenovo Legion 5"
              />
              <div class="card-info flex-sbw flex-col">
                <p class="card-title">Lenovo Legion 5</p>
                <div class="card-description pt-1">
                  Ryzen 7 5800H with RTX 3060 <br />
                  15.6"(39.62cm) FHD IPS Gaming Laptop
                </div>
                <div class="price-info flex-c">
                  <p class="final-price">₹1,40,000</p>
                  <p class="mrp">₹1,80,000</p>
                  <p class="price-percentage">(22% OFF)</p>
                </div>
              </div>
              <button class="btn py-sm px-1 btn-primary">Add to Cart</button>
              <button class="btn py-sm px-1 btn-secondary">Wishlist</button>
            </div>

Text only card

Lenovo Legion 5

Ryzen 7 5800H with RTX 3060
15.6"(39.62cm) FHD IPS Gaming Laptop

₹1,40,000

₹1,80,000

(22% OFF)

Refer the below code to generate text-only card. Make changes as per your requirements.

Copy
            <div class="card pos-relative flex-sbw-c flex-col">
              <div class="card-info flex-sbw flex-col">
                <p class="card-title">Lenovo Legion 5</p>
                <div class="card-description pt-1">
                  Ryzen 7 5800H with RTX 3060 <br />
                  15.6"(39.62cm) FHD IPS Gaming Laptop
                </div>
                <div class="price-info flex-c">
                  <p class="final-price">₹1,40,000</p>
                  <p class="mrp">₹1,80,000</p>
                  <p class="price-percentage">(22% OFF)</p>
                </div>
              </div>
              <button class="btn py-sm px-1 btn-primary">Add to Cart</button>
              <button class="btn py-sm px-1 btn-secondary">Wishlist</button>
            </div>

Card with badge

Best Seller

Lenovo Legion 5

Ryzen 7 5800H with RTX 3060
15.6"(39.62cm) FHD IPS Gaming Laptop

₹1,40,000

₹1,80,000

(22% OFF)

Refer the below code to generate card with badge. Make changes as per your requirements.

Copy
            <div class="card pos-relative flex-sbw-c flex-col">
              <div class="card-badge pos-abs py-0 px-sm">Best Seller</div>
              <img
                class="card-img"
                src="../../Assets/Lenovo Legion 5.jpg"
                alt="Lenovo Legion 5"
              />
              <div class="card-info flex-sbw flex-col">
                <p class="card-title">Lenovo Legion 5</p>
                <div class="card-description pt-1">
                  Ryzen 7 5800H with RTX 3060 <br />
                  15.6"(39.62cm) FHD IPS Gaming Laptop
                </div>
                <div class="price-info flex-c">
                  <p class="final-price">₹1,40,000</p>
                  <p class="mrp">₹1,80,000</p>
                  <p class="price-percentage">(22% OFF)</p>
                </div>
              </div>
              <button class="btn py-sm px-1 btn-primary">Add to Cart</button>
              <button class="btn py-sm px-1 btn-secondary">Wishlist</button>
            </div>

Card with dismiss button

Lenovo Legion 5

Ryzen 7 5800H with RTX 3060
15.6"(39.62cm) FHD IPS Gaming Laptop

₹1,40,000

₹1,80,000

(22% OFF)

Refer the below code to generate card with dismiss button. Make changes as per your requirements.

Copy
          <div class="flex-c-fe flex-wrap g-1 m-1">
            <button class="btn py-sm px-1 btn-primary show-card-btn">
              Show Card
            </button>
            <div class="card pos-relative flex-sbw-c flex-col">
              <button class="dismiss-btn pos-abs">
                <i class="far fa-times-circle fa-2x"></i>
              </button>
              <img
                class="card-img"
                src="../../Assets/Lenovo Legion 5.jpg"
                alt="Lenovo Legion 5"
              />
              <div class="card-info flex-sbw flex-col">
                <p class="card-title">Lenovo Legion 5</p>
                <div class="card-description pt-1">
                  Ryzen 7 5800H with RTX 3060 <br />
                  15.6"(39.62cm) FHD IPS Gaming Laptop
                </div>
                <div class="price-info flex-c">
                  <p class="final-price">₹1,40,000</p>
                  <p class="mrp">₹1,80,000</p>
                  <p class="price-percentage">(22% OFF)</p>
                </div>
              </div>
              <button class="btn py-sm px-1 btn-primary">Add to Cart</button>
              <button class="btn py-sm px-1 btn-secondary">Wishlist</button>
            </div>
          </div>

Card with text overlay

Currently Unavailable

Lenovo Legion 5

Ryzen 7 5800H with RTX 3060
15.6"(39.62cm) FHD IPS Gaming Laptop

₹1,40,000

₹1,80,000

(22% OFF)

Refer the below code to generate card with text overlay. Make changes as per your requirements.

Copy
            <div class="card pos-relative flex-sbw-c flex-col">
              <div class="overlay pos-abs flex-center">
                <div class="py-sm px-0">Currently Unavailable</div>
              </div>
              <img
                class="card-img"
                src="../../Assets/Lenovo Legion 5.jpg"
                alt="Lenovo Legion 5"
              />
              <div class="card-info flex-sbw flex-col">
                <p class="card-title">Lenovo Legion 5</p>
                <div class="card-description pt-1">
                  Ryzen 7 5800H with RTX 3060 <br />
                  15.6"(39.62cm) FHD IPS Gaming Laptop
                </div>
                <div class="price-info flex-c">
                  <p class="final-price">₹1,40,000</p>
                  <p class="mrp">₹1,80,000</p>
                  <p class="price-percentage">(22% OFF)</p>
                </div>
              </div>
              <button class="btn py-sm px-1 btn-primary">Add to Cart</button>
              <button class="btn py-sm px-1 btn-secondary">Wishlist</button>
            </div>

Horizontal card

Lenovo Legion 5

Ryzen 7 5800H with RTX 3060
15.6"(39.62cm) FHD IPS Gaming Laptop

₹1,40,000

₹1,80,000

(22% OFF)

Refer the below code to generate a horizontal card. Make changes as per your requirements.

Copy
            <div class="card-horizontal pos-relative flex">
              <img
                class="card-img-h"
                src="../../Assets/Lenovo Legion 5.jpg"
                alt="Lenovo Legion 5"
              />
              <div class="card-details flex flex-col m-auto">
                <div class="card-info flex-sbw flex-col">
                  <p class="card-title">Lenovo Legion 5</p>
                  <div class="card-description pt-1">
                    Ryzen 7 5800H with RTX 3060 <br />
                    15.6"(39.62cm) FHD IPS Gaming Laptop
                  </div>
                  <div class="price-info flex-c">
                    <p class="final-price">₹1,40,000</p>
                    <p class="mrp">₹1,80,000</p>
                    <p class="price-percentage">(22% OFF)</p>
                  </div>
                </div>
                <button class="btn py-sm px-1 btn-primary">Add to Cart</button>
                <button class="btn py-sm px-1 btn-secondary">Wishlist</button>
              </div>
            </div>

Card with shadow

Lenovo Legion 5

Ryzen 7 5800H with RTX 3060
15.6"(39.62cm) FHD IPS Gaming Laptop

₹1,40,000

₹1,80,000

(22% OFF)

Refer the below code to generate card with shadow. Make changes as per your requirements.

Copy
            <div class="card pos-relative flex-sbw-c flex-col card-shadow">
              <img
                class="card-img"
                src="../../Assets/Lenovo Legion 5.jpg"
                alt="Lenovo Legion 5"
              />
              <div class="card-info flex-sbw flex-col">
                <p class="card-title">Lenovo Legion 5</p>
                <div class="card-description pt-1">
                  Ryzen 7 5800H with RTX 3060 <br />
                  15.6"(39.62cm) FHD IPS Gaming Laptop
                </div>
                <div class="price-info flex-c">
                  <div class="final-price">₹1,40,000</div>
                  <di class="mrp">₹1,80,000</di>
                  <p class="price-percentage">(22% OFF)</p>
                </div>
              </div>
              <button class="btn py-sm px-1 btn-primary">Add to Cart</button>
              <button class="btn py-sm px-1 btn-secondary">Wishlist</button>
            </div>