Card

Cards can be proved very useful. You can use them to display content on an e-commerce app, or on a video library app. You can also use them to show user feedback in the form of text-only card on your site.

Horizontal Text Card

Captain America

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

                    
<div class="card card-horizontal">
  <img loading="lazy" class="card-horizontal-img" src="..." alt="..." />

  <div>
    <h1 class="card-head">Captain America</h1>
    <p class="card-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna 
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
      ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>

    <div class="card-horizontal-footer">
      <button class="card-icon-btn">
        <i class="far fa-comment m-auto"></i>
      </button>
      <button class="card-icon-btn">
        <i class="far fa-heart m-auto"></i>
      </button>
      <button class="card-icon-btn">
        <i class="far fa-share-square m-auto"></i>
      </button>
    </div>
  </div>
</div>

Vertical Item Card

Hulk Bobblehead

Elegant Lifestyle Super Hero Incredible Hulk Action Figure Limited Edition, Marvel Comics Character

                    
<div class="card card-vertical">
  <div class="card-vertical-header">
    <span class="status-badge text-center w-6p5">
      4+ <i class="fas fa-star"></i>
    </span>

    <button class="card-icon-btn ml-auto">
      <i class="far fa-heart m-auto"></i>
    </button>
  </div>

  <img loading="lazy" class="card-vertical-img" src="..." alt="..." />

  <h1 class="card-head">Hulk Bobblehead</h1>
  <p class="card-text">
    Elegant Lifestyle Super Hero Incredible Hulk Action Figure 
    Limited Edition, Marvel Comics Character
  </p>

  <div class="card-vertical-footer">
    <span class="current-price">
      <strong>₹416</strong>
    </span>
    <span class="earlier-price">₹1,780</span>
    <span class="pct-off">76% off</span>
  </div>
</div>

Text Overlay Card

You can hover to see overlay transition

Play

Marvel Studios' Eternals | Final Trailer

Marvel Entertainment

                          
<div class="card card-text-overlay card-vertical">
  <img loading="lazy" class="card-vertical-img" src="..." alt="..." />

  <span class="card-vertical-img overlay-content">
    <i class="fas fa-play overlay-play-icon"></i> Play
  </span>

  <div class="card-text-overlay-row">
    <img loading="lazy" class="card-horizontal-img" src="..." alt="..." />

    <div>
      <h1 class="card-head">
        Marvel Studios' Eternals | Final Trailer
      </h1>
      <p class="card-text">Marvel Entertainment</p>
    </div>
  </div>
</div>

Dismiss Card with Shadow

Marvel Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

                          
<div class="card card-dismiss">
  <button class="card-icon-btn ml-auto">
    <i class="fas fa-times m-auto"></i>
  </button>

  <h1 class="card-head">Marvel Heading</h1>
  <p class="card-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing 
    elit, sed do eiusmod tempor incididunt ut labore et 
    dolore magna aliqua.
  </p>
</div>