Cards

Card are used to show a user or a product related data collectively. Used mostly in Social Media platforms & E-Commerce stores.

Basic

Have a look at the card & the code reference below.

        
  <div class="card card-vertical">
    <img
      src="../../assets/Headphones.png"
      alt="headphones"
      class="card-media"
    />
    <div class="card-primary">
      <h2 class="card-title">Headphones</h2>
      <h3 class="card-subtitle">by Horsemaker</h3>
    </div>
    <div class="card-secondary">
      Let's unleash the power of music so you can live life to the fullest
      wherever and whenever.
    </div>
    <div class="card-actions">
      <div class="card-action-buttons">
        <button class="card-action-button">Buy</button>
        <button class="card-action-button">Add to Cart</button>
      </div>
      <div class="card-action-icons">
        <button class="card-action-icon top-right">
          <span class="material-icons"> favorite_border </span>
        </button>
        <button class="card-action-icon">
          <span class="material-icons"> share </span>
        </button>
      </div>
    </div>
  </div>
        
      

Card with a Badge

Have a look at the card & the code reference below.

        
  <div class="card card-vertical card-relative">
    <img
      src="../../assets/Headphones.png"
      alt="headphones"
      class="card-media"
    />
    <div class="card-primary">
      <h2 class="card-title">Headphones</h2>
      <h3 class="card-subtitle">by Horsemaker</h3>
    </div>
    <div class="card-secondary">
      Let's unleash the power of music so you can live life to the fullest
      wherever and whenever.
    </div>
    <div class="card-actions">
      <div class="card-action-buttons">
        <button class="card-action-button">Buy</button>
        <button class="card-action-button">Add to Cart</button>
      </div>
      <div class="card-action-icons">
        <button class="card-action-icon top-right">
          <span class="material-icons"> favorite_border </span>
        </button>
        <button class="card-action-icon">
          <span class="material-icons"> share </span>
        </button>
      </div>
    </div>
    <div class="card-badge hl hl-warning">Bestseller</div>
  </div>
        
      

Card with Dismiss Icon

Have a look at the card & the code reference below.

        
  <div class="card card-vertical card-relative">
    <div class="card-primary">
      <img
        src="../../assets/Headphones.png"
        alt="headphones"
        class="card-media"
      />
      <div class="card-details">
        <h2 class="card-title">Headphones</h2>
        <h3 class="card-subtitle">by Horsemaker</h3>
      </div>
    </div>
    <div class="card-secondary">
      Let's unleash the power of music so you can live life to the fullest
      wherever and whenever.
    </div>
    <div class="card-actions">
      <div class="card-action-buttons">
        <button class="card-action-button">Read</button>
        <button class="card-action-button">Add to Cart</button>
      </div>
      <div class="card-action-icons">
        <button class="card-action-icon">
          <span class="material-icons"> favorite_border </span>
        </button>
        <button class="card-action-icon">
          <span class="material-icons"> share </span>
        </button>

        <button class="card-action-icon top-right">
          <span class="material-icons"> close </span>
        </button>
      </div>
    </div>
  </div>
        
      

Card with Text Overlay

Have a look at the card & the code reference below.

        
  <div class="card card-vertical">
    <div class="card-primary card-relative-media">
      <img
        src="../../assets/Headphones.png"
        alt="headphones"
        class="card-media"
      />
      <div class="card-details text-overlay">
        <h2 class="card-title">Headphones</h2>
        <h3 class="card-subtitle">by Horsemaker</h3>
      </div>
    </div>
    <div class="card-secondary">
      Let's unleash the power of music so you can live life to the fullest
      wherever and whenever.
    </div>
    <div class="card-actions">
      <div class="card-action-buttons">
        <button class="card-action-button">Buy</button>
        <button class="card-action-button">Add to Cart</button>
      </div>
      <div class="card-action-icons">
        <button class="card-action-icon top-right">
          <span class="material-icons"> favorite_border </span>
        </button>
        <button class="card-action-icon">
          <span class="material-icons"> share </span>
        </button>
      </div>
    </div>
  </div>
        
      

Text-Only Card

Have a look at the card & the code reference below.

        
  <div class="card card-vertical">
    <img
      src="../../assets/Headphones.png"
      alt="headphones"
      class="card-media hide-media"
    />
    <div class="card-primary">
      <h2 class="card-title">Headphones</h2>
      <h3 class="card-subtitle">by Horsemaker</h3>
    </div>
    <div class="card-secondary">
      Let's unleash the power of music so you can live life to the fullest
      wherever and whenever.
    </div>
    <div class="card-actions">
      <div class="card-action-buttons">
        <button class="card-action-button">Buy</button>
        <button class="card-action-button">Add to Cart</button>
      </div>
      <div class="card-action-icons">
        <button class="card-action-icon">
          <span class="material-icons"> favorite_border </span>
        </button>
        <button class="card-action-icon">
          <span class="material-icons"> share </span>
        </button>
      </div>
    </div>
  </div>
        
      

Vertical Cards

Have a look at the card & the code reference below.

        
  <div class="card card-vertical">
    <div class="card-primary">
      <img
        src="../../assets/Headphones.png"
        alt="headphones"
        class="card-media"
      />
      <div class="card-details">
        <h2 class="card-title">Headphones</h2>
        <h3 class="card-subtitle">by Horsemaker</h3>
      </div>
    </div>
    <div class="card-secondary">
      Let's unleash the power of music so you can live life to the fullest
      wherever and whenever.
    </div>
    <div class="card-actions">
      <div class="card-action-buttons">
        <button class="card-action-button">Buy</button>
        <button class="card-action-button">Add to Cart</button>
      </div>
      <div class="card-action-icons">
        <button class="card-action-icon">
          <span class="material-icons"> favorite_border </span>
        </button>
        <button class="card-action-icon">
          <span class="material-icons"> share </span>
        </button>
      </div>
    </div>
  </div>
  <div class="card card-vertical">
    <img
      src="../../assets/Headphones.png"
      alt="headphones"
      class="card-media"
    />
    <div class="card-primary card-order-first">
      <h2 class="card-title">Headphones</h2>
      <h3 class="card-subtitle">by Horsemaker</h3>
    </div>
    <div class="card-secondary">
      Let's unleash the power of music so you can live life to the fullest
      wherever and whenever.
    </div>

    <div class="card-actions">
      <div class="card-action-buttons">
        <button class="card-action-button">Buy</button>
        <button class="card-action-button">Add to Cart</button>
      </div>
      <div class="card-action-icons">
        <button class="card-action-icon">
          <span class="material-icons"> favorite_border </span>
        </button>

        <button class="card-action-icon">
          <span class="material-icons"> share </span>
        </button>
      </div>
    </div>
  </div>
        
      

Horizontal Card

Have a look at the card & the code reference below.

        
  <div class="card card-horizontal">
    <img
      src="../../assets/Headphones.png"
      alt="headphones"
      class="card-media"
    />
    <div class="card-info">
      <div class="card-primary">
        <h2 class="card-title">Headphones</h2>
        <h3 class="card-subtitle">by Horsemaker</h3>
      </div>
      <div class="card-actions">
        <div class="card-action-buttons">
          <button class="card-action-button">Buy</button>
          <button class="card-action-button">Add to Cart</button>
        </div>
        <div class="card-action-icons">
          <button class="card-action-icon top-left">
            <span class="material-icons"> favorite_border </span>
          </button>
        </div>
      </div>
    </div>
  </div>