Cards

Cards are used to display content as well as it gives user an option to take action on that content, like e-commerce product card

Vertical Card

Vertical card with image, content and call to action buttons,there are 2 variants blog card and e-commerce card, to use copy the below html code.

Our Changing Planet

by Kurt Wagner

Visit ten places on our planet that are undergoing the biggest changes today.

Nike Men's Flex 2020 Rn Running Shoe

Sport Shoes

₹ 10,999


<div class="card-basic">
  <div class="">
    <img
      class="card-img"
      src="https://media.macphun.com/img/uploads/customer/blog/347/15361508215b8fcd25b13f46.53184133.jpg?q=85&w=1680"
    />

    <div class="">
      <h3 class="card-heading">Our Changing Planet</h3>
      <small class="card-subHeading">by Kurt Wagner</small>
    </div>

    <p class="card-description">
      Visit ten places on our planet that are undergoing the biggest changes
      today.
    </p>
  </div>

  <div class="card-footer">
    <button class="card-btn">READ</button>
    <button class="card-btn">BOOKMARK</button>
    <img
      class="heart-icon"
      src="https://img.icons8.com/fluency-systems-regular/50/000000/like--v1.png"
    />
    <img src="../icons/share.png" class="" />
    <img src="../icons/more.png" class="" />
  </div>
</div>

<div class="card-basic">
  <div class="badge-container">
    <img
      class="card-img"
      src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    />

    <div class="">
      <h3 class="card-heading">Nike Men's Flex 2020 Rn Running Shoe</h3>
      <small class="card-subHeading">Sport Shoes</small>
    </div>

    <p class="card-description text-bold">₹ 10,999</p>
  </div>

  <div class="card-footer">
    <button class="btn btn-ecommerce">
      <span class="icon"><i class="fa fa-shopping-cart"></i></span>
      Add to Cart
    </button>
  </div>
</div>

Horizontal Card

Horizontal card with image, content and call to action buttons, there are 2 variants blog card and e-commerce card, to use copy the below html code.

Our Changing Planet

by Kurt Wagner

Visit ten places on our planet that are undergoing the biggest changes today.

Nike Men's Flex 2020 Rn Running Shoe

Sport Shoes

₹ 10,999


<div class="card-basic Card-horizontalImage-textContainer">
  <div class="Card-horizontalImage-text">
    <img
      class="card-img Card-horizontalImage-text-img"
      src="https://media.macphun.com/img/uploads/customer/blog/347/15361508215b8fcd25b13f46.53184133.jpg?q=85&w=1680"
    />

    <div class="">
      <h3 class="card-heading">Our Changing Planet</h3>
      <small class="card-subHeading">by Kurt Wagner</small>
      <p class="card-description Card-horizontalImage-text-description">
        Visit ten places on our planet that are undergoing the biggest changes
        today.
      </p>
    </div>
  </div>

  <div class="card-footer">
    <button class="card-btn">READ</button>
    <button class="card-btn">BOOKMARK</button>
    <img
      class="heart-icon"
      src="https://img.icons8.com/fluency-systems-regular/50/000000/like--v1.png"
    />
    <img src="../icons/share.png" class="" />
    <img src="../icons/more.png" class="" />
  </div>
</div>

<div class="card-basic Card-horizontalImage-textContainer">
  <div class="Card-horizontalImage-text">
    <img
      class="card-img Card-horizontalImage-text-img Card-horizontalImage-text-img-Ecommerce"
      src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    />

    <div class="">
      <h3 class="card-heading">Nike Men's Flex 2020 Rn Running Shoe</h3>
      <small class="card-subHeading">Sport Shoes</small>
      <p class="card-description text-bold">₹ 10,999</p>
    </div>
  </div>

  <div class="card-footer">
    <button class="btn btn-text-icon btn-ecommerce">
      <span class="icon"><i class="fa fa-shopping-cart"></i></span>
      Add to Cart
    </button>
  </div>
</div>

Aleovera Indoor Plant

Air purifier

₹ 1200

Quantity :


