Card

Cards contain content and actions about a single subject

Simple textual Card

          
            <!-- Simple textual card -->
            <div class="text-card">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam commodo
                lacinia lacus, at suscipit diam pellentesque nec. Vestibulum ac tortor ac
                purus molestie dapibus sed molestie felis. Maecenas pharetra risus eget
                tortor feugiat, eget aliquam felis commodo. Vestibulum facilisis nunc mi,
                eget varius lacus iaculis eget.
              </p>
            </div>
          
        

Product Card

          
            <!-- Simple product card -->
            <div class="product-card">
              <div class="product-image">
                <img src="/productimage.jpg" alt="product" />
              </div>
              <div class="product-details">
                <h4>Adidas - T Shirt</h4>
                <span>Rs. 499</span>
              </div>
            </div>
          
        

Card with dismiss

          
            <!-- Card with close button -->
            <div class="product-card">
              <div class="product-image">
                <img src="/productimage.jpg" alt="product" />
              </div>
              <div class="product-details">
                <h4>Adidas - T Shirt</h4>
                <span>Rs. 499</span>
              </div>
              <div class="card-button">
                <svg width="1em" height="1em" viewBox="0 0 24 24">
                  <path
                    d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"
                  ></path>
                </svg>
              </div>
            </div>
          
        

Card with wishlist button

          
            <!-- Card with wishlist button -->
            <div class="product-card">
              <div class="product-image">
                <img src="/productimage.jpg" alt="product" />
              </div>
              <div class="product-details">
                <h4>Adidas - T Shirt</h4>
                <span>Rs. 499</span>
              </div>
              <div class="card-button">
                <svg width="1em" height="1em" viewBox="0 0 24 24">
                  <path
                    d="M12.1 18.55l-.1.1l-.11-.1C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5c1.54 0 3.04 1 3.57 2.36h1.86C13.46 6 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5c0 2.89-3.14 5.74-7.9 10.05M16.5 3c-1.74 0-3.41.81-4.5 2.08C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.41 2 8.5c0 3.77 3.4 6.86 8.55 11.53L12 21.35l1.45-1.32C18.6 15.36 22 12.27 22 8.5C22 5.41 19.58 3 16.5 3z"
                  ></path>
                </svg>
              </div>
            </div>
          
        

Card with badge

          
            <!-- Card with close badge -->
            <div class="product-card">
              <div class="product-image">
                <img src="/productimage.jpg" alt="product" />
              </div>
              <div class="product-details">
                <h4>Adidas - T Shirt</h4>
                <span>Rs. 499</span>
              </div>
              <div class="badge badge-text badge-blue">New</div>
            </div>
          
        

Card with shadow

(Adding any class name from the shadow helper classes will add shadow to the card)