<!--Basic card template (ever template has shadow by default)  -->
<div class="card">
<div class="card-info">
<div class="card-image">
    <img
    src="https://images070&q=80"
    alt="stockImage"
    />
</div>
<div class="card-content">
    <div class="card-title">1. Basic</div>
    <div class="card-subtitle">By Sameep Sharma</div>
</div>
<div class="card-desc">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Autem, cupiditate doloremque dolorem deserunt mollitia
    ratione adipisci aut aliquid dolor. 1.Basic 2.Text 3.casnc
    4.gibberish
</div>
</div>

<div class="card-buttons">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-primary">Secondary</button>
</div>
                    

 <!--Card template with badge (ever template has shadow by default)  -->
<div class="card">
  <div class="card-info">
  <div class="card-image pos-rel">
      <img
      src="https://images70&q=80"
      alt="stockImage"
      />
      <!-- add class "card-badge" to get the badge on the card  -->
      <div class="card-badge pos-abs">Must visit</div>

  </div>
  <div class="card-content">
      <div class="card-title">1. Basic</div>
      <div class="card-subtitle">By Sameep Sharma</div>
  </div>
  <div class="card-desc">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Autem, cupiditate doloremque dolorem deserunt mollitia
      ratione adipisci aut aliquid dolor. 1.Basic 2.Text 3.casnc
      4.gibberish
  </div>
  </div>
  
  <div class="card-buttons">
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-primary">Secondary</button>
  </div>

 <!--Card template with dismiss (ever template has shadow by default)  -->
<div class="card">
    <div class="card-info">
    <div class="card-image pos-rel">
        <img
        src="https://images70&q=80"
        alt="stockImage"
        />
        <!-- add class "card-dismiss" to get the badge on the card  -->
        <i class="card-badge pos-abs">Must visit</i>

    </div>
    <div class="card-content">
        <div class="card-title">1. Basic</div>
        <div class="card-subtitle">By Sameep Sharma</div>
    </div>
    <div class="card-desc">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Autem, cupiditate doloremque dolorem deserunt mollitia
        ratione adipisci aut aliquid dolor. 1.Basic 2.Text 3.casnc
        4.gibberish
    </div>
    </div>
    
    <div class="card-buttons">
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-primary">Secondary</button>
    </div>

 <!--Card template with Text Overlay (ever template has shadow by default)  -->
<div class="card">
    <div class="card-info">
        <div class="img-title pos-rel">
            <div class="card-image">
            <img
                src="https://images.unsplash.com/photo-1621277224630-81d9af65e40c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
                alt="stockImage"
            />
            </div>
            <div class="card-content content-overMedia">
            <div class="card-title title-overMedia">2. Text Over Media</div>
            <div class="card-subtitle-overMedia">By Sameep Sharma</div>
            </div>
        </div>

        <div class="card-desc">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem,
            cupiditate doloremque dolorem deserunt mollitia ratione adipisci aut
            aliquid dolor.
        </div>
        </div>

    <div class="card-buttons">
    <button class="btn btn-primary">Yes, I'm in</button>
    <button class="btn">No thanks</button>
    </div>
</div>

<!-- Card with Text only (ever template has shadow by default)  -->
<div class="card">
    <div class="card-info">
    <div class="card-content">
        <div class="card-title">Text Only</div>
        <div class="card-subtitle">By Sameep Sharma</div>
    </div>
    <div class="card-desc">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Autem, cupiditate doloremque dolorem deserunt mollitia
        ratione adipisci aut aliquid dolor. 1.Basic 2.Text 3.casnc
        4.gibberish
    </div>
    </div>

    <div class="card-buttons">
    <button class="btn btn-primary">Yes, I'm in</button>
    <button class="btn">No thanks</button>
    </div>
</div>