<div
  class="card-basic Card-horizontalImage-textContainer cart_card_resize p-relative"
  >
  <div class="Card-horizontalImage-text">
    <img
      class="card-img Card-horizontalImage-text-img Card-horizontalImage-text-img-Ecommerce cart_card_imgresize"
      src="https://pyxis.nymag.com/v1/imgs/4a7/29b/4ef2f518834dd81d8ceb374caa54fd5171-22-plant-gifts.rsquare.w700.jpg"
      alt="plant image"
    />
    <i class="fa-solid fa-xmark cart_card_closeicon"></i>
              
    <div class="ml-2 cart_card_content">
      <h3 class="card-heading">Aleovera Indoor Plant</h3>
      <small class="card-subHeading">Air purifier</small>
      <p class="card-description text-bold">₹ 1200</p>
              
      <div class="d-flex cart_card_quantitycontainer">
        <small>Quantity :</small>
        <button class="btn cart_card_outlinebtn customstyle_btn">
          +
        </button>
        <input class="cart_card_quantity_inp" type="text" value="1" />
        <button class="btn cart_card_outlinebtn customstyle_btn">
          -
        </button>
      </div>
              
      <div class="d-flex mt-2 cart_card_btncontainer mb-2">
        <button
          class="btn btn-text-icon cart_card_solidbtn cta-btn mr-1"
        >
          Remove from Cart
        </button>
        <button class="btn btn-text-icon cart_card_outlinebtn">
          Move to Wishlist
        </button>
      </div>
    </div>
  </div>
</div>

Badge & Dismiss Cards

Badge cards comes with a badge which gives some information about the card content or product, like bestseller, sold out ,etc. Dismiss cards have a dismiss icon in top right corner to close the card.

New

Nike Men's Flex 2020 Rn Running Shoe

Sport Shoes

₹ 10,999

Nike Men's Flex 2020 Rn Running Shoe

Sport Shoes

₹ 10,999


<div class="card-basic">
  <div class="badge-container">
    <img
      class="card-img"
      src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    />
    <span class="card-withBadge">New</span>

    <div class="">
      <h3 class="card-heading">Nike Men's Flex 2020 Rn Running Shoe</h3>
      <small class="card-subHeading">Sport Shoes</small>
    </div>

    <p class="card-description text-bold">₹ 10,999</p>
  </div>

  <div class="card-footer">
    <button class="btn btn-ecommerce">
      <span class="icon"><i class="fa fa-shopping-cart"></i></span>
      Add to Cart
    </button>
  </div>
</div>

<div class="card-basic">
  <div class="badge-container">
    <img
      class="card-img"
      src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    />
    <img class="dismiss-card" src="../icons/close.png" alt="close icon" />

    <div class="">
      <h3 class="card-heading">Nike Men's Flex 2020 Rn Running Shoe</h3>
      <small class="card-subHeading">Sport Shoes</small>
    </div>

    <p class="card-description text-bold">₹ 10,999</p>
  </div>

  <div class="card-footer">
    <button class="btn btn-ecommerce">
      <span class="icon"><i class="fa fa-shopping-cart"></i></span>
      Add to Cart
    </button>
  </div>
</div>

Text overlay card

There is text overlay card with e-commerce version of out of stock card.

New

Nike Men's Flex 2020 Rn Running Shoe

Sport Shoes

₹ 10,999

Out of Stock


<div class="card-basic overlay-container badge-container">
  <div class="badge-container">
    <img
      class="card-img"
      src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    />
    <span class="card-withBadge">New</span>

    <div class="">
      <h3 class="card-heading">Nike Men's Flex 2020 Rn Running Shoe</h3>
      <small class="card-subHeading">Sport Shoes</small>
    </div>

    <p class="card-description text-bold">₹ 10,999</p>
  </div>

  <div class="card-footer">
    <button class="btn btn-ecommerce">
      <span class="icon"><i class="fa fa-shopping-cart"></i></span>
      Add to Cart
    </button>
  </div>
</div>
<div class="overlay-text">Out of Stock</div>

Simple card

Simple card with just content and call to action button. Copy the code from below to use.

Our Changing Planet

by Kurt Wagner

Visit ten places on our planet that are undergoing the biggest changes today.


<div class="card-basic">
  <div class="badge-container">
    <div class="">
      <h3 class="card-heading">Our Changing Planet</h3>
      <small class="card-subHeading">by Kurt Wagner</small>
    </div>

    <p class="card-description">
      Visit ten places on our planet that are undergoing the biggest changes
      today.
    </p>
  </div>

  <div class="card-footer">
    <button class="btn btn-ecommerce">Button</button>
  </div>
</div>